0% found this document useful (0 votes)

1 views61 pages

HTML CSS Course Student Book

Uploaded by

susyboka8

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

1 views61 pages

HTML CSS Course Student Book

Uploaded by

susyboka8

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

🌐 HTML & CSS

Complete Student Course Notebook

With Notes, Code Examples & Exercises

Student Name: _____________________________

Class / Batch: _____________________________

Instructor: _____________________________

Date Started: _____________________________

Course Overview
This 18-day notebook covers everything you need to go from zero to a confident front-end developer.
Each day builds on the last, ending with hands-on exercises you complete directly in this workbook.

DAY 1 Introduction to the Web & HTML Basics

DAY 2 HTML Text Elements & Semantics

DAY 3 HTML Links, Images & Media

DAY 4 HTML Lists, Tables & Forms

DAY 5 Introduction to CSS — Selectors & Properties

DAY 6 CSS Box Model & Spacing

DAY 7 CSS Typography & Fonts

DAY 8 CSS Colors, Backgrounds & Gradients

DAY 9 CSS Display, Positioning & Float

DAY 10 CSS Flexbox

DAY 11 CSS Grid

DAY 12 CSS Responsive Design & Media Queries

DAY 13 CSS Transitions & Animations

DAY 14 CSS Pseudo-classes & Pseudo-elements

DAY 15 CSS Variables & Custom Properties

DAY 16 HTML Forms & CSS Styling Forms

DAY 17 Project Day — Building a Complete Webpage

DAY 18 Review, Best Practices & Next Steps

DAY Introduction to the Web & HTML Basics
1 Topics: How browsers work • What is HTML • Tags & elements • First webpage

1.1 How the Web Works

When you type a URL into your browser, a request is sent to a server, which returns HTML, CSS, and
JavaScript files. The browser then renders those files into the page you see.
• Client = your browser (Chrome, Firefox, Safari, Edge)
• Server = a computer that stores and sends website files
• HTTP / HTTPS = the protocol (language) used to communicate
• URL = Uniform Resource Locator — the web address

1.2 What is HTML?

HTML stands for HyperText Markup Language. It is the skeleton of every webpage — it describes
structure and content using elements called tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>

1.3 Key Terminology

• Tag — a keyword wrapped in angle brackets: <p>
• Element — opening tag + content + closing tag: <p>Text</p>
• Attribute — extra info inside the opening tag: <a href="url">
• Nesting — placing elements inside other elements

💡 Remember: Every HTML file must start with <!DOCTYPE html> so the browser knows to use modern
HTML5 rules.
1.4 Your Notes
_____________________________________________________________________________________
_______________

_____________________________________________________________________________________
_______________

✏ Exercise 1.1: Create Your First HTML Page

1. Create a new file called [Link]
2. Add the full HTML skeleton (doctype, html, head, body)
3. Inside <head>, set the title to "My First Webpage"
4. Inside <body>, add one <h1> heading with your name
5. Add a <p> paragraph describing yourself in 2–3 sentences
6. Open the file in a browser and take a screenshot
Starter code:

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>
📝 Your Answer / Code:

____________________________________________________________________________________
______

✏ Exercise 1.2: Identify HTML Parts

1. Label each part of this element: <a href="[Link]
2. What is the tag name? ___________________
3. What is the attribute name? ___________________
4. What is the attribute value? ___________________
5. What is the content? ___________________
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY HTML Text Elements & Semantics
2 Topics: Headings h1–h6 • Paragraphs • Emphasis & strong • Semantic HTML5

2.1 Heading Tags

HTML provides six heading levels. h1 is the most important (page title) and h6 is the least. Use headings
in order — never skip levels for styling purposes.
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

2.2 Text Formatting

<p>Regular paragraph text.</p>
<strong>Bold / important text</strong>
<em>Italic / emphasized text</em>
<mark>Highlighted text</mark>
<del>Deleted / strikethrough text</del>
<ins>Inserted / underlined text</ins>
<sub>Subscript</sub> and <sup>Superscript</sup>
<br> 
<hr>

2.3 Semantic HTML5 Elements

Semantic elements clearly describe their purpose to both the browser and the developer. They improve
accessibility and SEO.

Element Purpose
<header> Top of page or section — logo, nav
<nav> Navigation links
<main> Primary content of the page
<section> A thematic grouping of content
<article> Self-contained content (blog post, news)
<aside> Related but secondary content (sidebar)
<footer> Bottom of page or section
<figure> / <figcaption> Image with caption

2.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 2.1: Semantic Page Structure

1. Create a page called [Link]
2. Use <header> containing an <h1> with a blog title
3. Add a <nav> with three placeholder links
4. Use <main> containing one <article> with an <h2>, two <p> paragraphs, and a <footer>
5. Add a page <footer> with copyright text
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 2.2: Text Formatting Practice

1. Write a paragraph using at least 5 different text tags: <strong>, <em>, <mark>, <sub>, <sup>
2. Write the rendered output for: <p>H<sub>2</sub>O is water and E = mc<sup>2</sup></p>
3. What is the difference between <b> and <strong>? ___________________
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY HTML Links, Images & Media
3 Topics: <a> anchor tag • Relative vs absolute URLs • <img> • Audio & video

