Programming

Web Development

[CSS&JS Master] - Create a trendy emotional diary

Name: [CSS&JS Master] - Create a trendy emotional diary
Price: 88000 KRW

You can learn the latest CSS properties and practical Javascript while working on a project.

(5.0) 1 reviews

25 learners

실습 중심

HTML/CSS

JavaScript

vanilla-javascript

What you will learn!

Latest CSS and practical application methods
Practical Javascript and Applications
Create a trendy dashboard diary project

Q. Can I take the course without any knowledge?

No. This is not a course for complete beginners. You should at least have some knowledge of what HTML is, what CSS features are, and what conditional statements are in Javascript. If you have taken the free introductory course provided by Inflearn or the free course provided on YouTube, you can take this course 🙂

Q. Do I need a separate textbook?

No. We provide learning materials and assignment designs for the class in Notion and Figma, respectively. If you follow the lectures in the order of listening to the lecture, reviewing the learning materials, and then doing the assignments, it will be very helpful.

Q. Is there a program I need to install before taking the course?

Yes. You should install the basic free programs required to learn web development to follow the lectures more easily.
1. Chrome browser
2. VS code
3. Notion (for learning materials)
4. Figma account (for project design confirmation)

Q. [CSS&Javascript Master] What lectures do you recommend after taking the course?

The next best course to this one is the React course using a practical framework. We recommend the [Complete Front-End Bootcamp] course, which is a dense course of about 150 hours.

Wait! If you have already thought about the next step, I recommend you not to take this course and choose [Wanp] course. [Perfect Frontend Bootcamp] includes this course for free 😀

Recommended for
these people

Who is this course right for?

Those who want to get into web development
Those who want to complete a mini project
Those who want to gain web development knowledge

Need to know before starting?

Basic HTML

Hello
This is

13,420

Learners

383

Reviews

193

Answers

4.8

Rating

Courses

"Try anything, Try everything!"

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

Co-instructor

Curriculum

All

124 lectures ∙ (30hr 49min)

Course Materials:

Lecture resources

Section 1. 👉 Section 01

13 lectures ∙ (3hr 42min)

Section 2. 👉 Section 02

12 lectures ∙ (4hr 15min)

14. [CSS 02-1-1] Transformations and Animations - Transitions
11:40
15. [CSS 02-1-2] Transformations and Animations - Transform
14:43
16. [CSS 02-1-3] Transformations and Animations - Animations
11:29
17. [CSS 02-2-1] Animation Application - Toast
13:17
18. [CSS 02-2-2] Animation Application - Loading
09:19
19. [CSS 02-2-3] Animation Application - Skeleton
11:58
20. [JS 02-1-1] Browser Features - Storage
21:55
21. [JS 02-1-2] Browser Features - Storage and JSON Storage
15:17
22. [JS 02-1-3] Browser Features - Routing
18:46
23. [JS 02-2-1] Conditional Statements and Loops - Conditional Filtering
26:21
24. [JS 02-2-2] Conditional statements and loops - item loop
01:06:16
25. [JS 02-2-3] Conditional Statements and Loops - Advanced Item Loops
34:21

Section 3. 👉 Section 03

12 lectures ∙ (2hr 26min)

26. [CSS 03-1-1] Position - Absolute Position
09:20
27. [CSS 03-1-2] Position - Relative Position
08:19
28. [CSS 03-1-3] Position - Screen Location
07:05
29. [CSS 03-2-1] Scroll - Creating a Scroll
17:24
30. [CSS 03-2-2] Scroll - Fixing the scroll header
06:28
31. [CSS 03-2-3] Scroll - Make the scroll header background blurry
04:38
32. [JS 03-1-1] Scroll - Scroll
17:26
33. [JS 03-1-2] Scroll - Scroll and Address Bar
11:44
34. [JS 03-1-3] Scroll - Event Listeners and Scroll Detection
19:42
35. [JS 03-2-1] Event bubbling - 1
18:36
36. [JS 03-2-2] Event bubbling - 2
13:55
37. [JS 03-2-3] Event bubbling - Event capturing
12:04

Section 4. 👉 Section 04

12 lectures ∙ (2hr 40min)

Section 5. 👉 Section 05

12 lectures ∙ (3hr 25min)

Section 6. 👉 Section 06

12 lectures ∙ (2hr 33min)

Section 7. 👉 Section 07

12 lectures ∙ (3hr 13min)

Section 8. 👉 Section 08

12 lectures ∙ (2hr 39min)

