Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
NEW
개발 · 프로그래밍

/

웹 개발

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

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

11명 이 수강하고 있어요.

  • nhcodingstudio
실습 중심
웹개발
프론트엔드
dom
이론 실습 모두
HTML/CSSJavaScriptReactDOMfrontend

이런 걸 배울 수 있어요

  • 브라우저가 DOM에서 픽셀까지 화면을 그리는 전 과정을 이해할 수 있습니다.

  • CSS와 JS 로딩이 성능에 미치는 영향을 알고 최적화 전략을 적용할 수 있습니다.

  • CRP(Critical Rendering Path)를 분석해 핵심 성능 지표를 개선할 수 있습니다.

  • DevTools로 실제 렌더링 병목을 추적하고 해결할 수 있습니다.

  • 수천 개의 데이터를 Virtual List로 빠르게 렌더링할 수 있습니다.

  • 이미지·폰트·iframe을 Lazy Loading으로 최적화할 수 있습니다.

  • Intersection Observer로 노출 감지, 무한 스크롤 등을 구현할 수 있습니다.

  • CRP, DOMContentLoaded 같은 면접 단골 개념을 자신 있게 설명할 수 있습니다.

  • SPA 프레임워크에도 적용 가능한 성능 최적화 원리를 배울 수 있습니다.

  • 웹 성능 문제를 근본적으로 해결하는 역량을 기를 수 있습니다.

  • 실무에서 자주 발생하는 느린 UI 문제를 원인부터 해결까지 직접 다룰 수 있습니다.

  • 브라우저 렌더링 과정을 코드로 직접 구현해 원리를 체득할 수 있습니다.

  • will-change, GPU 가속 등 최신 CSS 최적화 기법을 실습할 수 있습니다.

  • 스크립트 로딩 전략(async, defer, preload)을 상황별로 선택할 수 있습니다.

  • 성능 최적화 미션을 통해 배운 내용을 자기 것으로 만들 수 있습니다.

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까지, 상호작용 웹의 필수 엔진


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 빠른 웹사이트를 만들고 싶은 프론트엔드 입문자

  • 느린 페이지 때문에 사용자 이탈을 줄이고 싶은 스타트업 개발자

  • 포트폴리오에 “성능 최적화 프로젝트”를 추가하고 싶은 취업 준비생

  • 이미지, 폰트, 영상 때문에 로딩 속도가 느려 고민인 디자이너 겸 개발자

  • React, Vue 같은 프레임워크에서 리스트가 많아 성능이 떨어져 본 적 있는 개발자

  • “async, defer” 같은 속성이 헷갈렸던 자바스크립트 학습자

  • 실제 서비스에서 Core Web Vitals 점수를 개선해야 하는 웹 퍼블리셔

  • 개발자 도구로 성능 분석은 해봤지만 어디를 고쳐야 할지 막막했던 분

  • SPA 기반 프로젝트에서 스크롤, 렌더링 최적화에 관심 있는 프론트엔드 주니어

  • “왜 내 웹은 느릴까?”라는 의문을 끝까지 파고들고 싶은 열정적인 학습자

선수 지식,
필요할까요?

  • HTML/CSS 기초 태그와 DOM 구조에 대한 기본 이해

  • JavaScript 기본 문법

  • querySelector 및 DOM 요소 선택/조작 경험

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

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

안녕하세요
입니다.

147

명

수강생

6

개

수강평

4.3

점

강의 평점

9

개

강의

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

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, 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.

커리큘럼

전체

42개 ∙ (2시간 15분)

해당 강의에서 제공:

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

수강평

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

얼리버드 할인 중

월 ₩107,456

5개월 할부 시

35%

₩39,600

₩537,280

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]Course Thumbnail

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.

Basic

Basic

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]Course Thumbnail

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

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]Course Thumbnail

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.

Basic

Basic

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]Course Thumbnail

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

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]Course Thumbnail

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

Basic

Basic

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]Course Thumbnail

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

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]Course Thumbnail

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.

Beginner

Beginner

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]Course Thumbnail

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

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]Course Thumbnail

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.

Basic

Basic

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]Course Thumbnail

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.jsCourse Thumbnail

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.

Basic

Basic

JavaScript, Node.js, Express

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

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]Course Thumbnail

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.

Beginner

Beginner

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]Course Thumbnail

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]Course Thumbnail

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.

Beginner