3.1 Anchor Tag — Hyperlinks

<a href="[Link] Example</a>

<a href="[Link]">About Us</a>

<a href="[Link] target="_blank" rel="noopener">External Link</a>

<a href="#contact">Go to Contact</a>
<section id="contact">...</section>

3.2 Images

<img src="[Link]" alt="Description of image">

<figure>
<img src="[Link]" alt="A beautiful sunset">
<figcaption>Sunset over Marina Bay, Singapore</figcaption>
</figure>

💡 Alt Text: Always write descriptive alt text for images. Screen readers use it for accessibility, and search
engines use it for SEO. Never leave alt empty unless the image is purely decorative.
3.3 Audio & Video

<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>

<video controls width="640" height="360">
<source src="clip.mp4" type="video/mp4">
Your browser does not support video.
</video>

3.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 3.1: Navigation with Links

1. Create [Link] with a <nav> element
2. Add links: Home ([Link]), About ([Link]), Contact ([Link])
3. Make all external links open in a new tab
4. Add one anchor link that jumps to a <section id="bottom"> at the bottom of the page
📝 Your Answer / Code:

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 3.2: Image Gallery

1. Create a [Link] page
2. Add 4 images using <figure> and <figcaption>
3. Use meaningful alt text for each
4. Wrap all figures in a <main> element
5. BONUS: Embed a YouTube video below the gallery
Starter code:

<img src="_" alt="_">

</figure>

📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY HTML Lists, Tables & Forms
4 Topics: ul / ol / dl • Table structure • Form elements • Input types

4.1 Lists

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<ol>
<li>Wake up</li>
<li>Study HTML</li>
<li>Build something cool</li>
</ol>

<dl>
<dt>HTML</dt>
<dd>Markup language for structure</dd>
<dt>CSS</dt>
<dd>Stylesheet language for design</dd>
</dl>

4.2 Tables
<table>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>92</td>
<td>A</td>
</tr>
</tbody>
</table>

4.3 Forms
<form action="/submit" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="sg">Singapore</option>
<option value="my">Malaysia</option>
</select>

<label><input type="checkbox" name="agree"> I agree to terms</label>

<button type="submit">Submit</button>
</form>

4.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 4.1: Student Grade Table

1. Create a table with columns: Name, Subject, Score, Grade
2. Add at least 5 rows of data using <tbody>
3. Use <thead> for headers and <th> for header cells
4. Use colspan to add a "Class Average" row spanning all name/subject cells
📝 Your Answer / Code:

____________________________________________________________________________________
______

✏ Exercise 4.2: Registration Form

1. Build a sign-up form with: text (username), email, password, date (birthday)
2. Add a dropdown for your country
3. Add radio buttons for: Student / Teacher / Other
4. Add a checkbox for newsletter subscription
5. Add a Submit button and a Reset button
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY Introduction to CSS — Selectors & Properties
5 Topics: CSS syntax • Linking CSS • Selectors • Specificity

5.1 CSS Syntax

/* CSS Rule Structure */
selector {
property: value; /* declaration */
property: value;
}

/* Examples */
h1 {
color: navy;
font-size: 32px;
}

p {
color: #333333;
line-height: 1.6;
}

5.2 Three Ways to Add CSS

• External stylesheet (BEST): <link rel="stylesheet" href="[Link]">
• Internal style block: <style> ... </style> inside <head>
• Inline style (use sparingly): <p style="color: red;">

5.3 CSS Selectors

/* Element selector */ h1 { }
/* Class selector */ .card { }
/* ID selector */ #header { }
/* Universal selector */ * { }
/* Attribute selector */ input[type="text"] { }
/* Descendant */ nav a { } /* any <a> inside <nav> */
/* Child */ ul > li { } /* direct <li> children */
/* Adjacent sibling */ h2 + p { }
/* General sibling */ h2 ~ p { }
/* Grouping */ h1, h2, h3 { }
5.4 Specificity (Priority)
When multiple rules target the same element, specificity determines which wins.

• Inline styles — 1,0,0,0 (highest)

• ID selectors — 0,1,0,0
• Class / attribute / pseudo-class — 0,0,1,0
• Element / pseudo-element — 0,0,0,1 (lowest)

💡 Rule: Avoid !important — it breaks the cascade and makes debugging painful.

5.5 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 5.1: External Stylesheet

1. Create [Link] and link it to your [Link]
2. Style h1: font-size 36px, color navy, text-align center
3. Style p: color #555, line-height 1.7, font-size 16px
4. Add a class .highlight with yellow background and padding 4px
5. Apply .highlight to two words in your paragraph using <span>
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 5.2: Selector Specificity Quiz

1. Which selector wins — write the specificity score in brackets:
2. #main p vs .content p → Winner: ___________ [___] vs [___]
3. [Link] vs .title → Winner: ___________ [___] vs [___]
4. body > h1 vs h1 → Winner: ___________ [___] vs [___]
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Box Model & Spacing
6 Topics: Content / padding / border / margin • box-sizing • Width & height

6.1 The Box Model

Every HTML element is a rectangular box made of four layers:

• Content — the actual text or image

• Padding — space between content and border (inside the box)
• Border — a line surrounding the padding
• Margin — space outside the border (between boxes)

