Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
NEW
Programming

/

Web Development

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

11 learners are taking this course

  • nhcodingstudio
실습 중심
웹개발
프론트엔드
dom
이론 실습 모두
HTML/CSS
JavaScript
React
DOM
frontend

What you will learn!

  • You can understand the entire process of how browsers render from DOM to pixels on the screen.

  • You can understand the impact of CSS and JS loading on performance and apply optimization strategies.

  • You can improve key performance metrics by analyzing the CRP(Critical Rendering Path).

  • You can track and resolve actual rendering bottlenecks with DevTools.

  • You can quickly render thousands of data items with Virtual List.

  • Images, fonts, and iframes can be optimized with Lazy Loading.

  • You can implement exposure detection, infinite scrolling, and more using Intersection Observer.

  • You can confidently explain common interview concepts like CRP and DOMContentLoaded.

  • You can learn performance optimization principles that are also applicable to SPA frameworks.

  • You can develop the capability to fundamentally solve web performance issues.

  • You can directly handle slow UI issues that frequently occur in practice, from identifying the root causes to implementing solutions.

  • You can directly implement the browser rendering process with code to gain a deep understanding of the principles.

  • You can practice the latest CSS optimization techniques such as will-change, GPU acceleration, and more.

  • You can choose script loading strategies (async, defer, preload) based on different situations.

  • You can make the knowledge gained through performance optimization missions your own.

Group 47

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

🚀 DOM에서 픽셀까지, 브라우저 렌더링의 모든 순간을 눈으로 확인하고 최적화까지!
🖼 화면이 갑자기 흔들리고(Layout Shift)
🎨 버튼 하나만 바꿨는데 페이지 전체가 다시 칠해지고(Paint),
⚡ 애니메이션이 매끄럽지 않고 버벅이는 순간…

이런 현상은 왜 발생할까요?
그리고 브라우저는 어떤 과정을 거쳐 HTML과 CSS를 화면 픽셀로 바꾸는 걸까요?

이 강의는 바로 그 비밀, 브라우저 렌더링 파이프라인(CRP, Critical Rendering Path)을 기초부터 실무 최적화까지 완전히 파헤칩니다.

DOM, CSSOM, Render Tree, Layout, Paint, Composite이라는 렌더링의 모든 단계를 직접 코드로 구현하고, DevTools로 실시간 추적하며 눈으로 확인하는 과정 속에서, 브라우저가 화면을 만드는 원리를 체계적으로 익히게 됩니다. 단순히 “렌더링이 이렇게 일어난다”는 이론에 그치지 않고, 실제 느려진 페이지를 분석·최적화하는 실무 역량까지 기를 수 있도록 설계되었습니다.

특히 Performance 탭, Paint Flashing, FPS 모니터링 같은 시각적 진단 도구를 활용해 병목을 발견하고, CLS(Layout Shift), Recalculate Style, Composite Layers 등 구글이 중요하게 보는 성능 지표까지 학습합니다. 학습 마지막에는 수천 개의 DOM을 최적화하는 Virtual List 구현을 직접 실습하며, 프레임워크 없이도 대규모 UI를 효율적으로 다루는 능력을 갖추게 됩니다.

이 강의를 마치면 브라우저가 DOM을 어떻게 해석하고, 어느 순간 성능이 무너지는지, 그리고 이를 어떻게 개선할 수 있는지 눈으로 보고 손으로 개선할 수 있는 감각이 생깁니다. React, Vue 같은 프레임워크로 가기 전에, 그 기저에서 동작하는 CRP를 이해한다면 퍼포먼스 최적화와 디버깅은 훨씬 더 쉬워집니다.

🎯 웹 성능 최적화가 막연한 프론트엔드 개발자

코드를 줄였는데도 페이지가 느린 이유가 궁금하다면, 브라우저 내부 동작을 단계별로 추적하면서 답을 찾을 수 있습니다.

🧱 UI를 구현했지만 ‘왜 느린지’ 설명 못하는 퍼블리셔/디자이너

코드를 줄였는데도 페이지가 느린 이유가 궁금하다면, 브라우저 내부 동작을 단계별로 추적하면서 답을 찾을 수 있습니다.

🧩 대규모 DOM과 리스트를 다루는 프로젝트 경험자

Virtual List 구현을 통해 수천 개 요소도 부드럽게 다루는 구조를 직접 설계하고 최적화하는 감각을 익힙니다.