Beginner

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]Course Thumbnail

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

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

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]Course Thumbnail

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.

Basic

Basic

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]Course Thumbnail

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]Course Thumbnail

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.

Beginner

Beginner

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]Course Thumbnail

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ự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khaiCourse Thumbnail

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.

Basic

Basic

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 khaiCourse Thumbnail

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

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]Course Thumbnail

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

Basic

Basic

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]Course Thumbnail

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

Bắt đầu với Flutter cơ bản đến thực chiến [Fullstack Part4] (Dễ hiểu và vững chắc từng bước với đa dạng dự án)Course Thumbnail

Bắt đầu với Flutter cơ bản đến thực chiến [Fullstack Part4] (Dễ hiểu và vững chắc từng bước với đa dạng dự án)

funcoding

Khóa học này là một khóa học có tính hoàn thiện cao, giúp bạn làm chủ Flutter từng bước, từ kiến thức cơ bản về lập trình Dart, các tính năng cơ bản và trung cấp của Flutter, thậm chí liên kết với Firebase (là backend), cho đến dự án thực tế!

Basic

Basic

Flutter, Firebase, firestore

Bắt đầu với Flutter cơ bản đến thực chiến [Fullstack Part4] (Dễ hiểu và vững chắc từng bước với đa dạng dự án)Course Thumbnail

Bắt đầu với Flutter cơ bản đến thực chiến [Fullstack Part4] (Dễ hiểu và vững chắc từng bước với đa dạng dự án)

funcoding

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 3Course Thumbnail

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 3

usefulit

React là một thư viện JavaScript mã nguồn mở được tạo bởi Facebook. Bạn có thể tạo giao diện người dùng dựa trên thành phần bằng JavaScript. Tìm hiểu tất cả các thành phần cần thiết để phát triển web bằng React, hiện là thư viện phát triển giao diện người dùng phổ biến nhất được tối ưu hóa để tạo Ứng dụng Trang Đơn (SPA). Trong Phần 3, chúng ta sẽ tạo một ứng dụng web xử lý cơ sở dữ liệu hoàn chỉnh.

Basic

Basic

React

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 3Course Thumbnail

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 3

usefulit

<M.B.I.T> Tạo trang thử nghiệm! với DjangoCourse Thumbnail

<M.B.I.T> Tạo trang thử nghiệm! với Django

jejucoding

Tạo một trang web kiểm tra kiểu phát triển của bạn! MBIT (Nhân vật CNTT xuất sắc nhất của tôi), không phải MBTI! Bạn có thể tìm hiểu toàn bộ quá trình phát triển web bằng cách tạo trang thử nghiệm MBIT của riêng mình. (Tôi sử dụng phiên bản Django 3.1.)

Basic

Basic

HTML/CSS, JavaScript, Django

<M.B.I.T> Tạo trang thử nghiệm! với DjangoCourse Thumbnail

<M.B.I.T> Tạo trang thử nghiệm! với Django

jejucoding

DOM cơ bảnCourse Thumbnail

DOM cơ bản

tonextday

Không thể nói về chương trình web mà không biết DOM. Bao quát hơn 95% thông số kỹ thuật DOM. Có thể chấm dứt DOM. Rộng, sâu và chi tiết. Không lãng phí thời gian, chi phí và công sức. Cũng bao quát cách sử dụng JavaScript và có thể phát triển ứng dụng web bằng JS thuần túy.

Basic

Basic

DOM, JavaScript, HTML/CSS

DOM cơ bảnCourse Thumbnail

DOM cơ bản

tonextday

Thật sự! Javascript - Từ cơ bản đến nâng caoCourse Thumbnail

Thật sự! Javascript - Từ cơ bản đến nâng cao

codingmax

🌟 Bắt đầu với khóa học JavaScript từ cơ bản đến nâng cao! 🌟

Beginner

Beginner

JavaScript, ES6, es5

Thật sự! Javascript - Từ cơ bản đến nâng caoCourse Thumbnail

Thật sự! Javascript - Từ cơ bản đến nâng cao

codingmax

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

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.

Intermediate

Intermediate

JavaScript, ES6

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

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

usefulit

Chinh phục hoàn toàn React RouterCourse Thumbnail

Chinh phục hoàn toàn React Router

woongjae

Hãy cùng nhau chinh phục React Router, điều cần thiết cho tất cả những ai tạo SPA bằng React 💪

Basic

Basic

