Programming

Web Development

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

Name: Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]
Price: 23930 KRW

This course systematically masters intermediate to advanced CSS techniques such as "CSS Position, Transition, Transform, Animation, Flexbox, Grid, and Responsive Web Design," and equips you with skills immediately applicable in real-world projects through various hands-on practice projects.

(2.0) 1 reviews

7 learners

nhcodingstudio

html

CSS

프론트엔드

웹개발

HTML/CSS

What you will learn!

Master the creation of diverse layouts by utilizing CSS positions such as Static, Relative, Absolute, Fixed, and Sticky.
CSS Transitions & Transforms: Enhance the completeness of your webpage by implementing natural and dynamic UI effects.
CSS Animation: You can create interactive and dynamic web elements by utilizing keyframes, duration, timing-function, and more.
Flexbox & Grid: Learn how to design responsive web pages more easily and quickly using the latest layout technologies.
Responsive Design: Implement a flexible layout that doesn't break on various devices (PC, tablet, mobile) through media queries.
Various hands-on projects: Build coding experience through practical examples such as card layouts, responsive navigation bars, image galleries, dashboards, loading spinners, and more.
Layout Design & UI/UX Improvement: Develop design skills that can be immediately applied to real-world tasks or portfolios.

Why this course is special

A solid curriculum
- We will teach you the basics of CSS (position, animation, responsiveness, etc.) step by step , from the basics to the application stage , and show you how to apply them to actual projects.
Hands-on learning
- There are various mini-projects such as card layouts, loading spinners, and image zoom effects. You can learn by writing code by hand and checking the results, rather than just listening to the theory.
Aesthetics and Structure
- We will use Flexbox and Grid to create a clean and intuitive layout , and design a responsive web that supports various devices through media queries .
Portfolio Upgrade
- Through a variety of examples and projects in the course, you will be able to create results that can be used immediately in your portfolio .
- You will acquire core competencies that will enhance design quality in both personal projects and team collaborations.
Student-friendly approach
- To help those who have already learned the basics of HTML+CSS advance to the intermediate level, we will explain frequently confused concepts in detail and provide examples.
- You can quickly give and receive feedback through the Q&A board when troubleshooting.

After class…

By utilizing the Position properties, you can freely implement eye-catching layouts such as fixed banners and floating menus .
Transition & Transform lets you create sophisticated interactions such as button hover effects , image zooming , and text movement .
By learning the concept of animation , you can design dynamic web elements such as loading spinners , text typing , and card sliders .
You can easily compose complex layouts by combining Flexbox & Grid , and expand it to a responsive web to support mobile, tablet, and desktop .
Through responsive design projects, you will gain the confidence to complete clean and intuitive web pages even when developing and operating actual services.

Learn about these things.

CSS Level 2 - Position
- Understanding Relative, Absolute, Fixed, Sticky, and Z-index
- Projects : Cascade layout, V-shaped layout, Fixed layout, etc.
CSS Level 2 - Transition
- Transition Property, Duration, Timing-Function, Delay
- Project : Button hover effect, image zoom effect, etc.
CSS Level 2 - Transform
- Translate, Rotate, Scale, Skew
- Project : Rotate cards, move text, implement 3D effects
CSS Level 2 - Animation
- Keyframes, repeat count, direction, fill mode
- Projects : Loading spinner, fade in effect, text color change, card slide, etc.
CSS Level 3 - Flexbox
- Container & Items, Direction, Wrap, Justify-Content, Align-Items, etc.
- Project : Card layout, responsive navigation bar, dashboard, blog post layout
CSS Level 3 - Grid
- Grid-Template, fr units, gap, areas, auto-flow, etc.
- Projects : Responsive image gallery, dashboard, portfolio section, etc.
CSS Level 3 - Responsive Design
- Media Queries, Flexible Grid, Responsive Typography
- Project : Comprehensive Responsive Web Design Tutorial

Hello, welcome to our neighborhood coding studio !

Our Neighborhood Coding Studio is an educational group created by developers who majored in computer engineering at major universities in North America, such as Carnegie Mellon, Washington, Toronto, and Waterloo , and gained practical experience at global IT companies such as Google, Microsoft, and Meta .

It started as a study group for computer science majors from the US and Canada who wanted to study and grow together . Even though we were from different universities and in different time zones, the time we spent solving problems together and learning from each other was very special, and naturally, I had this thought.

“What if we could teach others the same way we studied?”

That question was the starting point for our neighborhood coding studio .