💻 실무에서 Core Web Vitals를 개선해야 하는 엔지니어

CLS, LCP 같은 구글 성능 지표와 직접 연결된 최적화 전략을 학습할 수 있습니다.

🔍 React/Vue로 넘어가기 전 브라우저 기초를 다지고 싶은 학습자

Virtual DOM이나 최적화 기법이 왜 필요한지, 그 배경이 되는 CRP의 원리를 먼저 이해할 수 있습니다.

⚡ 애니메이션이 끊기고 FPS가 떨어지는 이유를 파악하고 싶은 개발자

Performance 탭으로 프레임 단위까지 분석하며 GPU 친화적인 애니메이션을 설계하는 방법을 배우게 됩니다.

📱 모바일 환경 성능 저하에 고민하는 개발자

저사양 디바이스에서 발생하는 레이아웃 셰프트, 스크롤 버벅임, 입력 지연 문제를 DevTools와 최적화 기법으로 해결하고 싶은 분들께 적합합니다.

🌐 검색 노출과 SEO 성능까지 함께 고려하는 기획자/개발자

Core Web Vitals 점수가 검색 랭킹에 미치는 영향을 이해하고, CLS/LCP/FID 최적화를 통해 사용자 경험과 검색 성능을 동시에 강화할 수 있습니다.

📌 이 강의의 특징

  1. 100% 시각적 학습
    브라우저 렌더링 파이프라인을 코드와 DevTools로 직접 눈으로 확인합니다.

  2. 이론과 실습의 균형 잡힌 학습
    핵심 개념은 명확히 설명하고, 곧바로 실습 코드와 DevTools 분석으로 검증하며 균형감 있게 학습합니다.

  3. 실무형 미션 훈련
    CLS 최적화, 대시보드 렌더링 진단, 장바구니/결제 페이지 최적화 등 현업 문제를 그대로 재현한 프로젝트 미션을 해결합니다.

  4. 웹 핵심 성능 지표 완전 정복
    CLS, LCP, FCP 같은 Core Web Vitals를 직접 측정하고 개선하는 실습으로, 검색 노출과 UX 모두 강화할 수 있습니다.

  5. 렌더링 성능 분석 능력 강화
    Paint Flashing, FPS 모니터링, Layers 시각화 등 DevTools 성능 도구를 자유롭게 다루게 됩니다.

  6. 성능 최적화 전략 체득
    불필요한 Layout/Paint 최소화, GPU 합성 활용, Critical CSS 분리, async/defer 로딩까지 체계적으로 훈련합니다.

  7. 프레임워크 이전 필수 지식
    React/Vue 같은 라이브러리의 성능 최적화를 이해하기 위해 반드시 알아야 하는 CRP의 내부 메커니즘을 깊이 다룹니다.

  8. 실전 UX 개선 경험
    안정적인 레이아웃, 빠른 첫 렌더링(LCP 개선), 60fps 애니메이션 유지 같은 실제 UX 지표 개선을 직접 경험합니다.

  9. 현업과 직결된 프로젝트 감각
    단순 코드 연습을 넘어, 서비스 운영 환경에서 발생하는 성능 병목을 진단·해결할 수 있는 실무 감각을 키웁니다.

🎯 이런 내용을 배워요

01

🧱 렌더링 파이프라인 직접 구현

HTML·CSS가 DOM/CSSOM → Render Tree → Layout → Paint → Composite으로 이어지는 과정을 코드로 시뮬레이션합니다.

04

🔍 DevTools로 DOM & CSSOM 분석

Elements / Computed 탭에서 DOM 구조와 최종 스타일, Box Model 계산을 눈으로 확인합니다.

47

📈 Performance 탭으로 CRP 추적

Recalculate Style → Layout → Paint → Composite 실행 흐름과 Layerize·Commit 과정을 타임라인에서 확인합니다.

25

📐 Layout Shift & CLS 최적화

예상치 못한 화면 흔들림을 실험하고, CLS 점수를 측정·개선하는 방법을 배웁니다.

05

🎨 Paint Flashing & Layers 시각화

반복 페인트되는 요소를 식별하고, GPU 레이어 분리를 3D로 분석합니다.

21

⚡ FPS & 프레임 성능 분석

FPS와 프레임 타임을 측정해 애니메이션 병목 구간을 찾아 최적화합니다.