react-router-dom, react-router, React

Chinh phục hoàn toàn React RouterCourse Thumbnail

Chinh phục hoàn toàn React Router

woongjae

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

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

Basic

Basic

NestJS, REST API, backend

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

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

codefactory

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngànhCourse Thumbnail

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngành

itconnect

💡 Ngay cả người không phải lập trình viên cũng có thể cùng AI từ MVP khởi nghiệp chỉ trong 10 giờ đến dịch vụ tạo doanh thu! 💰 Chi phí thuê ngoài hàng chục triệu won cần thiết cho phát triển giờ đây được giải quyết hoàn toàn chỉ với 120,000 won 🎯 Hoàn thành 5 dự án kinh doanh thực tế từ nhận diện danh thiếp, phân tích cảm xúc đến phân tích vị trí 🔥 Nếu bạn là người lập kế hoạch, marketer, người chuẩn bị khởi nghiệp thì có thể hiện thực hóa ý tưởng mà không cần lập trình viên ⚡ Bắt đầu ngay bây giờ để có được khả năng tự lập phát triển dùng cả đời!

Beginner

Beginner

HTML/CSS, Java, Web Application

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngànhCourse Thumbnail

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngành

itconnect

Tạo UX di động hiệu quả (thiết kế + mã hóa)Course Thumbnail

Tạo UX di động hiệu quả (thiết kế + mã hóa)

usefulit

Sau khi thiết kế bố cục web và ứng dụng cho nhiều thiết bị khác nhau bằng chương trình Photoshop và Adobe XD, bạn sẽ có thể học các kỹ năng viết mã đơn giản và tự mình triển khai chúng.

Basic

Basic

HTML/CSS, jQuery, XD

Tạo UX di động hiệu quả (thiết kế + mã hóa)Course Thumbnail

Tạo UX di động hiệu quả (thiết kế + mã hóa)

usefulit

Giao tiếp P2P sử dụng WebRTC mà không ai biết đếnCourse Thumbnail

Giao tiếp P2P sử dụng WebRTC mà không ai biết đến

july

Bạn có thể học cách thực hiện giao tiếp giữa webcam và peer bằng cách sử dụng WebRTC.

Beginner

Beginner

Go, webrtc, p2p

Giao tiếp P2P sử dụng WebRTC mà không ai biết đếnCourse Thumbnail

Giao tiếp P2P sử dụng WebRTC mà không ai biết đến

july

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

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

Basic

Basic

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à PCCourse Thumbnail

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

jeong4726

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

[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ế!

Beginner

Beginner

JavaScript, React, Node.js

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

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

junghw

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế webCourse Thumbnail

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web

codingworks

Kiểm tra thực hành chức năng thiết kế web được tối ưu hóa cho nội dung kiểm tra thực hành chức năng thiết kế web phù hợp chính xác với các tiêu chuẩn ra đề kiểm tra chức năng thiết kế web (2025.1.1~2025.12.31) đang được áp dụng, đây là khóa học chuyên về kiểm tra thực hành được tối ưu hóa cho nội dung kiểm tra thực hành chức năng thiết kế web. Khóa học kiểm tra thực hành chức năng thiết kế web HTML+CSS+JQUERY Publishing, Codingworks khác biệt. Đã phản ánh hoàn toàn video bài học sản xuất hoàn hảo cho loại D và loại E được thêm vào năm 2023 và video bài học sản xuất hoàn hảo cho loại F được thêm vào năm 2024.

Beginner

Beginner

HTML/CSS, jQuery, Web Design

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế webCourse Thumbnail

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web

codingworks

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

[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?

Beginner

Beginner

NestJS, Node.js, JavaScript

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

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

codecamp

Thực hành cơ bản CSS3 của Libehayan - 2024Course Thumbnail

Thực hành cơ bản CSS3 của Libehayan - 2024

rebehayan

CSS Chào mừng bạn đến với các bài giảng cơ bản về CSS dựa trên hơn 20 năm kinh nghiệm thực tế! Khóa học này được thiết kế dành cho bạn khi bạn thực hiện những bước đầu tiên để trở thành nhà xuất bản web và nhà phát triển giao diện người dùng.

Beginner

Beginner

HTML/CSS, nesting, css3

Thực hành cơ bản CSS3 của Libehayan - 2024Course Thumbnail

Thực hành cơ bản CSS3 của Libehayan - 2024

rebehayan