.box {
width: 300px;
height: 150px;
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom left/right */
padding: 5px 10px 15px 20px; /* top right bottom left (clockwise) */
border: 2px solid #333;
margin: 30px auto; /* top/bottom 30px, left/right auto (centers) */
box-sizing: border-box; /* width includes padding + border */
}

💡 Best Practice: Always set * { box-sizing: border-box; } at the top of your CSS file so widths behave
predictably.

6.2 Border Styles

border: 1px solid black;
border: 3px dashed #ccc;
border: 4px dotted red;
border-radius: 8px; /* rounded corners */
border-radius: 50%; /* perfect circle (on equal-width/height element) */
border-top: 2px solid blue; /* one side only */

6.3 Your Notes

_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________

_____________________________________________________________________________________
_______________

✏ Exercise 6.1: Box Model Card

1. Create a <div class="card"> containing an <h2> and a <p>
2. Give .card: width 320px, padding 24px, border 2px solid #ddd, border-radius 12px
3. Set margin to auto to center it
4. Add box-shadow: 0 4px 12px rgba(0,0,0,0.1)
5. Use box-sizing: border-box globally
Starter code:

* { box-sizing: border-box; }

.card {

/* your styles here */

📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 6.2: Margin vs Padding

1. What happens when you set margin: auto on a block element? ___
2. What is the total rendered width of: width:200px, padding:20px, border:5px (without border-box)?
___
3. And with box-sizing: border-box? ___
4. Draw the box model below — label each layer:
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Typography & Fonts
7 Topics: font-family • font-size / weight / style • Google Fonts • Text properties

7.1 Font Properties

body {
font-family: "Segoe UI", Arial, sans-serif; /* font stack */
font-size: 16px; /* base size */
font-weight: 400; /* 100–900, or normal / bold */
font-style: italic; /* normal | italic | oblique */
line-height: 1.6; /* unitless = 1.6 × font-size */
}

h1 { font-size: 2rem; } /* 2 × root font size */

h2 { font-size: 1.5rem; }
small { font-size: 0.875rem; }

7.2 Google Fonts

<link
href="[Link]
rel="stylesheet">

/* In CSS */
body { font-family: "Inter", sans-serif; }

7.3 Text Properties

text-align: left | center | right | justify;
text-decoration: none | underline | line-through;
text-transform: uppercase | lowercase | capitalize;
letter-spacing: 2px;
word-spacing: 4px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
white-space: nowrap; /* prevent line breaks */
overflow: hidden;
text-overflow: ellipsis; /* show ... when text overflows */

7.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 7.1: Typography Stylesheet

1. Import a Google Font of your choice (try "Poppins" or "Inter")
2. Set body font to your chosen font, size 16px, line-height 1.7
3. Style h1: size 3rem, font-weight 700, letter-spacing -1px
4. Style h2: size 1.75rem, color #2674C4
5. Add a .truncate class that shows ellipsis on a single line
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
✏ Exercise 7.2: Units Practice
1. What is 1.5rem if the root font-size is 16px? ___
2. What is 2em if the parent font-size is 20px? ___
3. Which unit is best for accessible font sizes and why? ___
4. Convert 24px to rem (base 16px): ___
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Colors, Backgrounds & Gradients
8 Topics: Color formats • Background properties • Linear/radial gradients

8.1 Color Formats

/* Named color */ color: coral;
/* HEX */ color: #E86A1F;
/* RGB */ color: rgb(232, 106, 31);
/* RGBA (+ alpha) */ color: rgba(232, 106, 31, 0.6);
/* HSL */ color: hsl(25, 80%, 52%);
/* HSLA */ color: hsla(25, 80%, 52%, 0.5);

8.2 Background Properties

.hero {
background-color: #1A3C5E;
background-image: url("[Link]");
background-size: cover; /* cover | contain | 100% | 300px */
background-position: center; /* top | bottom | left | right | center */
background-repeat: no-repeat; /* repeat | no-repeat | repeat-x | repeat-y */
background-attachment: fixed; /* fixed | scroll | local */
}

8.3 Gradients
/* Linear gradient */
background: linear-gradient(135deg, #1A3C5E, #2674C4);

/* Multi-stop gradient */
background: linear-gradient(to right, #E86A1F, #FFCF77, #E86A1F);

/* Radial gradient */
background: radial-gradient(circle at center, #ffffff, #1A3C5E);

8.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 8.1: Hero Section with Gradient

1. Create a .hero div with height 400px
2. Apply a diagonal gradient from #1A3C5E to #2674C4
3. Center a white <h1> and <p> inside using text-align
4. Add a semi-transparent overlay using an extra <div> with position absolute
5. BONUS: Add a full background image underneath the gradient using background shorthand
📝 Your Answer / Code:

____________________________________________________________________________________
______

✏ Exercise 8.2: Color Conversion

1. Convert #FF5733 to rgb(): rgb(___, ___, ___)
2. What does rgba(0,0,0,0.5) look like? ___
3. Write HSL for pure red (hue=0, fully saturated, mid lightness): ___
4. Name 3 benefits of using CSS custom properties for colors: 1.___ 2.___ 3.___
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Display, Positioning & Float
9 Topics: display values • position: static/relative/absolute/fixed/sticky • z-index • float

9.1 Display Property

display: block; /* takes full width, stacks vertically */
display: inline; /* width = content, no width/height props */
display: inline-block; /* like inline but respects width/height */
display: none; /* hides element (removes from layout) */
display: flex; /* Flexbox container (Day 10) */
display: grid; /* Grid container (Day 11) */

9.2 Position
/* static — default, normal document flow */
.box { position: static; }

/* relative — offset from normal position */

.box { position: relative; top: 10px; left: 20px; }

/* absolute — removed from flow, positioned to nearest relative parent */

.tooltip { position: absolute; top: 0; right: 0; }

/* fixed — relative to the viewport, stays on scroll */

.navbar { position: fixed; top: 0; width: 100%; z-index: 100; }

/* sticky — relative until a threshold, then fixed */

.sidebar { position: sticky; top: 20px; }

💡 z-index: z-index only works on positioned elements (not static). Higher z-index = in front.

9.3 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 9.1: Sticky Navigation Bar

1. Create a <header> with position: fixed, top: 0, width: 100%, z-index: 999
2. Give it a background-color so content does not show through
3. Add padding-top to <main> so content is not hidden behind the nav
4. BONUS: Add a .badge with position: absolute on a button showing a count
📝 Your Answer / Code:

____________________________________________________________________________________
______

✏ Exercise 9.2: Position Comparison

1. Describe what happens when you set position: absolute without a positioned parent: ___
2. What is the difference between fixed and sticky? ___
3. When would you use inline-block instead of block? ___
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Flexbox
10 Topics: flex container / items • justify-content • align-items • flex-wrap • order

10.1 Flex Container Properties

.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
justify-content: center; /* main axis: flex-start | center | flex-end |
space-between | space-around | space-evenly */
align-items: center; /* cross axis: flex-start | center | flex-end |
stretch | baseline */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
gap: 16px; /* gap between items */
align-content: flex-start; /* multi-line cross axis */
}

10.2 Flex Item Properties

.item {
flex-grow: 1; /* how much extra space to take (0 = none) */
flex-shrink: 0; /* prevent shrinking below flex-basis */
flex-basis: 200px; /* starting size */
flex: 1 1 200px; /* shorthand: grow shrink basis */
order: 2; /* visual order (default 0) */
align-self: flex-end; /* override container align-items for this item */
}

10.3 Common Flexbox Patterns

/* Perfect centering */
.center { display:flex; justify-content:center; align-items:center; }

/* Navigation bar */
nav { display:flex; justify-content:space-between; align-items:center; }

/* Card grid that wraps */

.cards { display:flex; flex-wrap:wrap; gap:24px; }
.card { flex: 1 1 280px; } /* grows, shrinks, min 280px */

10.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 10.1: Flexbox Navigation

1. Create a <nav> with a logo on the left and links on the right
2. Use display:flex and justify-content:space-between on the nav
3. Make the links also a flex container with gap:24px
4. On small screens (max-width:600px) change flex-direction to column
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
✏ Exercise 10.2: Flexbox Card Layout
1. Create 6 <div class="card"> elements inside a .card-grid container
2. Give .card-grid: display flex, flex-wrap wrap, gap 20px
3. Give .card: flex 1 1 250px, border, border-radius 8px, padding 16px
4. Make one card span full width using flex: 1 1 100%
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Grid
11 Topics: grid-template-columns/rows • grid areas • fr unit • auto-fill / auto-fit

11.1 Grid Container

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-columns: repeat(3, 1fr); /* same */
grid-template-columns: 200px 1fr 2fr; /* fixed + flexible */
grid-template-rows: 80px 1fr auto;
gap: 20px; /* row and column gap */
column-gap: 24px;
row-gap: 16px;
}

11.2 Placing Items

.header { grid-column: 1 / -1; } /* span all columns */
.sidebar { grid-column: 1 / 2; grid-row: 2 / 4; }
.main { grid-column: 2 / -1; }

/* Named grid areas */

.layout {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

11.3 Responsive Grid

/* Auto-fill: create as many columns as fit, min 250px */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
11.4 Your Notes
_____________________________________________________________________________________
_______________

_____________________________________________________________________________________
_______________

✏ Exercise 11.1: Page Layout with Grid Areas

1. Build a full-page layout with: header, sidebar, main content, footer
2. Use grid-template-areas with 2 columns: 240px sidebar + 1fr main
3. Make header and footer span both columns
4. Add background colors to distinguish each area
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

✏ Exercise 11.2: Responsive Photo Grid

1. Create a .gallery grid with auto-fill, minmax(200px, 1fr) columns
2. Add 8 <div class="photo"> items with a gray background and aspect-ratio: 1
3. Set gap: 12px
4. Make the 1st photo span 2 columns and 2 rows (grid-column: span 2; grid-row: span 2;)
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Responsive Design & Media Queries
12 Topics: Viewport meta tag • Mobile-first • Breakpoints • Responsive images

12.1 The Viewport Meta Tag

This tag tells mobile browsers to use the device width (not desktop width) for rendering. Always include
it.

12.2 Media Queries

/* Mobile-first approach: write base styles for mobile, then expand */

/* Base (mobile) */
.nav { flex-direction: column; }

/* Tablet (≥768px) */
@media (min-width: 768px) {
.nav { flex-direction: row; }
.grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}

/* Print */
@media print {
.no-print { display: none; }
}

12.3 Common Breakpoints

Breakpoint Device
320px Small phones
480px Large phones
768px Tablets
1024px Laptops
1280px Desktops
1536px Large screens

12.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 12.1: Responsive Navigation

1. Start with a mobile layout: nav links stacked vertically
2. At 768px make them horizontal in a row with space-between
3. Hide a hamburger menu icon on desktop (display:none at 768px+)
4. Test in browser DevTools at 375px, 768px, and 1280px widths
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 12.2: Responsive Grid Page

1. Create a page with 6 cards
2. Mobile (default): 1 column
3. Tablet (768px+): 2 columns
4. Desktop (1024px+): 3 columns
5. Use CSS Grid with media queries
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Transitions & Animations
13 Topics: transition shorthand • @keyframes • animation properties • transform

13.1 CSS Transitions

.button {
background-color: #2674C4;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.button:hover {
background-color: #1A3C5E;
transform: translateY(-2px);
}

/* Transition shorthand: property duration timing-function delay */

transition: all 0.4s ease-in-out 0s;

13.2 Transform
transform: translateX(50px); /* move right 50px */
transform: translateY(-20px); /* move up 20px */
transform: scale(1.1); /* 10% bigger */
transform: rotate(45deg); /* rotate clockwise */
transform: skewX(10deg); /* skew */
transform: translate(-50%, -50%); /* center trick with position:absolute */

13.3 CSS Animations with @keyframes

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.hero-text {
animation: fadeIn 0.8s ease forwards;
}
.badge {
animation: pulse 2s ease-in-out infinite;
}

/* animation: name duration timing iteration direction fill-mode */

13.4 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 13.1: Button Hover Effects

1. Create three buttons with different hover transitions:
2. Button 1: background-color change over 0.3s ease
3. Button 2: scale(1.05) and box-shadow on hover
4. Button 3: slide right using translateX(4px)
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 13.2: Loading Spinner

1. Create a .spinner div: 40px × 40px, border-radius 50%
2. Give it border: 4px solid #eee; border-top-color: #2674C4
3. Write a @keyframes spin that rotates 360deg
4. Apply animation: spin 1s linear infinite
5. BONUS: Add a fade-in animation to the whole page on load
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Pseudo-classes & Pseudo-elements
14 Topics: :hover :focus :nth-child • ::before ::after • content property

14.1 Pseudo-classes
/* User interaction */
a:hover { color: orange; }
a:visited { color: purple; }
input:focus { outline: 2px solid #2674C4; }
button:active { transform: scale(0.98); }
input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Structural */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n) { color: red; } /* every 3rd item */
p:not(.intro) { color: gray; } /* all p except .intro */

14.2 Pseudo-elements
/* ::before and ::after add decorative content */
.quote::before { content: "\201C"; font-size: 2em; color: gray; }
.quote::after { content: "\201D"; font-size: 2em; color: gray; }

/* Required field asterisk */

[Link]::after { content: " *"; color: red; }

/* Clearfix for float layouts */

.clearfix::after { content: ""; display: block; clear: both; }

/* Highlight first line */

p::first-line { font-weight: bold; color: navy; }
p::first-letter { font-size: 2em; float: left; margin-right: 4px; }

14.3 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 14.1: Zebra-Striped Table

1. Create a 5-row table
2. Use tr:nth-child(even) to give alternate rows a light gray background
3. Use tr:hover to highlight the row on hover
4. Use th:first-child and th:last-child to round the corners of the header
📝 Your Answer / Code:

____________________________________________________________________________________
______

✏ Exercise 14.2: Decorative Divider with ::before / ::after

1. Create an <h2> with a horizontal line on each side
2. Use h2::before and h2::after with content: "" and flex:1 border-bottom
3. Wrap h2 in a flex container with align-items:center gap:12px
4. BONUS: Add a tooltip using ::after that appears on :hover
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY CSS Variables & Custom Properties
15 Topics: --variable syntax • :root • var() • Dark mode with variables

15.1 Defining & Using Variables

:root {
/* Color tokens */
--color-primary: #2674C4;
--color-secondary: #E86A1F;
--color-text: #333333;
--color-bg: #FFFFFF;

/* Spacing */
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* Typography */
--font-base: "Inter", sans-serif;
--font-size-base: 16px;
--radius: 8px;
}

button {
background: var(--color-primary);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-md);
font-family: var(--font-base);
}

15.2 Dark Mode

:root { --color-bg: #fff; --color-text: #333; }

@media (prefers-color-scheme: dark) {

:root {
--color-bg: #1a1a2e;
--color-text: #e0e0e0;
}
}

body { background: var(--color-bg); color: var(--color-text); }

15.3 Your Notes
_____________________________________________________________________________________
_______________

_____________________________________________________________________________________
_______________

✏ Exercise 15.1: Design Tokens Stylesheet

1. Create a :root block with at least 8 custom properties
2. Include: 3 colors, 3 spacing values, 1 border-radius, 1 font
3. Rebuild your Day 6 card component using only var() — no hard-coded values
4. BONUS: Add a .dark class that overrides the color variables for dark mode
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
✏ Exercise 15.2: Variable Fallbacks
1. What does var(--color-accent, coral) do when --color-accent is not defined? ___
2. Can CSS variables be used inside calc()? Example: ___
3. Write a variable for a shadow: --shadow: 0 4px 12px rgba(0,0,0,0.1)
4. Apply it to .card using box-shadow: var(--shadow)
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY HTML Forms & CSS Styling Forms
16 Topics: Validation attributes • Custom checkboxes • Focus states • Accessible forms

16.1 HTML5 Validation Attributes

16.2 Styling Forms

/* Input reset */
input, textarea, select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #ccc;
border-radius: var(--radius, 6px);
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}

input:focus {
border-color: var(--color-primary, #2674C4);
box-shadow: 0 0 0 3px rgba(38,116,196,0.2);
}

input:invalid { border-color: #e74c3c; }

input:valid { border-color: #27ae60; }

/* Style labels */
label { display: block; font-weight: 600; margin-bottom: 4px; }

/* Submit button */
button[type="submit"] {
background: var(--color-primary);
color: white; border: none; cursor: pointer;
padding: 12px 28px; border-radius: 6px;
font-size: 1rem; font-weight: 600;
}

16.3 Your Notes

_____________________________________________________________________________________
_______________

✏ Exercise 16.1: Styled Contact Form

1. Build a contact form: Name, Email, Subject (select), Message (textarea), Submit
2. Style with a centered max-width: 600px card layout
3. Add focus styles using box-shadow ring
4. Show green/red border on valid/invalid input
5. Style the submit button with hover + active states
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
____________________________________________________________________________________
______

____________________________________________________________________________________
______

✏ Exercise 16.2: Custom Checkbox

1. Hide the default checkbox with appearance: none
2. Style a 20×20px box with border and border-radius 4px
3. Use input:checked to show a checkmark via ::after content or background-image
4. Make sure it still works with keyboard Tab and Space
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY Project Day — Building a Complete Webpage
17 Topics: Plan → Build → Style → Polish • Portfolio page project

17.1 Project Brief: Personal Portfolio Page

Today you will build a complete, responsive personal portfolio page from scratch using everything you
have learned in Days 1–16. The page must include:
• Header / Navbar — sticky, with your name/logo and navigation links
• Hero Section — full-width, gradient or image background, centered heading + CTA button
• About Section — photo + 2-column text using Flexbox or Grid
• Skills Section — visual skill bars or icon grid
• Projects Section — 3-card grid with hover effects
• Contact Section — styled form (name, email, message, submit)
• Footer — copyright, social links

17.2 Technical Requirements

• All CSS in an external stylesheet ([Link])
• Use CSS custom properties (:root variables) for all colors and spacing
• Fully responsive — works on mobile (375px) and desktop (1280px)
• At least 2 CSS animations or transitions
• Semantic HTML5 elements throughout
• Valid alt text on all images
• Google Font applied to the entire page

17.3 Planning Workspace

Sketch your page layout / wireframe below:

____________________________________________________________________________________
___________

____________________________________________________________________________________
___________
____________________________________________________________________________________
___________

____________________________________________________________________________________
___________

____________________________________________________________________________________
___________
✏ Exercise 17.1: Project Checklist
1. □ HTML file created with full semantic structure
2. □ External CSS linked and :root variables defined
3. □ Navbar is sticky and has hover effects
4. □ Hero section is full-height with a gradient background
5. □ About section uses Flexbox with image + text
6. □ Projects section uses CSS Grid with 3 cards
7. □ Contact form is fully styled with validation states
8. □ Page is tested and looks good at 375px, 768px, 1280px
📝 Your Answer / Code:

____________________________________________________________________________________
______

____________________________________________________________________________________
______
DAY Review, Best Practices & Next Steps
18 Topics: HTML/CSS checklist • Performance tips • Accessibility • What to learn next

18.1 HTML Best Practices

• Always include <!DOCTYPE html> and lang attribute
• Use semantic elements — avoid <div> soup
• Write descriptive alt text for all meaningful images
• Use <label for="id"> properly for all form inputs
• Validate your HTML at [Link]
• Keep nesting consistent and readable with indentation

18.2 CSS Best Practices

• Mobile-first — write base styles for mobile, use min-width media queries
• Use CSS custom properties for all colors, spacing, and typography
• Use box-sizing: border-box globally (*)
• Prefer Flexbox/Grid over float for layout
• Avoid !important — fix specificity issues instead
• Keep selectors short — avoid over-qualifying (.nav ul li a → .nav a)
• Organize your CSS: variables → reset → base → components → utilities
• Validate your CSS at [Link]/css-validator

18.3 Accessibility Checklist

• Color contrast ratio ≥ 4.5:1 for text (use [Link]/resources/contrastchecker)
• All interactive elements are keyboard-accessible (Tab, Enter, Space)
• Focus indicators are clearly visible (never just outline: none)
• Skip-to-content link at the top of the page
• Proper heading hierarchy (never skip h1 → h3)
• ARIA labels on icon-only buttons

18.4 What to Learn Next

Topic Description
JavaScript Add interactivity — DOM manipulation, events,
fetch API

CSS Frameworks Tailwind CSS or Bootstrap for faster development

Sass / SCSS CSS preprocessor with nesting, mixins, and

functions

Build Tools Vite or Webpack for bundling and optimization

React / Vue Component-based front-end frameworks

Git & GitHub Version control and hosting your projects

Web Performance Lazy loading, image optimization, Core Web Vitals

18.5 Final Reflection

What was the most challenging concept in this course?
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
What concept are you most proud of mastering?
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
What project will you build first with your new skills?
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
List 3 resources you will use to continue learning:
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________
_____________________________________________________________________________________
_______________

✏ Exercise 18.1: Final Project — Improvements

1. Review your Day 17 portfolio page against the 18.2 CSS best practices list
2. Fix any missing alt texts, label associations, or semantic issues
3. Run a Lighthouse audit in Chrome DevTools — note your scores below:
4. Performance: ___ Accessibility: ___ Best Practices: ___ SEO: ___
5. Make at least 3 improvements based on the audit results
📝 Your Answer / Code:

____________________________________________________________________________________
______

✏ Exercise 18.2: Course Recap Quiz

1. What is the difference between Flexbox and Grid? ___
2. What does position: sticky do differently than position: fixed? ___
3. Write a media query for max-width 768px: ___
4. What CSS property makes text show "..." when it overflows? ___
5. Name 2 semantic HTML5 elements and their purpose: 1.___ 2.___
6. What does the :root selector target? ___
📝 Your Answer / Code:

____________________________________________________________________________________
______

Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
42 pages
HTML5 Quick Notes Ebook
No ratings yet
HTML5 Quick Notes Ebook
3 pages
HTML Basics: Structure and Elements Guide
No ratings yet
HTML Basics: Structure and Elements Guide
3 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
61 pages
4 - HTMLV5
No ratings yet
4 - HTMLV5
56 pages
HTML5 and Web Technologies Overview
No ratings yet
HTML5 and Web Technologies Overview
12 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
19 pages
Understanding HTML Elements and Structure
No ratings yet
Understanding HTML Elements and Structure
9 pages
Unit - 01
No ratings yet
Unit - 01
32 pages
Lec 2-HTML
No ratings yet
Lec 2-HTML
61 pages
Understanding DOM Elements
No ratings yet
Understanding DOM Elements
3 pages
HTML Basics and Elements Overview
No ratings yet
HTML Basics and Elements Overview
59 pages
Block 1 Part 2 - Foundations of The Web - View As Single Page - OU Online
No ratings yet
Block 1 Part 2 - Foundations of The Web - View As Single Page - OU Online
15 pages
Frontend and Backend Development Basics
No ratings yet
Frontend and Backend Development Basics
5 pages
HTML Image Tag Overview
No ratings yet
HTML Image Tag Overview
2 pages
LP Computer 10 2Q LP
No ratings yet
LP Computer 10 2Q LP
9 pages
HTML Page Structure Essentials
No ratings yet
HTML Page Structure Essentials
44 pages
HTML5 Basics: Structure & Tags Guide
No ratings yet
HTML5 Basics: Structure & Tags Guide
73 pages
? Basics of HTML - Part II
No ratings yet
? Basics of HTML - Part II
5 pages
It Skills Theory Unit 2
No ratings yet
It Skills Theory Unit 2
3 pages
WIDT Unit 1
No ratings yet
WIDT Unit 1
14 pages
Medieval Presentation Template Guide
No ratings yet
Medieval Presentation Template Guide
21 pages
Web Development Basics
No ratings yet
Web Development Basics
13 pages
Advanced Web Development Resources
No ratings yet
Advanced Web Development Resources
11 pages
Website Structure and Design Elements
No ratings yet
Website Structure and Design Elements
1 page
Unit1 1
No ratings yet
Unit1 1
46 pages
Learn Django in 24 Hours For Beginners
No ratings yet
Learn Django in 24 Hours For Beginners
174 pages
Introduction to HTML and HTML5 Basics
No ratings yet
Introduction to HTML and HTML5 Basics
88 pages
Mark Howard's Graphic Design Portfolio
No ratings yet
Mark Howard's Graphic Design Portfolio
17 pages
HTML Basics: Structure & Elements Guide
No ratings yet
HTML Basics: Structure & Elements Guide
17 pages
DOS Commands and HTML Basics Guide
No ratings yet
DOS Commands and HTML Basics Guide
17 pages
Essential HTML Cheatsheet Guide
No ratings yet
Essential HTML Cheatsheet Guide
4 pages
Web Technologies 1 - HTML Summary
No ratings yet
Web Technologies 1 - HTML Summary
60 pages
Internet Programming Assignment Overview
No ratings yet
Internet Programming Assignment Overview
2 pages
HTML Beginner Level
No ratings yet
HTML Beginner Level
12 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
18 pages
HTML Basics: Structure & Syntax Guide
No ratings yet
HTML Basics: Structure & Syntax Guide
31 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
110 pages
History of Lighthouses Explained
No ratings yet
History of Lighthouses Explained
2 pages
History of Lighthouses Explained
No ratings yet
History of Lighthouses Explained
2 pages
HTML and CSS Basics Course Guide
No ratings yet
HTML and CSS Basics Course Guide
15 pages
Draggable HTML Rectangle Design
No ratings yet
Draggable HTML Rectangle Design
2 pages
Unit 1
No ratings yet
Unit 1
19 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
50 pages
HTML & CSS Beginner Cheat Sheet
No ratings yet
HTML & CSS Beginner Cheat Sheet
1 page
HTML Css Cheat Sheet
No ratings yet
HTML Css Cheat Sheet
1 page
HTML
No ratings yet
HTML
114 pages
Online Bookstore Login Page Design
No ratings yet
Online Bookstore Login Page Design
51 pages
Art of Living Event Registration Guide
No ratings yet
Art of Living Event Registration Guide
5 pages
Web Development Basics and Bucket Technique
0% (1)
Web Development Basics and Bucket Technique
16 pages
Comprehensive Guide to Web Development
No ratings yet
Comprehensive Guide to Web Development
45 pages
Free Web Development Course Overview
No ratings yet
Free Web Development Course Overview
54 pages
Learn HTML: A Comprehensive Guide
No ratings yet
Learn HTML: A Comprehensive Guide
113 pages
HTML Handbook for Beginners and Pros
No ratings yet
HTML Handbook for Beginners and Pros
75 pages
Frontend Internship Training Guide
No ratings yet
Frontend Internship Training Guide
4 pages
HTML Handbook for Beginners and Pros
No ratings yet
HTML Handbook for Beginners and Pros
75 pages
HTML Basics: A Comprehensive Guide
No ratings yet
HTML Basics: A Comprehensive Guide
14 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
24 pages
HTML5 Figure Element Guidelines
No ratings yet
HTML5 Figure Element Guidelines
58 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
20 pages
Monaco
100% (3)
Monaco
432 pages
Engineering Graphics Laboratory Manual
No ratings yet
Engineering Graphics Laboratory Manual
115 pages
Microsoft Learn Playbook for AI Skills
No ratings yet
Microsoft Learn Playbook for AI Skills
19 pages
Car Computer System Overview
No ratings yet
Car Computer System Overview
16 pages
MCM Settings for Ultimate Skyrim 4.2.0
No ratings yet
MCM Settings for Ultimate Skyrim 4.2.0
20 pages
Using Shape Builder for Laser Cutting
No ratings yet
Using Shape Builder for Laser Cutting
6 pages
Critical Makers: (Un)learning Technology
No ratings yet
Critical Makers: (Un)learning Technology
322 pages
C++ Class Design Assignments
No ratings yet
C++ Class Design Assignments
37 pages
Hydraulic Press Design and Simulation Analysis
No ratings yet
Hydraulic Press Design and Simulation Analysis
8 pages
Channel Access Methods in Networks
No ratings yet
Channel Access Methods in Networks
6 pages
HDplayer 200A User Manual
No ratings yet
HDplayer 200A User Manual
46 pages
Understanding Functions in Python
No ratings yet
Understanding Functions in Python
4 pages
TTTTTRRRRRRRRRR Repositories
No ratings yet
TTTTTRRRRRRRRRR Repositories
6 pages
Ninteger Toolbox for Fractional Control
No ratings yet
Ninteger Toolbox for Fractional Control
6 pages
Data Analyst Resume - Lokesh Kumar Reddy
No ratings yet
Data Analyst Resume - Lokesh Kumar Reddy
2 pages
Cloud Computing Security Overview
No ratings yet
Cloud Computing Security Overview
30 pages
Bin Packing and Huffman Coding Algorithms
No ratings yet
Bin Packing and Huffman Coding Algorithms
67 pages
Efficient De Bruijn Sequence Generation
No ratings yet
Efficient De Bruijn Sequence Generation
3 pages
SSF: Efficient Model Tuning Method
No ratings yet
SSF: Efficient Model Tuning Method
20 pages
Grade 8 Computer Networks Lesson Plan
No ratings yet
Grade 8 Computer Networks Lesson Plan
4 pages
Arizona Election Fraud Complaint
100% (2)
Arizona Election Fraud Complaint
53 pages
ACR Windows Installation Guide
No ratings yet
ACR Windows Installation Guide
20 pages
Horticulture Maintenance Tender Notice
No ratings yet
Horticulture Maintenance Tender Notice
2 pages
Connect MySQL with Python Connector
No ratings yet
Connect MySQL with Python Connector
4 pages
Analytic Scalability Technologies Explained
No ratings yet
Analytic Scalability Technologies Explained
21 pages
Smart Tourist Safety System Overview
No ratings yet
Smart Tourist Safety System Overview
3 pages
SINAMICS G120 CU250S-2 Manual
No ratings yet
SINAMICS G120 CU250S-2 Manual
1,286 pages
Unix Job Scheduling Commands Explained
No ratings yet
Unix Job Scheduling Commands Explained
3 pages
New Tire Model for Counterbalance Trucks
No ratings yet
New Tire Model for Counterbalance Trucks
19 pages
Visual Basic for Excel: A Complete Guide
No ratings yet
Visual Basic for Excel: A Complete Guide
10 pages