59 (1)

🛠 실무형 성능 최적화

예약·결제·대시보드 등 사례로 CLS 개선, Lazy Loading, Virtual List, Infinite Scroll 기법을 실습합니다.

32

🚀 렌더링 차단 요소 개선

Critical CSS 추출, JS async/defer, preload·preconnect·prefetch로 LCP/FCP를 앞당깁니다.

37

📂 브라우저 생명주기 활용

DOMContentLoaded, load, beforeunload 이벤트 타이밍을 이해하고 UX 보호·세션 로깅을 최적화합니다.

34

🧩 전체 CRP 최적화 전략 종합

DOM에서 픽셀까지 이어지는 전체 렌더링 플로우를 관통하며, 성능 지표와 최적화 패턴을 종합 정리합니다.

🧩 이런 실무형 미션을 다룹니다

이번 [DOM 완전 정복 Part 3] 강의에서는 단순한 코드 예제가 아니라, 실제 서비스 개발에서 마주치는 문제 상황을 그대로 가져온 실무형 미션을 해결해가며 학습합니다.

✅ Mission #1 – 제목 스타일 교정 미션
실습 목표: 디자이너 시안과 어긋난 UI 문제를 추적하고 수정하는 능력을 기릅니다.
내용 요약: DevTools Elements/Styles 패널을 이용해 제목의 잘못된 CSS 속성을 분석하고, 시안과 동일한 결과물이 나오도록 스타일을 교정합니다.

🎨 Mission #2 – 프로모션 가격표 리디자인 미션
실습 목표: 산만한 레이아웃 문제를 분석하고 UI를 개선합니다.
내용 요약: DevTools로 불필요한 스타일 충돌을 추적한 뒤, 코드 리팩터링을 통해 가격표 섹션을 깔끔하게 정리하고 시각적 계층 구조를 개선합니다.

📏 Mission #3 – CLS 최적화 미션
실습 목표: 레이아웃 셰프트 문제를 수치로 측정하고 안정적인 UI를 구현합니다.
내용 요약: Performance 탭에서 Layout Shift 이벤트를 추적하고 CLS 점수를 계산한 뒤, 이미지 크기 지정·폰트 로딩 전략 등을 적용해 흔들림 없는 페이지를 완성합니다.

📊 Mission #4 – 대시보드 렌더링 병목 진단 미션
실습 목표: KPI 카드·표·미니차트가 많은 대시보드 성능을 점검합니다.
내용 요약: Paint Flashing과 Layers 탭을 활용해 잦은 리렌더링 구간을 찾아내고, GPU 합성(transform/opacity) 기반 최적화로 프레임 안정성을 확보합니다.

🧾 Mission #5 – 예약/영수증 UX 최적화 미션
실습 목표: 실제 예약 및 결제 영수증 시나리오를 최적화합니다.
내용 요약: 최적화 전후를 Performance 탭으로 비교하고, 불필요한 Recalculate Style과 Paint를 줄여 예약/결제 플로우가 매끄럽게 작동하도록 개선합니다.

🛒 Mission #6 – 장바구니 & 결제 페이지 성능 개선 미션
실습 목표: 이커머스 핵심 플로우에서 안정적인 성능을 유지합니다.
내용 요약: 장바구니 상품 추가/삭제 시 Layout 비용을 최소화하고, 결제 단계에서 리소스 로딩을 최적화해 사용자 경험을 끊김 없이 유지합니다.

⚙ Mission #7 – 브라우저 생명주기 관리 미션
실습 목표: 브라우저 초기화와 세션 로깅을 올바르게 제어합니다.
내용 요약: DOMContentLoaded, load, beforeunload 등 이벤트 타이밍을 분석하고, UX 데이터 보호 및 로그 안정성을 보장하는 구조를 설계합니다.

🎯 Mission #8 – Critical CSS 최적화 미션
실습 목표: 초기 렌더링을 차단하는 CSS 문제를 해결합니다.
내용 요약: 핵심 Above-the-Fold 영역만 Critical CSS로 남기고, 나머지는 지연 로딩 방식으로 분리하여 페이지 로딩 속도를 크게 개선합니다.

⚡ Mission #9 – JS async/defer 최적화 미션
실습 목표: 렌더링을 차단하는 스크립트를 최적화합니다.
내용 요약: script 태그의 실행 시점을 async, defer 속성으로 조정해 블로킹 없이 페이지가 빠르게 렌더링되도록 개선합니다.

