Oh no! It looks like JavaScript is not enabled in your browser.

러닝패스

테크주니어

HTML, CSS, JavaScript, 미니 프로젝트 3개

무료

시리즈

⚡ 7시간이면 이런걸 할 수 있어요!

•

프론트엔드 개발의 기본, 'HTML, CSS, JavaScript' 에 대한 지식을 잘 쌓을 수 있어요

•

쉬워보이지만 막상 구현하려면 어렵고 헷갈리는 개념들을 이해할 수 있어요

•

3개의 미니 프로젝트를 통해 프론트엔드 개발에 대한 자신감과 결과물도 얻어요

학습 시간을 줄였어요!

7시간

핵심 콘텐츠만 선별했어요!

7개 콘텐츠

이 분들은 꼭 보세요.

프론트엔드 개발 입문자

미리 알고 있어야 해요.

없음

이 러닝패스가 어떠신가요?

(내 보관함에서 다시 볼 수 있어요)

재미있어요

본 러닝패스에서는 프론트엔드 개발자의 기본 스킬셋인 HTML, CSS, JavaScript가 무엇인지 이해하고, HTML, CSS 그리고 약간의 JavaScript를 사용해서 정적인 웹페이지와 간단한 기능이 포함된 웹앱을 구현해보는 총 3개의 미니 프로젝트들로 구성되어있습니다.

PATH

테크주니어의 러닝패스

HTML 기본과 중요 포인트

HTML 기초, React 할때 꼭 필요한 팁! 쉽다고 무시하면 안돼요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

출처: https://youtu.be/i0FN-OwJ7QI

HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

출처: https://youtu.be/OoA70D2TE0A

HTML 태그들, 헷갈리는거 정리해 보았다 🥳 (시맨틱 태그, 중요한 태그들 모음)

출처: https://youtu.be/T7h8O7dpJIg

PATH

테크주니어의 러닝패스

CSS 기초 및 중요 포인트

CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

출처: https://youtu.be/gGebK7lWnCk

CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

출처: https://youtu.be/jWh3IbgMUPI

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

출처: https://youtu.be/7neASrWEFEM

NOTE

튜토리얼 프로젝트를 보다 효율적으로 수행하기 위한 방법을 소개하는 짧은 영상입니다. 이 영상에서 소개하는 팁들을 이번 시리즈에서 다루는 미니 프로젝트 영상들을 학습하실 때 꼭 적용해보세요.

클론코딩 "제대로" 하는 방법 #Shorts

출처: https://youtu.be/yu7GQ4zbTsw

테크주니어 님의 학습노트 외 1개

NOTE

미니 프로젝트 1 : HTML, CSS 코드를 직접 쳐보면서 눈에 보이는 간단한 정적 웹 페이지 하나를 빠르게 만들어볼거에요. 내가 작성한 HTML 태그와 CSS 코드가 어떻게 화면에 보여지는지 살펴보도록 하죠.

웹사이트 10초만에 만들기 (10분 걸려도 책임은 안 짐) - HTML / CSS 배우기

출처: https://youtu.be/RK5foxPm5GA

테크주니어 님의 학습노트

PATH

테크주니어의 러닝패스

자바스크립트 기초 문법

자바스크립트 기초 강좌 #1 - 변수

출처: https://youtu.be/P0FY8k916e0

자바스크립트 기초 강좌 #2 - 자료형

출처: https://youtu.be/NrVs7ujs6xI

자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

출처: https://youtu.be/YBjufjBaxHo

NOTE

미니 프로젝트 2 : HTML, CSS 그리고 위에서 배운 JavaScript에 대한 기초 지식을 활용해서 정적 유튜브 웹사이트를 구현해볼게요.

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

출처: https://youtu.be/67stn7Pu7s4

테크주니어 님의 학습노트

PATH

미니 프로젝트 3 : 본 러닝패스의 마지막 미니 프로젝트입니다. 여러 멋진 배경 사진들, 나만의 문구와 함께 실시간으로 시간과 날씨를 확인하고, 할 일 목록 등을 추가 편집할 수 있는 기능을 담은 실질적으로 누군가 사용해볼 법만 한 유용한 웹앱을 만들어봅시다.

테크주니어의 러닝패스

미니 프로젝트 3 : 크롬 웹앱 만들어보기

초보자를 위한 바닐라 자바스크립트 #0-2 What are we building : JS for Beginners

출처: https://youtu.be/ygVeQEgxm4o

초보자를 위한 바닐라 자바스크립트 #3-1 Making a JS Clock part One

출처: https://youtu.be/f0nBj0YMBUI

초보자를 위한 바닐라 자바스크립트 #3-1 Making a JS Clock part One

출처: https://youtu.be/f0nBj0YMBUI

러닝패스 학습 완료

다시 보지않기

👋 다양한 인사이트를 읽어보고 계신가요?

나만의 학습 기록을 남기고, 관리하고 싶다면!

다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!

나의 학습 내용을 공유하고, 수익을 올리고 싶다면!

3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.

3초 만에 가입하기