Oh no! It looks like JavaScript is not enabled in your browser.
Reload
러닝패스
테크주니어
개발자
HTML, CSS, JavaScript, 미니 프로젝트 3개
무료
시리즈
⚡ 7시간이면 이런걸 할 수 있어요!
•
프론트엔드 개발의 기본, 'HTML, CSS, JavaScript' 에 대한 지식을 잘 쌓을 수 있어요
•
쉬워보이지만 막상 구현하려면 어렵고 헷갈리는 개념들을 이해할 수 있어요
•
3개의 미니 프로젝트를 통해 프론트엔드 개발에 대한 자신감과 결과물도 얻어요
학습 시간을 줄였어요!
7
시간
핵심 콘텐츠만 선별했어요!
7
개 콘텐츠
이 분들은 꼭 보세요.
프론트엔드 개발 입문자
미리 알고 있어야 해요.
없음
이 러닝패스가 어떠신가요?
(
내 보관함
에서 다시 볼 수 있어요)
👍
도움돼요
5
🌱
쉬워요
0
🤷♂️
어려워요
0
👀
또 볼래요
1
😉
재미있어요
1
본 러닝패스에서는 프론트엔드 개발자의 기본 스킬셋인 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
튜토리얼 프로젝트를 보다 효율적으로 수행하기 위한 방법을 소개하는 짧은 영상입니다. 이 영상에서 소개하는 팁들을 이번 시리즈에서 다루는 미니 프로젝트 영상들을 학습하실 때 꼭 적용해보세요.
Video
클론코딩 "제대로" 하는 방법 #Shorts
출처: https://youtu.be/yu7GQ4zbTsw
테크주니어 님의 학습노트
외 1개
NOTE
미니 프로젝트 1 : HTML, CSS 코드를 직접 쳐보면서 눈에 보이는 간단한 정적 웹 페이지 하나를 빠르게 만들어볼거에요. 내가 작성한 HTML 태그와 CSS 코드가 어떻게 화면에 보여지는지 살펴보도록 하죠.
Video
웹사이트 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에 대한 기초 지식을 활용해서 정적 유튜브 웹사이트를 구현해볼게요.
Video
클론코딩 유튜브 사이트 따라 만들기(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초 만에 가입하기