🚀 Mission #10 – Preload & Prefetch 전략 미션
실습 목표: LCP를 앞당기고 초기 체감 속도를 높입니다.
내용 요약: preload, preconnect, prefetch를 활용해 핵심 이미지·폰트·리소스를 먼저 불러와 성능을 극대화합니다.

🎬 Mission #11 – 미디어 랜딩 페이지 최적화 미션
실습 목표: 대규모 이미지·영상이 많은 페이지의 초기 성능을 개선합니다.
내용 요약: Video 지연 로드, 이미지 Lazy Loading을 적용해 LCP/FCP를 단축하고 체감 성능을 향상시킵니다.

📱 Mission #12 – 신상품 피드 성능 최적화 미션
실습 목표: 대규모 데이터 피드에서도 성능을 유지합니다.
내용 요약: Virtual List와 Infinite Scroll을 구현하고, 미디어/스크립트 Lazy Loading을 결합해 빠른 UX를 제공합니다.

수강 전 참고 사항

선수 지식 및 유의사항

  • HTML/CSS 기본 구조와 자바스크립트 기초 문법을 알고 계시면 원활하게 따라오실 수 있습니다.

  • 특히 addEventListener, if/else, forEach, 객체 접근 방식 정도는 알고 있는 것이 좋습니다.

  • Mac/Windows 환경 모두 수강 가능하며, 별도의 설치 없이 웹 브라우저만 있으면 실습할 수 있습니다.

  • 최신 크롬 브라우저 사용을 권장합니다.

  • (선택) Part 1: [DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것


  • (선택) Part 2: [DOM 완전 정복 Part 2] – 이벤트부터 SPA까지, 상호작용 웹의 필수 엔진


Recommended for
these people

Who is this course right for?

  • Frontend beginners who want to create fast websites

  • Startup developer who wants to reduce user churn due to slow pages

  • A job seeker who wants to add a "performance optimization project" to their portfolio

  • A designer and developer who is worried about slow loading speeds due to images, fonts, and videos

  • Developers who have experienced performance degradation due to large lists in frameworks like React and Vue

  • JavaScript learners who were confused by attributes like "async, defer"

  • Web publishers who need to improve Core Web Vitals scores in actual services

  • Developers who have tried performance analysis with developer tools but felt overwhelmed about where to make improvements

  • Frontend junior interested in scroll and rendering optimization in SPA-based projects

  • A passionate learner who wants to dig deep into the question "Why is my web slow?" until the very end

Need to know before starting?

  • Basic Understanding of HTML/CSS Fundamental Tags and DOM Structure

  • JavaScript Basic Syntax

  • querySelector and DOM element selection/manipulation experience

  • (Optional) [Complete DOM Mastery Part 1] – Everything About Structure Navigation and Manipulation

  • (Optional) [DOM Complete Mastery Part 2] – From Events to SPA, Essential Engine for Interactive Web

Hello
This is

147

Learners

6

Reviews

4.3

Rating

9

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."

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.

Curriculum

All

42 lectures ∙ (2hr 15min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$537,280.00

35%

$30.80

nhcodingstudio's other courses

Check out other courses by the instructor!

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]강의 썸네일

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]

nhcodingstudio

Khóa học này không chỉ dừng lại ở thao tác DOM đơn thuần, mà còn đi sâu vào việc tìm hiểu cách cấu trúc và phản ứng động với giao diện người dùng web trong tương tác thực tế với người dùng. Bản chất của hệ thống sự kiện, bubbling và capturing, ủy quyền sự kiện, phản hồi UX theo thời gian thực, và tối ưu hóa hiệu suất bằng cách sử dụng throttle & debounce, đã được cấu trúc để bạn có thể tự mình triển khai và nắm vững các vấn đề thường gặp trong thực tế. Dựa trên sự hiểu biết về cấu trúc của cây DOM, bạn sẽ phát triển khả năng liên kết linh hoạt luồng sự kiện và thay đổi trạng thái.

초급

초급

HTML/CSS, JavaScript, React

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]강의 썸네일

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]

nhcodingstudio

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]

nhcodingstudio