Section 9. 👉 Section 09

12 lectures ∙ (3hr 0min)

Section 10. 👉 Section 10

12 lectures ∙ (2hr 52min)

Section 11. 🔥 CSS&Javascript Master Lecture Material Download🔥

3 lectures

Published:

Last updated:

Reviews

All

1 reviews

5.0

1 reviews

style252
Reviews 6
∙
Average Rating 4.2
Edited
5
100% enrolled
이해하기 쉽고 업무에 많은 도움이될꺼 같습니다.
- 코드캠프
  Instructor
  style252님, 안녕하세요! 진짜 실무에 필요한 것만 깔끔하게 설명드리려고 노력했습니다. 도움이 많이 되었길 바래요!

$68.20

codecamp's other courses

Check out other courses by the instructor!

이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편

코드캠프

No Code, Only Prompt 10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만드는 '진짜' 실무적용 바이브코딩을 배울 수 있습니다.

입문

React, Next.js, cursor

이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편

코드캠프

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

코드캠프

1년간 300여명의 개발자를 배출한 ‘진짜’ 부트캠프의 고농축 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [인프런X코드캠프]가 준비했습니다 :)

입문

React, Next.js, GraphQL

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

코드캠프

[코드캠프] 강력한 CSS

코드캠프

CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까요?

초급

HTML/CSS

[코드캠프] 강력한 CSS

코드캠프

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

코드캠프

수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

입문

React, Next.js, GraphQL

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

코드캠프

[코드캠프] 시작은 프리캠프

코드캠프

코딩 부트캠프의 독보적인 커리큘럼으로 만든 강의입니다. 가장 기초적이고 실무에서 꼭 필요한 내용들로 구성되어 있어요. '누구나 가능한 개발자로의 커리어 전환' 이 강의로 시작하세요.

입문

HTML/CSS, JavaScript

[코드캠프] 시작은 프리캠프

코드캠프

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

코드캠프

너무나 어렵게만 느껴지는 알고리즘... 수학과 친하지 않은 수강생이라도 이 강의 하나로 알고리즘 기초를 한 번에 끝낼 수 있을 거예요! 알고리즘을 푸는 데 필요한 기초 개념을 차근차근 배우고, 더 나아가 문제에 적용하는 코드캠프의 노하우까지 싹 다 알려드릴게요 :)

초급

JavaScript

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

코드캠프

[코드캠프] 훈훈한 Javascript

코드캠프

다른 언어도 많은데.. 왜 자바스크립트여야 하냐구요? 자바스크립트는 전세계에서 가장 많이 쓰는 언어로, 비전공자도 빠르게 배울 수 있고 이해하기 쉬운 구조를 가지고 있어요. 게다가 구글, 페이팔, 아마존 등 유명 기업들도 활용하고 있다니! 더 이상의 고민이 필요한가요?

입문

JavaScript

[코드캠프] 훈훈한 Javascript

코드캠프

Similar courses

Explore other courses in the same field!

[코드캠프] 강력한 CSS

코드캠프

초급

HTML/CSS

[코드캠프] 강력한 CSS

코드캠프

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

HTML/CSS, jQuery, 웹 디자인

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

장기효(캡틴판교)

Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 Todo 앱을 만들어 보며 코드 중심의 실용적인 지식을 배우게 됩니다.

중급이상

JavaScript, Vue.js, ES6

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

장기효(캡틴판교)

실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)

J.영

실전! 웹사이트제작 Step By Step! 포메인(https://www.phomein.com/brand/main/main.do) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

초급

HTML/CSS, 인터랙티브 웹, 클론코딩

실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)

J.영

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

중급이상

HTML/CSS, JavaScript, 인터랙티브 웹

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정

두노피

svg를 이용하여 간단한 그림을 그리고 사이트에 적용시킵니다. 포트폴리오에 적용하면 돋보이는 페이지가 됩니다.

초급

HTML/CSS, JavaScript

html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정

두노피

[인프런 X 생활코딩] HTML과 인터넷

인프런

생활코딩의 첫 번째 웹 개발 강의, <WEB 1 - HTML & Internet> 리뉴얼 버전이 오직 인프런에서만 공개됩니다!

입문

HTML/CSS, JavaScript, netlify

[인프런 X 생활코딩] HTML과 인터넷

인프런

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

초급

포트폴리오, HTML/CSS, jQuery

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

입문자를 위한, ES6+ 최신 자바스크립트 입문

짐코딩

