> Canonical URL: https://codingcat.dev/course/odin-web-development-foundations

# The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics) | CodingCat.dev Course

🧶 CodingCat.dev Course4 Lessons[▶ Watch Course Playlist on YouTube ↗](https://youtu.be/2-97hVI32l4)[Start Course →](/course/odin-web-development-foundations/lesson/how-the-web-works-http-dns-and-devtools)

# The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)

![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics) Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/74eaf120f5a06f0275123ec155a6e15da19edb58-1280x720.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=2-97hVI32l4&list=UUnKZ8gEb78zXKMi1ns-IQ2g)

## course lessons.

1

### Core Architecture & Implementation

- [1.1How the Web Works: DNS, HTTP/3, TLS & Browser DevToolsBefore writing a single line of HTML or JavaScript, every great engineer needs to understand what actually happens when you type a URL into your browser. Let's trace DNS, TLS, HTTP/3, and the browser rendering pipeline.▶ Video + LessonStart Lesson →](/course/odin-web-development-foundations/lesson/how-the-web-works-http-dns-and-devtools)
- [1.2Semantic HTML5, Document Landmarks & the Accessibility TreeWrapping every piece of your UI in generic div tags breaks keyboard navigation, hurts SEO, and forces you to reinvent browser behavior in JavaScript. Let's master semantic HTML5 landmarks.▶ Video + LessonStart Lesson →](/course/odin-web-development-foundations/lesson/semantic-html5-dom-tree-and-accessibility)
- [1.3CSS Box Model, Cascade Specificity & the Flexbox Layout EngineIf adding padding to a card still makes it overflow its container, or you find yourself guessing between justify-content and align-items, this lesson will lock in the CSS Box Model and Flexbox forever.▶ Video + LessonStart Lesson →](/course/odin-web-development-foundations/lesson/css-box-model-cascade-and-flexbox-layout-engine)
- [1.4JavaScript Fundamentals: Functions, Array Methods & DOM Event DelegationAttaching a separate click listener to five hundred list items wastes memory and breaks as soon as you insert a new item dynamically. Let's master JavaScript fundamentals and DOM event delegation.▶ Video + LessonStart Lesson →](/course/odin-web-development-foundations/lesson/javascript-fundamentals-variables-functions-and-dom-events)

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: The Odin Project 1: Web Development Foundations …✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics): start with Core Architecture & Implementation, implement Hands-On Implementation, and ship to production.AAA Contrast Verified