Dù bạn có học React, Next.js, Vue đến đâu, nếu bạn cảm thấy mã code trừu tượng và cấu trúc không được hiểu rõ ràng, nguyên nhân cốt lõi có thể là do thiếu hiểu biết về DOM. DOM là nền tảng của mọi framework frontend, là thực thể kết nối cấu trúc và hoạt động của một trang web. Khóa học này không chỉ dừng lại ở các bộ chọn hay phương pháp thao tác đơn giản, mà còn từ đầu, từng bước một, chỉ ra cách HTML được biến đổi thành đối tượng DOM, cách cấu trúc này có thể được chọn, duyệt qua và thao tác. Đây là khóa học nhập môn Phần 1 của loạt bài chinh phục DOM hoàn toàn. Các thẻ HTML chỉ là cấu trúc, và JavaScript chỉ là hành vi, nhưng DOM là yếu tố cốt lõi kết nối cả hai. Nếu bạn hiểu rõ ràng mối liên kết này, bạn sẽ có thể nhìn thấu cấu trúc và luồng thực sự bên trong bất kỳ framework nào mà bạn sử dụng.

입문

입문

HTML/CSS, JavaScript, React

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]

nhcodingstudio

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]강의 썸네일

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]

nhcodingstudio

Nhập môn Express.js mượt mà như dòng chảy, từ cơ bản đến thực chiến! Hành trình backend, tự tay xây dựng từ khái niệm cơ bản về server đến hoàn thành dự án CRUD, học hỏi một cách bài bản.

초급

초급

express.js, Node.js, routing

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]강의 썸네일

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]

nhcodingstudio

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]강의 썸네일

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]

nhcodingstudio

📌 Khóa học này là chương trình giảng dạy bắt đầu với dự án AI cờ caro chiến lược và hoàn thành các khái niệm cốt lõi của lập trình hướng đối tượng bằng các ví dụ thực tế. Thông qua việc hiện thực hóa trò chơi, bạn sẽ rèn luyện tư duy chiến lược AI và thiết kế logic, sau đó trực tiếp trải nghiệm các kỹ thuật thiết kế OOP như thừa kế, kết hợp, ủy quyền, đóng gói qua mã code. Khóa học được khuyến nghị cho những ai muốn phát triển thành một 'nhà phát triển biết thiết kế' vượt qua ngữ pháp thông thường thông qua các dự án thực tế.

초급

초급

JavaScript, HTML/CSS, oop

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]강의 썸네일

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]

nhcodingstudio

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]강의 썸네일

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]

nhcodingstudio

Đây là khóa học giúp bạn làm chủ một cách hệ thống các kỹ thuật CSS trung cấp trở lên như "CSS Position, Transition, Transform, Animation, Flexbox, Grid, Thiết kế web đáp ứng (Responsive Web)" và học các kỹ năng có thể áp dụng ngay vào thực tế thông qua các dự án thực hành đa dạng.

초급

초급

HTML/CSS

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]강의 썸네일

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]

nhcodingstudio

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js강의 썸네일

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js

nhcodingstudio

Đây là khóa học không chỉ dừng lại ở việc sử dụng Express.js mà còn giúp bạn nắm vững nguyên lý hoạt động thực sự của server bằng cách tự tay triển khai toàn bộ engine nội bộ của nó từ đầu đến cuối. Khóa học mang đến trải nghiệm trở thành nhà phát triển server thông qua việc tự mình xây dựng từ đầu mọi thành phần của Express như router, middleware, đối tượng yêu cầu-phản hồi, xử lý tệp tĩnh và hiển thị template.

초급

초급

JavaScript, Node.js, Express

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js강의 썸네일

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js

nhcodingstudio

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]강의 썸네일

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]

nhcodingstudio

Thông qua khóa học này, học viên sẽ được học rộng rãi các khái niệm cơ bản và nâng cao của JavaScript, từ thiết lập môi trường phát triển đến biến, câu lệnh điều kiện, hàm, đối tượng, mảng, v.v. Thông qua thực hành và bài kiểm tra, học viên có thể ôn tập kỹ lưỡng và trang bị khả năng giải quyết vấn đề, có thể áp dụng ngay vào thực tế phát triển web và di động.

입문

입문

JavaScript, HTML/CSS, Web Application

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]강의 썸네일

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]

nhcodingstudio

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]강의 썸네일

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]

nhcodingstudio

