인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
NEW
개발 · 프로그래밍

/

웹 개발

[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

최신 CSS 프러퍼티와 실무적인 Javascript를 프로젝트를 진행하면서 재밌게 배울 수 있습니다.

12명 이 수강하고 있어요.

HTML/CSSJavaScriptvanilla-javascript
Thumbnail

입문자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

  • 최신 CSS와 실무 적용법

  • 실무적인 Javascript와 응용법

  • 트렌디한 대시보드 일기장 프로젝트 만들기

코딩 기초 뿌시기 마지막 Chapter.
🔥CSS & Javascript Master🔥

Project-Based-Learning
트렌디한 대시보드 감정 일기장 만들기

CSS와 Javascript의 끈끈한 조합으로
실무적인 CSS와 Javascript를 학습하며 실력을 다질 수 있는 짜임세 있는 강의

비주얼배너 (a안{파랑})

✋잠깐,
더 높은 실력 향상을 계획하고 계신가요?

[CSS와 Javascript Master] 과정의 다음 단계인 [완벽한 프론트엔드 부트캠프 코스] 강의를 구매하면,
CSS&Javasript 과정이 무료로 포함되어 있습니다.

커버이미지

[완벽한 프론트엔드 부트캠 코스]는,

주니어 개발자 수준까지 실력을 향상 시키기 위한, React.js와 Next.js를 활용한 웹 개발 부트캠프 과정과 React.Native와 Expo를 활용한 하이브리드앱 개발 부트캠프 과정까지 포함된 완벽한 프론트엔드 코스를 제공하고 있어요!

💥 Attention!
이 강의 구매 후 [완벽한 프론트엔드 부트캠프] 강의를 구매하더라도, 별도의 할인을 제공하지 않기 때문에 더 집중적인 프론트엔드 학습을 계획하고 있다면, 이 과정이 무료로 포함된 [완벽한 프론트엔드 부트캠프] 코스를 처음부터 구매하는 것을 추천 드려요😃

[CSS&JS Master]는요✨
꼼꼼한 커리큘럼을 가지고 있어요

CSS와 Javascript을 따로 배우지 않고, 연관성있는 같은 주제로 묶어 섹션별로 함께 학습하는 효율적이면서도 실용적인 강의입니다. 맨 아래 커리큘럼에서 꼼꼼한 목차를 확인해보세요😀

최신 업데이트 포함 60가지 이상의 프로퍼티와 CSS의 중요 개념을 모두 모았습니다.

[padding vs margin] [px vs rem] [flex vs grid]

[padding vs margin], [px vs rem], [flex vs grid]

실무에서 다양한 CSS 특성들 중에 상황에 따라 무엇을 써야 더 효율적인지 정해드립니다.

toggle, dropdown, modal

toggle, dropdown, modal

심화UI를 라이브러리 없이 직접 만들어보며 CSS의 세부적인 내용까지 학습할 수 있습니다.

CSS와 함께 쓰여야 하는 Javascript의 기초부터 심화 내용까지 모두 모았습니다.

[scope & hoisting & TDZ], [스로틀링 & 디바운싱]

[scrope & hoisting & TDZ], [스로틀링 & 디바운싱]

중요하고 연관성 있는 Javascript의 내용을 묶어서 한번에 이해할 수 있도록 했습니다.

[for] vs [map] vs [forEach]

[function vs 표현식 vs 화살표함수], [for vs map vs forEach]

실무에서 상황에 따라 어떤 Javascript 문법을 사용하는 것이 좋은지 정해드립니다.

paginavion, infinite-scroll, 내 위치 찾기

pagination, infinite-scroll, 내 위치 찾기

심화 Javascript 기능을 라이브러리 없이 순수 바닐라 Javascript로 직접 만들어 보며 원리를 이해합니다.

이 과정의 핵심포인트는요✨
30시간 이상의 실무적인 강의와 과제를 제공해요


학습 내용에 집중할 수 있도록, 세부적으로 강의 주제를 나누고 분류해서, 빠르게 성장할 수 있도록 기획된 세심한 강의와 과제를 제공하고 있어요😃


한 개의 섹션에, (c안)

한 개의 섹션에,

같은 맥락의 CSS와 Javascript가 짝궁으로 구성하고 있어요! CSS와 JS가 어떻게 이어져야 하는지 명확하게 이해할 수 있어요!

(학습 자료 제공)

한 개의 섹션을 완료 후,

한 개의 섹션을 완료 후,

해당 내용으로 진행하는 과제를 제공하고 있어요.
과제를 하다보면, 나만의 일기장을 완성할 수 있어요!

(레퍼런스 코드 제공)

이런 분들에게는
더없이 안성맞춤이

완전 쌩기초강의 수료 후
반복되는 기초내용은 건너띄고
진짜 프로젝트를 완성하고 싶어요.

React..?
전문 과정으로 넘어가기 위한
필수적인 학습을 원해요.

어?! 금지~
정말 꼼꼼하게 알려주는
나만의 사수가 필요해요.

A to Z 걸음마하듯 따라하다 보면
어느새 나만의 일기장 웹사이트가 짠!🎁

트렌디한 대시보드 디자인의 감정기록 일기장을 함께 만들어 보세요.
필요하다면 고도화해서 더 품질 좋은 프로젝트로 업데이트 할 수 있어요.

이 강의의 수강생이 직접 만든 프로젝트를 소개합니다😁

다양한 디자인과 기능이 포함되어 있는 감정 기록 일기장

반응형 디자인 - 등록하기

반응형 디자인 - 검색하기

[CSS&JS Master] 수강 후엔
이런 입문자가 될 수 있어요. 💪🏻

_수강후엔 이런 입문자

혹시
궁금한 점이 있으신가요?

Q. 아무런 지식 없이 수강해도 될까요?

아니요. 완전 쌩기초를 위한 강의는 아니에요. 최소한 HTML이 무엇인지, CSS 특성이 무엇인지, Javascript의 조건문이 무엇인지 정도의 지식은 있어야 합니다. 인프런에서 제공되는 무료 입문 강의나 또는 유튜브에서 제공되는 무료 강의를 들어본적 있다면 수강 가능합니다🙂


Q. 별도의 교재가 필요한가요?

아니요. 수업에 필요한 학습자료와 과제를 위한 디자인을 각각 노션과 피그마로 제공하고 있습니다. 강의를 듣고, 학습자료를 보고 복습 후 과제를 진행하는 순서대로 강의를 따라오시면 많은 도움이 될 수 있습니다.


Q. 강의 수강 전, 설치해야 할 프로그램이 있나요?

네. 웹 개발 학습에 필요한 기본적인 무료 프로그램 설치를 해두어야 더욱 쉽게 강의를 따라갈 수 있습니다.
1. 크롬 브라우저
2. VS code
3. 노션 (학습자료 용)
4. 피그마 계정 (프로젝트 디자인 확인용)


Q. [CSS&Javascript Master] 수강 후 어떤 강의를 추천하시나요?

이 과정 다음으로 적합한 강의는 실무 프레임워크를 활용한 React강의를 추천합니다. 저희가 제공하는 과정은 무려 150시간 정도의 밀도있는 과정인 [완벽한 프론트엔드 부트캠프] 코스를 추천드립니다.

잠깐! 이미 다음과정까지 생각한다면, 이 강의를 추천하지 않고 [완프] 강의를 선택할 것을 추천드립니다. [완벽한 프론트엔드 부트캠프]에서는 이 과정을 무료로 포함하고 있습니다😀

팀 코드캠프를
소개합니다.

코드캠프 소개이미지
15. 노원두 소개이미지

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹 개발에 재미를 붙이고 싶은 분

  • 미니 프로젝트를 완성하고 싶은 분

  • 웹 개발 지식을 얻고 싶은 분

선수 지식,
필요할까요?

  • 기초 HTML

안녕하세요
입니다.

12,810

명

수강생

339

개

수강평

162

개

답변

4.8

점

강의 평점

9

개

강의

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

공동 지식공유자

커리큘럼

전체

124개 ∙ (30시간 49분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!