Currently, about 40 current developers and computer engineering college students are in charge of their respective areas of expertise, and they directly design and teach a curriculum that covers everything from introductory to practical. Beyond simply imparting knowledge, we provide an environment where you can learn from the perspective of a real developer and grow together .

“Real developers should learn from real developers.”

We systematically cover the entire process of web development from start to finish, but we do not stop at theory, but develop your skills through practice and practical feedback .
Our philosophy is to think about and guide the growth of each and every student.

Our philosophy is clear:
"True learning comes from practice, and growth is accomplished when we do it together."

From beginners just starting out in development, job seekers looking to develop practical skills, to young people exploring their career paths.
Our neighborhood coding studio aims to be everyone's starting point and a strong companion as we walk together.

Now, don't worry alone.
Our neighborhood coding studio will grow with you.

Welcome to Neighborhood Coding Studio !

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo , and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta .

It all began as a study group formed by computer science students across the US and Canada , created to grow together by sharing knowledge, solving problems, and learning from one another.
Although we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio .

Today, we are a team of around 30 active developers and computer science students , each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We're not just here to teach—we're here to help you see through the lens of real developers and grow together .

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback .
We care deeply about each learner's growth and are committed to supporting your path every step of the way.

Our philosophy is simple but powerful:
“True learning comes from doing, and true growth happens together.”

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don't have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

I recommend this to these people

Those who have already learned basic HTML+CSS grammar but want to challenge themselves with intermediate CSS skills and sophisticated animation implementation
Prospective and current developers who want to freely design space arrangement and layout by properly understanding the principles of Flexbox & Grid
Web designers and front-end aspirants who want to create responsive web that supports various devices such as PC, mobile, and tablet.
Anyone who wants to improve the design and markup quality in team projects , or have a web page design that is suitable for a portfolio .
Anyone interested in UI/UX and wanting to build a visually vibrant website

After completing the course

Skillfully apply layout arrangement and animation effects in project practice
Implementation of a responsive web that can naturally respond to various screen sizes such as PC, mobile, and tablet.
Increase portfolio competitiveness with a clean and differentiated design
Securing the ability to satisfy both design quality and code maintainability in team collaboration

Skill Tag

CSS , Animation , Flexbox , Grid , Responsive Web

Lecture level

Intermediate (easy to learn if you know basic grammar)

Recommended for
these people

Who is this course right for?

For those who have a basic understanding of HTML and CSS but want to leverage more advanced CSS features to create next-level pages.
A web development aspirant with a strong interest in web design and UI/UX, looking to build practical skills through various CSS animation and layout design techniques.
For those who felt unfamiliar and vague about Flexbox and Grid - those who want to understand it clearly through direct practice
Developers who need to support a variety of devices, including mobile, tablets, and desktops, through responsive web development.
For anyone aiming for a higher level of design quality in team projects or personal portfolios

Need to know before starting?

Familiarity with basic HTML & CSS concepts will be helpful.
Taking "Learning HTML + CSS Properly: Part 1" or an equivalent introductory course beforehand will further improve learning efficiency.

Hello
This is

147

Learners

Reviews

4.3

Rating

Courses

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

Curriculum

All

136 lectures ∙ (2hr 24min)

Course Materials:

Lecture resources

Section 1. [Our Neighborhood Coding Studio] Web Development Essential Knowledge

5 lectures ∙ (18min)

Section 2. [Our Neighborhood Coding Studio] CSS Level 2 - Position

17 lectures ∙ (15min)

6. CSS Position
01:32
7. CSS Position - Static
01:39
8. CSS Position - Relative
03:07
9. CSS Position - Absolute
02:54
10. CSS Position - Absolute Example 2 File
11. CSS Position - Fixed
01:32
12. CSS position - Sticky
01:26
13. CSS Position - Z-INDEX
03:23
14. CSS Position Project (Relative + Absolute) - Creating a Stepped Layout Starter
15. CSS Position Project (Relative + Absolute) - Creating a Stepped Layout Solution
16. CSS Position Project (Relative + Absolute) - Creating V-shaped Layout Starter
17. CSS Position Project (Relative + Absolute) - Creating a V-shaped Layout Solution
18. CSS Position Project (Relative + Absolute + Fixed) - Project Starter
00:10
19. CSS Position Project (Relative + Absolute + Fixed) - Project Solution
20. CSS Position Project (Sticky) - Project Starter
00:14
21. CSS Position Project (Sticky) - Project Answer
22. [Our Neighborhood Coding Studio] CSS Level 2: Position Summary PDF

Section 3. [Our Neighborhood Coding Studio] CSS Level 2 - Transition

6 lectures ∙ (10min)