Khóa học “Học HTML + CSS đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1” là quá trình giúp bạn hiểu sâu sắc nguyên lý hoạt động của Internet và Web, đồng thời nắm vững kiến thức cơ bản về HTML/CSS thông qua chương trình học tập trung vào thực hành. Chỉ cần tham gia khóa học này, bạn sẽ nắm chắc các khái niệm thiết yếu của phát triển web và có thể áp dụng ngay vào dự án.

입문

입문

HTML/CSS

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]강의 썸네일

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]

nhcodingstudio

Similar courses

Explore other courses in the same field!

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]강의 썸네일

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]

nhcodingstudio

Khóa học này không chỉ dừng lại ở thao tác DOM đơn thuần, mà còn đi sâu vào việc tìm hiểu cách cấu trúc và phản ứng động với giao diện người dùng web trong tương tác thực tế với người dùng. Bản chất của hệ thống sự kiện, bubbling và capturing, ủy quyền sự kiện, phản hồi UX theo thời gian thực, và tối ưu hóa hiệu suất bằng cách sử dụng throttle & debounce, đã được cấu trúc để bạn có thể tự mình triển khai và nắm vững các vấn đề thường gặp trong thực tế. Dựa trên sự hiểu biết về cấu trúc của cây DOM, bạn sẽ phát triển khả năng liên kết linh hoạt luồng sự kiện và thay đổi trạng thái.

초급

초급

HTML/CSS, JavaScript, React

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]강의 썸네일

Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác - [Chinh phục hoàn toàn DOM Part 2]

nhcodingstudio

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]

nhcodingstudio

Dù bạn có học React, Next.js, Vue đến đâu, nếu bạn cảm thấy mã code trừu tượng và cấu trúc không được hiểu rõ ràng, nguyên nhân cốt lõi có thể là do thiếu hiểu biết về DOM. DOM là nền tảng của mọi framework frontend, là thực thể kết nối cấu trúc và hoạt động của một trang web. Khóa học này không chỉ dừng lại ở các bộ chọn hay phương pháp thao tác đơn giản, mà còn từ đầu, từng bước một, chỉ ra cách HTML được biến đổi thành đối tượng DOM, cách cấu trúc này có thể được chọn, duyệt qua và thao tác. Đây là khóa học nhập môn Phần 1 của loạt bài chinh phục DOM hoàn toàn. Các thẻ HTML chỉ là cấu trúc, và JavaScript chỉ là hành vi, nhưng DOM là yếu tố cốt lõi kết nối cả hai. Nếu bạn hiểu rõ ràng mối liên kết này, bạn sẽ có thể nhìn thấu cấu trúc và luồng thực sự bên trong bất kỳ framework nào mà bạn sử dụng.

입문

입문

HTML/CSS, JavaScript, React

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]

nhcodingstudio

Bài giảng front-end dành cho back-end của lập trình viên back-end - Căn bản강의 썸네일

Bài giảng front-end dành cho back-end của lập trình viên back-end - Căn bản

foo

Chúng tôi sẽ cung cấp cho những người tìm việc đã tạo danh mục đầu tư với tư cách là nhà phát triển phụ trợ nhưng không có gì để hiển thị ngoài API, với kinh nghiệm tạo một dịch vụ web duy nhất bằng cách thêm giao diện người dùng.

초급

초급

HTML/CSS, JavaScript, Bootstrap

Bài giảng front-end dành cho back-end của lập trình viên back-end - Căn bản강의 썸네일

Bài giảng front-end dành cho back-end của lập trình viên back-end - Căn bản

foo

[Gia hạn] Tạo NodeBird SNS bằng React강의 썸네일

[Gia hạn] Tạo NodeBird SNS bằng React

zerocho

Phản ứng & Tiếp theo & Chuyển đổi & Redux Saga & Hãy tạo một dịch vụ SNS tương tự như Twitter bằng Express Stack. Cuối cùng, sau khi tối ưu hóa công cụ tìm kiếm, chúng tôi triển khai lên AWS.

중급이상

중급이상

React, Redux, Node.js

[Gia hạn] Tạo NodeBird SNS bằng React강의 썸네일

[Gia hạn] Tạo NodeBird SNS bằng React

zerocho

Sinabro JavaScript강의 썸네일

Sinabro JavaScript

eunjae

Xây dựng nền tảng kỹ năng và sự tự tin vững chắc bằng cách phát triển nhiều chủ đề khác nhau từ đầu bằng JavaScript.

중급이상

중급이상

