Here is a deeper dive into the first two modules of your mini-course,
expanded with step-by-step concepts, code blocks, and real-world context to
help you start building.
📘 Module 1: Deep Dive into HTML
HTML is all about hierarchy and semantics. Semantics means using the
correct HTML tag for the correct type of content, which helps search engines
and screen readers understand your website.
1. Essential HTML Tags Table
Here is a quick reference guide to the tags you will use most often:
Tag
Syntax What it does
Name
Creates titles and subtitles. <h1> is the
Heading <h1> to <h6>
largest.
Paragra
<p> Holds blocks of standard text.
ph
<a
Anchor Creates hyperlinks to other web pages.
href="URL">
<img
Image Displays an image (self-closing tag).
src="path" />
A generic container used to group
Division <div>
elements together.
2. Building a Semantic Web Structure
A modern webpage doesn't just use random tags; it organizes content into
clear zones:
+-------------------------------------------------------+
| <header> |
| (Logo, Navigation Links, Main Site Title) |
+-------------------------------------------------------+
| <main> |
| +-----------------------------------------------+ |
| | <article> | |
| | (The core blog post or primary content) | |
| +-----------------------------------------------+ |
| | <section> | |
| | (A specific feature, category, or project) | |
| +-----------------------------------------------+ |
+-------------------------------------------------------+
| <footer> |
| (Copyright information, privacy links, contact info) |
+-------------------------------------------------------+
3. Practice Assignment: Structure Your Bio
Create a new file named [Link] and paste the following structure to start
your project:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Developer Profile</title>
</head>
<body>
<header>
<h1>Alex Code</h1>
<p>Front-End Developer in Training</p>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I am learning front-end web development to build clean, fast,
and accessible user interfaces.</p>
</section>
<section id="links">
<h2>Connect With Me</h2>
<a href="[Link] target="_blank">GitHub Profile</a>
</section>
</main>
<footer>
<p>© 2026 Built by Alex.</p>
</footer>
</body>
</html>
🎨 Module 2: Deep Dive into CSS
Now that you have structure, you need style. CSS applies rules to your HTML
elements using selectors, properties, and values.
1. Anatomy of a CSS Rule
Selector { Property: Value; }
│ │ │
h1 tags Color Purple
2. Managing Layouts: Flexbox
The old days of aligning items on a webpage using floats are over. Modern
CSS relies heavily on Flexbox (Flexible Box Layout), which makes aligning
items side-by-side or stacking them vertically incredibly simple.
To turn any container into a layout engine, you target it with display: flex;.
flex-direction: Controls whether items line up horizontally (row) or
vertically (column).
justify-content: Aligns items along the main axis (e.g., center, space-
between).
align-items: Aligns items along the cross axis (e.g., centering items
top-to-bottom).
3. Practice Assignment: Style Your Bio Card
Create a file named [Link] in the same folder as your HTML file, and link it
in your HTML <head> using <link rel="stylesheet" href="[Link]">.
Add the following rules to bring your profile to life:
CSS
/* Reset default browser margins and set a clean font */
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
color: #333;
/* Center the layout on the screen using Flexbox */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
/* Style the header area as a distinct card profile */
header {
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
h1 {
color: #1a73e8;
margin: 0 0 10px 0;
/* Style our profile link to look like a polished button */
a{
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #1a73e8;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background 0.2s ease;
/* Smooth color shift when hovering over the button */
a:hover {
background-color: #1557b0;