23. CSS Transition
01:39
24. CSS Transition - Property
02:25
25. CSS Transition - Duration
01:46
26. CSS Transition - Timing-Function
02:23
27. CSS Transition - Delay
01:52
28. [Our Neighborhood Coding Studio] CSS Level 2: Transition Summary Notes PDF

Section 4. [Our Neighborhood Coding Studio] CSS Level 2 - Transform

14 lectures ∙ (6min)

Section 5. [Our Neighborhood Coding Studio] CSS Level 2 - Animation

22 lectures ∙ (12min)

Section 6. [Our Neighborhood Coding Studio] CSS Level 3 - Flexbox

27 lectures ∙ (30min)

Section 7. [Our Neighborhood Coding Studio] CSS Level 3 - Grid

38 lectures ∙ (43min)

Section 8. [Our Neighborhood Coding Studio] CSS Level 3 - Responsive Design

7 lectures ∙ (6min)

Published:

Last updated:

Reviews

All

1 reviews

2.0

1 reviews

devhoonie
Reviews 2
∙
Average Rating 3.5
2
30% enrolled
현재 강의를 섹션 4까지 수강했는데, 예제와 문제 코드가 다른 경우(예를 들어 섹션 4의 transition and transform 프로젝트: 텍스트 이동 효과의 경우 문제와 다르게 주어지는 예제 파일은 텍스트 이동 효과가 아닌 이미지 확대 효과의 Starter입니다)가 있고, 또 주어지는 Starter 코드와 정답이 아예 다른 환경처럼 느껴지는 경우가 있습니다. 또한 CSS의 여러 가지 속성들을 예제 단위로 나누어 설명한 것은 좋지만, 구성에 비해 강의 퀄리티가 떨어지는 느낌입니다. 각 섹션별 강의는 단순히 텍스트를 TTS로 읽는게 끝인데, 차라리 강사님의 목소리를 직접 들을 수 있다면 훨씬 강의에서 진심을 느낄 수 있을 것 같습니다.
- nhcodingstudio
  Instructor
  안녕하세요 devhoonie님, 소중한 수강평 정말 감사합니다. 먼저, 예제와 문제 코드 간의 불일치로 인해 혼란을 드린 점 진심으로 사과드립니다. 말씀해주신 섹션 4의 transition and transform 프로젝트처럼 실제 강의 내용과 Starter 코드가 어긋나 있는 경우, 빠르게 확인하여 일괄적으로 점검 및 수정 작업을 진행하겠습니다. 학습 흐름에 방해가 되지 않도록 가장 우선적으로 처리하겠습니다. 또한 CSS 속성별로 예제를 나눈 구성은 긍정적으로 평가해주셔서 감사드리며, 강의 전달 방식에 대한 솔직한 의견도 깊이 새기겠습니다. 현재 일부 강의에서 TTS 음성으로만 제공되는 점은 학습 몰입도에 영향을 줄 수 있다는 점에 전적으로 공감합니다. 해당 파트는 향후 순차적으로 강사 음성으로 대체할 수 있도록 내부 논의를 거쳐 업데이트를 준비하겠습니다. 더 나은 학습 경험을 드리기 위해 지속적으로 개선하겠습니다. 다시 한 번 감사드리며, 언제든 불편사항이나 제안이 있다면 말씀 부탁드립니다.
- nhcodingstudio
  Instructor
  안녕하세요, devhoonie님. 먼저 예제와 과제 내용이 일치하지 않았던 부분에 대해 다시 한 번 사과드리며, 해당 파트는 수정 완료되었습니다. 불편을 드려 진심으로 죄송합니다. 추가로 HTML, CSS 수업을 포함한 강의 내용 전반이나, 소프트웨어 개발 전반에 대한 질문, 또는 다음 프로젝트에 대한 고민 등 어떤 주제든 궁금하신 점이 있으시다면 언제든지 오픈채팅을 통해 문의해 주세요. 성심껏 답변드리겠습니다. 앞으로도 devhoonie님께 실질적인 도움이 될 수 있는 더욱 알차고 유익한 콘텐츠로 찾아뵙겠습니다. 감사합니다. 오픈채팅: https://open.kakao.com/o/gC10Fnoh

Limited time deal

$23,930.00

24%

$25.30

nhcodingstudio's other courses

Check out other courses by the instructor!

DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

nhcodingstudio