주변에서 코딩을 처음 시작하시는 분들을 많이 봤어요. 경력자 분들은 자바스크립트가 쉽다고 하지만 처음 접하시는 분들은 어렵게 느낄 수 밖에 없습니다. 그래서 이번 강의는 코딩에 입문하시는 왕초보 분들을 위해 쉽고! 알찬! 내용을 준비했습니다. 💪🙂

초급

JavaScript, ES6

입문자를 위한, ES6+ 최신 자바스크립트 입문

짐코딩

[코드캠프] 훈훈한 Javascript

코드캠프

입문

JavaScript

[코드캠프] 훈훈한 Javascript

코드캠프

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

HTML/CSS, JavaScript, ES6

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

웹디자인기능사 실기 B-3 유형 html+css

두노피

자격증 시험이 아니더라도 연습하기 좋은 예제입니다. 웹디자인 기능사 실기 B-3 유형을 천천~~히 따라해보아요

초급

HTML/CSS

웹디자인기능사 실기 B-3 유형 html+css

두노피

2024 html/css 기초탄탄 초스피드 완강코스

J.영

html/css초보 입문자를 대상으로 기초를 탄탄하게 다지며, 물론 반응형 레이아웃 제작 실전을 배울 수 있습니다.

입문

HTML/CSS, html-layout, css3

2024 html/css 기초탄탄 초스피드 완강코스

J.영

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

Figma, HTML/CSS

Figma 디자인부터 퍼블리싱까지

Michael Kwon

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

<M.B.I.T> 테스트 페이지 만들기! with Django

제주코딩베이스캠프

개발 유형을 테스트하는 웹 페이지를 만들어보세요! MBTI아닌 MBIT(My Best IT personalities)! 'MBIT 테스트 페이지'를 직접 만들어보며 웹 개발의 전반적인 프로세스를 익혀볼 수 있습니다. (Django 3.1 버전을 사용합니다.)

초급

HTML/CSS, JavaScript, Django

<M.B.I.T> 테스트 페이지 만들기! with Django

제주코딩베이스캠프

[CSS&JS Master] - Create a trendy emotional diary

What you will learn!

Project-Based Learning
Create a trendy dashboard emotion diary

✋ Wait,
Are you planning to further improve your skills?

[The Complete Front-End Bootcamp Course] is,

[CSS&JS Master] is ✨
We have a detailed curriculum

The key point of this process is ✨
We provide over 30 hours of practical lectures and assignments.

For these people
It's a perfect fit

If you follow along like taking baby steps from A to Z,
Before I knew it, I had my own diary website! 🎁

[CSS&JS Master] After taking the course
You can be a beginner like this. 💪🏻

if
Do you have any questions?

Q. Can I take the course without any knowledge?

Q. Do I need a separate textbook?

Q. Is there a program I need to install before taking the course?

Q. [CSS&Javascript Master] What lectures do you recommend after taking the course?

Team Code Camp
Introducing.

Recommended for
these people

Hello
This is

Curriculum

Reviews

codecamp's other courses

Similar courses

[CSS&JS Master] - Create a trendy emotional diary

What you will learn!

Project-Based Learning Create a trendy dashboard emotion diary

✋ Wait, Are you planning to further improve your skills?

[The Complete Front-End Bootcamp Course] is,

[CSS&JS Master] is ✨ We have a detailed curriculum

The key point of this process is ✨ We provide over 30 hours of practical lectures and assignments.

For these people It's a perfect fit

If you follow along like taking baby steps from A to Z, Before I knew it, I had my own diary website! 🎁

[CSS&JS Master] After taking the course You can be a beginner like this. 💪🏻

if Do you have any questions?

Q. Can I take the course without any knowledge?

Q. Do I need a separate textbook?

Q. Is there a program I need to install before taking the course?

Q. [CSS&Javascript Master] What lectures do you recommend after taking the course?

Team Code Camp Introducing.

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

codecamp's other courses

Similar courses

Project-Based Learning
Create a trendy dashboard emotion diary

✋ Wait,
Are you planning to further improve your skills?

[CSS&JS Master] is ✨
We have a detailed curriculum

The key point of this process is ✨
We provide over 30 hours of practical lectures and assignments.

For these people
It's a perfect fit

If you follow along like taking baby steps from A to Z,
Before I knew it, I had my own diary website! 🎁

[CSS&JS Master] After taking the course
You can be a beginner like this. 💪🏻

if
Do you have any questions?

Team Code Camp
Introducing.

Recommended for
these people

Hello
This is