JavaScript, vanilla-js

Sinabro JavaScript강의 썸네일

Sinabro JavaScript

eunjae

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành강의 썸네일

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành

grab

Khóa học đầy đủ nhất mà ngay cả người mới bắt đầu cũng có thể học được, bao gồm web, máy chủ, ứng dụng di động và học máy!! Nếu bạn không biết nên bắt đầu phát triển từ đâu, tôi thực sự khuyên bạn nên tham gia khóa học này. Chúng ta hãy tiến hành chỉ với Javascript!

입문

입문

JavaScript, React, Node.js

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành강의 썸네일

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành

grab

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai강의 썸네일

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai

jiwoonjeong

Đây là khóa học lập bản đồ nhà hàng đầy đủ, nơi bạn có thể tìm hiểu về front-end, back-end, cách sử dụng Kakao Map API và cách phân phối cùng lúc trong khi tạo bản đồ nhà hàng cho YouTuber yêu thích của bạn.

초급

초급

HTML/CSS, JavaScript, REST API

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai강의 썸네일

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai

jiwoonjeong

Hoàn thành JavaScript một lần: Phát triển SPA với Vanilla JavaScript강의 썸네일

Hoàn thành JavaScript một lần: Phát triển SPA với Vanilla JavaScript

hyobin

Vừa học từ ngữ pháp cơ bản đến khái niệm chuyên sâu, hãy phát triển SPA với Vanilla JavaScript🔥

초급

초급

JavaScript, SPA, DOM

Hoàn thành JavaScript một lần: Phát triển SPA với Vanilla JavaScript강의 썸네일

Hoàn thành JavaScript một lần: Phát triển SPA với Vanilla JavaScript

hyobin

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành강의 썸네일

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành

junghw

Những người có ý tưởng nhưng không biết phải phát triển ứng dụng như thế nào, Hãy cùng làm chủ việc phát triển ứng dụng bằng cách làm thử 4 dự án thực tế!

입문

입문

JavaScript, React, Node.js

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành강의 썸네일

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành

junghw

Bootcamp thực hành: Thiết kế web responsive với Bootstrap강의 썸네일

Bootcamp thực hành: Thiết kế web responsive với Bootstrap

youngcodikimssam

Trong buổi học thực hành của khóa học "Xây dựng trang web phản hồi bằng BOOTSTRAP [Ấn bản sửa đổi năm 2024]", chúng ta sẽ trực tiếp xây dựng một trang web thực tế có bố cục thay đổi theo thiết bị, sử dụng Bootstrap 4.

초급

초급

Bootstrap, Responsive Web, Web Design

Bootcamp thực hành: Thiết kế web responsive với Bootstrap강의 썸네일

Bootcamp thực hành: Thiết kế web responsive với Bootstrap

youngcodikimssam

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp강의 썸네일

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

youngcodikimssam

Đây là buổi học thực hành của khóa học tạo trang web responsive có thể triển khai nhiều layout khác nhau cho từng thiết bị chỉ bằng html/css/js thuần túy mà không cần sử dụng BOOTSTRAP (phiên bản mới nhất năm 2024).

초급

초급

HTML/CSS, Responsive Web, Interactive Web

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp강의 썸네일

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

youngcodikimssam

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.3강의 썸네일

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.3

usefulit

Khóa học này được thiết kế để học ngôn ngữ lập trình JavaScript cùng với ngữ pháp ES6 mới nhất.

중급이상

중급이상

JavaScript, ES6

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.3강의 썸네일

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.3

usefulit

Mã hóa bản sao Instagram đáp ứng cho thiết bị di động, máy tính bảng và PC강의 썸네일

Mã hóa bản sao Instagram đáp ứng cho thiết bị di động, máy tính bảng và PC

jeong4726

Thông qua khóa học này, sinh viên sẽ có thể tạo một dịch vụ web tương tự như Instagram bằng cách sử dụng HTML, CSS và JS. (Chỉ triển khai front-end! Việc xây dựng máy chủ back-end sẽ được quay trong bài giảng sau.)

초급

초급

HTML/CSS, JavaScript, Clone Coding

Mã hóa bản sao Instagram đáp ứng cho thiết bị di động, máy tính bảng và PC강의 썸네일

Mã hóa bản sao Instagram đáp ứng cho thiết bị di động, máy tính bảng và PC

