Software Engineering Roadmap

Learn how to build, test, deploy, and maintain robust software systems.

Overall Progress0%

Web Fundamentals

Explanation

Every website is built from three core technologies: HTML gives a page structure and meaning, CSS controls how it looks, and JavaScript makes it interactive. Understanding these three — and how they come together in the browser — is the foundation for everything else in frontend development. This lesson covers how a webpage loads, how to write semantic and accessible HTML, how CSS layout works with the box model, Flexbox, and Grid, how to make a page responsive, and how the DOM and events let JavaScript respond to the user. You do not need a framework yet. Everything here works with plain HTML, CSS, and JavaScript, and it is exactly the knowledge that makes learning a framework later much easier.

How a Webpage Loads

URL

↓

DNS lookup

↓

Connection

↓

HTTP request

↓

Server

↓

HTTP response (HTML)

↓

Browser fetches CSS/JS

↓

Browser renders

HTML and Semantic Structure

HTML describes the structure of a document using elements. Semantic elements describe meaning, not just appearance, which helps accessibility and search engines.

Element	Purpose
<header> / <footer>	Top and bottom of a page or section
<nav>	Navigation links
<main>	The primary content
<section> / <article>	Thematic groupings

Accessibility Basics

Use semantic elements instead of generic <div> everywhere.
Add alt text to images.
Label form inputs so screen readers can describe them.

CSS and the Cascade

CSS styles elements using selectors, properties, and values. The "cascade" decides which rule wins when several match, using specificity and source order.

The Box Model

Content

Padding (inside)

Border

Margin (outside)

Every element is a box. Content is surrounded by padding, a border, and margin. Understanding this is the key to controlling spacing and size.

Flexbox vs Grid

	Flexbox	CSS Grid
Axis	One-dimensional (row or column)	Two-dimensional (rows and columns)
Best for	Laying out items along one line	Full page layouts

Responsive Design

Use the viewport meta tag so mobile browsers scale correctly.
Use relative units and flexible layouts rather than fixed widths.
Use media queries to adjust styles at breakpoints.
Design mobile-first, then enhance for larger screens.

The DOM

HTML document

↓

Browser builds the DOM

↓

JavaScript reads and updates it

The Document Object Model (DOM) is the in-memory tree of a page. JavaScript selects elements and changes their content or style by manipulating the DOM.

Events

click: the user clicks an element.
input: the user types in a field.
submit: a form is submitted.
keydown: a key is pressed.

Forms

Forms collect user input. Each input should have a label, and a submit event lets you validate and process the data. Basic validation can happen in the browser before the data is sent anywhere.

Browser Developer Tools

Elements: inspect and edit the DOM and styles.
Console: run JavaScript and read errors.
Network: watch requests and responses.
Device toolbar: preview responsive layouts.

Common Mistakes

Using <div> for everything instead of semantic elements.
Fixing widths in pixels and breaking mobile layouts.
Forgetting labels on form inputs.
Trying to make one giant stylesheet instead of a clear structure.

Syntax

A small HTML + CSS + JS examplehtml

1<!doctype html>2<html>3  <head><style>4    .card { border: 1px solid #ccc; padding: 16px; }5  </style></head>6  <body>7    <main>8      <article class="card">9        <h1>Hello</h1>10        <button id="btn">Click me</button>11      </article>12    </main>13    <script>14      document.getElementById("btn")15        .addEventListener("click", () => alert("clicked"));16    </script>17  </body>18</html>

This shows the three layers together: HTML structure, CSS styling, and JS interactivity.

Examples

Flexbox row

Lay items out horizontally with equal space between them.

css

1.row { display: flex; justify-content: space-between; }

Output

(items are spread across the row)

Media query

Switch the layout at a mobile breakpoint.

css

1@media (max-width: 600px) {2  .row { flex-direction: column; }3}

Output

(items stack vertically on small screens)

Key Takeaways

HTML gives structure and meaning; CSS controls appearance; JavaScript adds interactivity.
Semantic HTML improves accessibility and search.
The box model is content, padding, border, and margin.
Flexbox is one-dimensional; Grid is two-dimensional.
Responsive design uses flexible layouts and media queries.
The DOM is the tree JavaScript reads and updates; events trigger code.

← PreviousVersion Control (Git)Next →Frontend Frameworks