이 강의는 브라우저가 HTML을 받아 DOM을 만들고, CSSOM과 결합해 화면에 픽셀을 그려내는 Critical Rendering Path(CRP) 과정을 처음부터 끝까지 다룹니다. 단순한 DOM 조작을 넘어, CSS와 JS가 성능에 어떤 영향을 주는지, 이미지·폰트 최적화, Lazy Loading, Intersection Observer, 가상 리스트, 그리고 DevTools 실습까지 이어지며 실제 웹 성능을 눈에 띄게 개선할 수 있는 실전 전략을 배울 수 있습니다.

초급

HTML/CSS, JavaScript, React

DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

nhcodingstudio

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

초급

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

HTML/CSS, JavaScript, React

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

초급

express.js, Node.js, routing

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

초급

JavaScript, Node.js, Express

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

입문

JavaScript, HTML/CSS, 웹앱

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

입문

HTML/CSS

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

Similar courses

Explore other courses in the same field!

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

입문

HTML/CSS

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

초급

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

DOM 인터랙션

김영보

DOM은 동적 애플리케이션의 필수이며 바탕입니다. Element, Document, Window 오브젝트에서 발생하는, 발생시키는 모든 이벤트를 기본부터 활용까지 다룹니다. Web Component(Custom Element, Shadow DOM, Template)을 완전하게 배울 수 있으며 활용할 수 있습니다. 개설된 "DOM 완전 끝내기: 기본" 강좌와 더불어 DOM의 마침표를 찍을 수 있습니다.

초급

DOM, JavaScript, HTML/CSS

DOM 인터랙션

김영보

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

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

잔재미코딩 DaveLee

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

입문

HTML/CSS, JavaScript, ES6

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

잔재미코딩 DaveLee

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

이준형(Foo)

백엔드 개발자로 포트폴리오를 만들었지만 보여줄 게 API밖에 없는 취준생들에게 프론트엔드를 더해 하나의 웹 서비스로 만들 수 있는 경험을 제공해드리겠습니다.

초급

HTML/CSS, JavaScript, Bootstrap

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

이준형(Foo)

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

Self-coding

부트스트랩5 (Bootstrap5)의 클래스, 컴포넌트 등 개념을 이해하고 이를 바탕으로 응용, 변형하고 실습으로 3개의 프로젝트를 제작해봅니다.

초급

Bootstrap, HTML/CSS, JavaScript

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

Self-coding

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

💡 비개발자도 AI와 함께 단 10시간 창업 MVP부터 수익화 서비스까지! 💰 외주비 수천만원이 필요했던 개발 이제 12만원으로 완전 해결 🎯 명함인식, 감정분석, 입지분석까지 실전 비즈니스 프로젝트 5개 완주 🔥 기획자, 마케터, 예비창업자라면 개발자 없이도 아이디어 구현 ⚡ 지금 시작하면 평생 써먹을 개발 자립 능력을 획득하세요!

입문

HTML/CSS, Java, 웹앱

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

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

코딩웍스(Coding Works)

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

입문

HTML/CSS, jQuery, 웹 디자인

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

코딩웍스(Coding Works)

자바스크립트 제대로 배워볼래?

개발자의 품격

자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

초급

JavaScript, ES6, HTML/CSS

자바스크립트 제대로 배워볼래?

개발자의 품격

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

입문

클론코딩, HTML/CSS, 웹 디자인

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

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

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

초급

HTML/CSS, JavaScript, jQuery

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

나도 할 수 있다! SW강사!

제주코딩베이스캠프

SW강사를 희망하는 모두를 위한 수업으로 커리큘럼과 자료 제공, 15년차 현직 강사의 노하우와 꿀팁까지 한번에 해결할 수 있습니다.

입문

HTML/CSS, JavaScript, Python

나도 할 수 있다! SW강사!

제주코딩베이스캠프

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

HTML/CSS

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

HTML/CSS, jQuery, XD

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

What you will learn!

Take your website quality to the next level with more powerful CSS technology! 🤔

Why this course is special

I recommend this to these people

After class…

Learn about these things.

Hello, welcome to our neighborhood coding studio !

Things to note before taking the class

I recommend this to these people

Learning Materials

What if I need player knowledge?

After completing the course

Category

Skill Tag

Lecture level

Recommended for
these people

Hello
This is

Curriculum

Reviews

nhcodingstudio's other courses

Similar courses

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

What you will learn!

Take your website quality to the next level with more powerful CSS technology! 🤔

Why this course is special

I recommend this to these people

After class…

Learn about these things.

Hello, welcome to our neighborhood coding studio !

Things to note before taking the class

I recommend this to these people

Learning Materials

What if I need player knowledge?

After completing the course

Category

Skill Tag

Lecture level

Recommended for these people

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

Curriculum

Reviews

nhcodingstudio's other courses

Similar courses

Recommended for
these people

Hello
This is