jeong4726

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer강의 썸네일

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer

codecamp

No Code, Only Prompt Hãy bỏ qua những dịch vụ đơn giản có thể tạo ra bằng vibe coding trong 10 phút! Bạn có thể học vibe coding ứng dụng thực tế 'thật sự' để tạo ra dịch vụ tinh vi ở mức độ dịch vụ thực tế theo kế hoạch và thiết kế bằng Cursor AI NCOP.

입문

입문

React, Next.js, cursor

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer강의 썸네일

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer

codecamp

Tìm hiểu web tương tác bằng cách tạo trò chơi trên web! JAVASCRIPT

ggangcoding162118

Một lớp học nơi bạn có thể tạo trò chơi web và học các kỹ năng phát triển web front-end! Chúng tôi đã tạo một lớp về cách tạo trò chơi bằng JavaScript, CSS và HTML bằng ý tưởng của riêng mình!

초급

초급

Interactive Web, JavaScript, HTML/CSS

Tìm hiểu web tương tác bằng cách tạo trò chơi trên web! JAVASCRIPT

ggangcoding162118

Học khái niệm phát triển web từ zero base và vibe coding강의 썸네일

Học khái niệm phát triển web từ zero base và vibe coding

jeyong

Thời đại của thực thi và kiểm chứng nhanh, hãy hành động nhanh hơn bất cứ ai với 바이브 코딩! Tự tay làm chủ việc kiếm tiền từ quảng cáo, thanh toán, v.v.

입문

입문

React, Web Application, Next.js

Học khái niệm phát triển web từ zero base và vibe coding강의 썸네일

Học khái niệm phát triển web từ zero base và vibe coding

jeyong

[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)강의 썸네일

[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)

dakgangjung123

Đây là khóa học thực tế giúp bạn tự tay tạo ra một ứng dụng hẹn giờ bằng React, Electron, Zustand và triển khai nó trên đa nền tảng (Windows, macOS, Linux). Bắt đầu với việc phát triển web React quen thuộc, quản lý trạng thái toàn cục thông qua Zustand, và cho đến khi triển khai GUI cuối cùng, bạn có thể học được toàn bộ quy trình phát triển ứng dụng desktop!

초급

초급

React, Electron, GUI

[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)강의 썸네일

[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)

dakgangjung123

[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp강의 썸네일

[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp

codecamp

Chương trình giảng dạy này chứa đầy niềm đam mê cá nhân của Captain, một nhà phát triển phần mềm đầy đủ với 8 năm kinh nghiệm và yêu thích lập trình. Trái tim của thuyền trưởng tan chảy khi anh ấy muốn kể cho bạn mọi thứ về phần sau! Nếu bạn nghe bài giảng này, bạn sẽ nghĩ: "Họ đã nói với tôi nhiều như vậy sao?" Bạn sẽ không thể thoát khỏi suy nghĩ đó. Chúng ta hãy bắt đầu bằng bài giảng này, bài giảng này sẽ giải đáp và cung cấp cho chúng ta những phần mà mọi người đều thấy khó hiểu?

입문

입문

NestJS, Node.js, JavaScript

[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp강의 썸네일

[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp

codecamp

Hoàn thiện tổng hợp thực hành đánh giá quá trình Kỹ sư ngành Xử lý thông tin học qua giải bài강의 썸네일

Hoàn thiện tổng hợp thực hành đánh giá quá trình Kỹ sư ngành Xử lý thông tin học qua giải bài

yeseong0412

Học thông qua thực hành 정보처리산업기사 Để đậu kỳ thi thực hành dạng đánh giá quá trình của 정보처리산업기사, chúng tôi đã chuẩn bị mọi thứ.

입문

입문

HTML/CSS, Java, SQL

Hoàn thiện tổng hợp thực hành đánh giá quá trình Kỹ sư ngành Xử lý thông tin học qua giải bài강의 썸네일

Hoàn thiện tổng hợp thực hành đánh giá quá trình Kỹ sư ngành Xử lý thông tin học qua giải bài

yeseong0412

[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS Core강의 썸네일

[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS Core

codefactory

JavaScript, TypeScript Tiếp theo là phát triển backend! Bạn sẽ có thể phát triển backend API REST bằng NestJS, phát triển và triển khai Socket IO.

초급

초급

NestJS, REST API, backend

[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS Core강의 썸네일

[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS Core

codefactory