BRAINBIT INFOTECH · RANCHI

COMPLETE HTML + CSS COURSE · PART 1 OF 4

HTML Foundations

Build the structure of real web pages: text, links, images, lists, tables, forms and semantic layout.

6 modules~16.5 hours30 practice examplesNo prior coding needed

By the end of this part you can build

A personal profile page and a city guide
A recipe page, timetable and marksheet with tables
An admission form for a coaching institute
A complete school homepage using semantic HTML

Every example opens in a live browser preview. Click ✎ Edit on any preview, or press L, to open the Code Lab.

ROADMAP FOR THIS PART

Module 1How the Web Works & First Page2.5 h

Module 2Text, Headings & Formatting2.5 h

Module 3Links, Images & Media3 h

Module 4Lists & Tables2.5 h

Module 5Forms & User Input3.5 h

Module 6Semantic HTML & Page Structure2.5 h

HTML + CSSBefore we begin

How to Use This Part

Every module has

1
A "Where is it used?" diagram of a real web page
2
Concept slides with code + live browser preview
3
Animations and playgrounds: click, drag and watch
4
A Live Lab: edit code, see the result instantly
5
5 practice examples with solutions
6
An animated recap + quiz

Controls→ next, ← back, M menu, L Code Lab, F fullscreen. Click ✎ Edit on any preview to change its code.

MODULE 1

How the Web Works & Your First Web Page

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

What a website, browser, server and URL are
HTML, CSS and JavaScript: who does what
Setting up VS Code, Chrome and Live Server
Tags, elements, attributes and nesting
The basic structure of every HTML page

You will build

Your very first web page
An "About My City" page
A fixed (debugged) broken page

Module 1The big picture

What Happens When You Open a Website?

Browser

The app you use to see websites: Chrome, Edge, Firefox. It reads HTML and draws the page.

Server

A computer that is always on and stores the website files. It sends them when asked.

URL

The address of a page, e.g. https://www.ranchi-school.in/about.html

Module 1The big picture

Reading a Web Address (URL)

https://Protocol: secure way to talk

www.Sub-domain

ranchi-schoolDomain name (website name)

.inExtension: .com .in .org

/noticesFolder

/exam.htmlFile (the page)

Think of it like a postal address

Postal address	URL part
India Post / courier	`https://`
Ranchi city	`ranchi-school.in`
Lane / building	`/notices`
Your house number	`/exam.html`

RememberEvery web page you will make in this course is just a file ending in .html. When you put it on a server, it gets a URL.

Try thisOpen any site in Chrome and click the address bar. Can you spot the domain, folder and file?

Module 1Three languages of the web

HTML, CSS and JavaScript: Who Does What?

HTML = Structure (the skeleton)

Says what is on the page: heading, paragraph, image, button.

CSS = Style (the paint & decoration)

Says how it looks: colours, fonts, spacing, layout.

JavaScript = Behaviour (the electricity)

Makes it do things: click a button, show a message. (Next course!)

file:///D:/my-website/school.html

Click the "CSS ON" buttonSwitch CSS off and on. Without CSS the page still has all its content but looks plain. That is the job of HTML vs CSS. Click Apply Now to see JavaScript.

Module 1Real-world use

Where Is This Used on a Web Page?

You will find it here

Every website is built with HTML: Google, YouTube, Amazon, your school website
HTML gives each part a meaning: this is a heading, this is a menu, this is a photo
Even mobile apps often show HTML pages inside them (help pages, payment pages)
Emails from banks and shops are also written in HTML

Course goalBy the end of Part 4 you will build complete websites like this one, with every part labelled on this diagram.

Module 1Getting ready

Set Up Your Tools (Free)

1
Install Google Chrome (or Edge) – to view pages
2
Install VS Code from code.visualstudio.com – to write code
3
In VS Code open Extensions (Ctrl+Shift+X) and install Live Server
4
Create a folder D:\my-website and open it: File > Open Folder
5
New file index.html, type ! and press Tab for a ready template
6
Right-click the file > Open with Live Server. Every save (Ctrl+S) refreshes the browser.

Your project folder

Common mistakesFile saved as index.html.txt (turn on "File name extensions" in Windows Explorer). Spaces or capital letters in file names: use about-us.html not About Us.html.

No computer?You can practise inside this deck: press L or click ✎ Edit on any preview.

Module 1HTML building blocks

Anatomy of an HTML Element

<pOpening tag starts

class="intro"Attribute: extra information (name="value")

>closes the opening tag

Johar Ranchi!Content: what the user sees

</p>Closing tag has a slash /

Tag

The word in angle brackets: <p>, <h1>, <img>. Tells the browser what kind of thing it is.

Element

Opening tag + content + closing tag together. <h1>Hello</h1> is one element.

Empty element

Has no content and no closing tag: <br> (new line), <hr> (line), <img> (picture).

RuleTags are written in lowercase. Attribute values go inside double quotes.

Module 1HTML building blocks

Nesting: Boxes Inside Boxes

An element can live inside another element. The one opened last must be closed first – like closing the inner tiffin box before the outer bag.

nesting.htmlHTML

file:///D:/my-website/nesting.html

IndentationPress Tab to push inner elements to the right. The browser does not care, but humans read it much faster.

Module 1HTML building blocks

The Skeleton of Every HTML Page

index.htmlHTML

Line	What it means
`<!DOCTYPE html>`	Tells the browser: this is modern HTML5
`<html lang="en">`	The root – everything goes inside. lang = page language
`<head>`	Hidden information about the page (title, settings)
`<meta charset>`	Supports all letters: Hindi, ₹, emojis
`<title>`	Text shown on the browser tab
`<body>`	Everything visible on the page goes here

file:///D:/my-website/index.html

Module 1Inside the browser

How the Browser Reads Your HTML: the DOM Tree

The browser reads your file top to bottom and builds a family tree called the DOM (Document Object Model).

html is the parent of head and body
h1 and p are children of body and siblings of each other
Text is a leaf at the bottom of the tree
Later, CSS and JavaScript find elements using this tree

Why it mattersWords like parent, child and sibling come up again in CSS selectors (Module 11) and JavaScript.

Module 1Inside the browser

View Source & DevTools: Your X-ray Glasses

Shortcut	What it does
`Ctrl`+`U`	View the HTML source of any website
`F12`	Open Developer Tools (DevTools)
Right-click > Inspect	Jump straight to that element in the code
`Ctrl`+`Shift`+`M`	(in DevTools) see the page on a phone screen
`Ctrl`+`R`	Reload the page after saving

Class activityOpen your school or a news website, press F12 and double-click a heading in the Elements panel. Change the text. You just edited a website (only on your screen)!

Module 1Live Lab

Live Lab: Edit and Watch the Page Change

about-me.html – edit me!

Live preview

Do it nowFill in the blanks. Add another <p> about your school. Try deleting a closing </p> – what happens? Click Full screen to download your file.

Module 1Practice Example 1 of 5

My First Web Page

BeginnerRiya is in Class 6 at a school in Hazaribagh. Her computer teacher asks every student to make a personal introduction page.

Your tasks

Create index.html with the full HTML skeleton
Set the tab title to Riya - My Page
Add an <h1> with her name
Add two paragraphs: class/school and hobbies
Add an <hr> line and a final line "Made by Riya"

HintType ! then Tab in VS Code to get the skeleton.

Where this is used: Profile pages, "About me" sections, student portfolios.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/index.html

index.htmlHTML

Module 1Practice Example 2 of 5

About My City: Ranchi

BeginnerThe Jharkhand tourism club wants a simple page that introduces Ranchi to visitors.

Your tasks

Main heading Welcome to Ranchi
One paragraph about the city
A smaller heading <h2> "Famous Places"
A paragraph naming Hundru Falls, Rock Garden and Tagore Hill
Use <br> to put each place on a new line

HintPressing Enter in your code does NOT create a new line on the page. Use <br>.

Where this is used: Tourism websites, city guides, school project pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/ranchi.html

ranchi.htmlHTML

Module 1Practice Example 3 of 5

Find and Fix the Bugs

BeginnerRahul wrote this page but it looks wrong. Copy his code (click Try it in the Lab), find the 4 mistakes and fix them.

Your tasks

The <h1> is never closed
The <title> is placed inside body
Tags cross over: <b><i>...</b></i>
An attribute value has no quotes
Check: the solution must look like the preview

HintOpen the Lab first: it loads Rahul's broken code. Watch how the whole page turns into a giant heading because of one missing tag.

Where this is used: Debugging is 50% of a web developer's job.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/fix-me.html

fix-me.htmlHTML

Module 1Practice Example 4 of 5

Using Comments in HTML

BeginnerYour teacher wants to read notes inside your code explaining each part, but those notes must not appear on the page.

Your tasks

Make a "My Daily Routine" page
Before each section write a comment 
Add 3 paragraphs: Morning, School, Evening
Hide one paragraph by turning it into a comment
Check that comments are invisible in the browser

HintVS Code shortcut: select lines and press Ctrl+/ to comment/uncomment.

Where this is used: Team projects: developers leave notes for each other inside the code.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/routine.html

routine.htmlHTML

Module 1Practice Example 5 of 5

A Simple Notice for the Class Website

BeginnerThe class monitor needs a page that announces the school picnic to Patratu Valley.

Your tasks

Tab title: Picnic Notice
Heading <h1>: Class 7 Picnic
Paragraph with date, place and fee using <b> for the important words
Add <hr> and a heading <h3> "Things to bring"
List items on separate lines with <br>

Where this is used: School notice boards, event announcements, WhatsApp-shared pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/picnic.html

picnic.htmlHTML

Module 1Module complete

Recap: What You Completed in Module 1

✓How a browser asks a server for a page (request and response)
✓Parts of a URL: protocol, domain, folder, file
✓HTML = structure, CSS = style, JS = behaviour
✓Tools: VS Code + Live Server + Chrome
✓Elements, tags, attributes and correct nesting
✓The HTML skeleton: doctype, html, head, body
✓DOM tree, View Source and DevTools

Coming next

Module 2: Text & Headings – make your words look like a real article.

Quick quiz – click an answer

Q1. Where do you write everything that is VISIBLE on the page?

<body> holds all visible content. The head holds hidden information.

Q2. Which one is correct nesting?

Close the inner element first: open b, open i, close i, close b.

Q3. Which language decides the COLOUR of a heading?

CSS controls how things look.

MODULE 2

Text, Headings & Formatting

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

Six heading levels and when to use each
Paragraphs, line breaks, horizontal lines
Bold, italic, highlight, sub/superscript
Quotes, code and preformatted text
Special characters (entities) like © and ₹

You will build

A school notice board
A local news article
A price list with discounts

Module 2Real-world use

Where Is This Used on a Web Page?

You will find it here

Headings: page titles, section titles, card titles, product names
Paragraphs: every description, news story, blog post
Bold / highlight: important dates, prices, warnings on notices
Sub/superscript: science formulas H₂O, x², dates like 1^st

From now onTo save space, many examples show only the code that goes inside <body>. In your own file, always keep the full skeleton from Module 1.

Module 2Headings

Six Levels of Headings: <h1> to <h6>

headings.htmlHTML

file:///D:/my-website/headings.html

Golden rulesUse only one <h1> per page (the main title). Do not skip levels: h1 → h2 → h3. Choose headings by importance, not by size. Size can be changed later with CSS.

Module 2Headings

Headings Make an Outline (Like a Textbook Index)

Google reads headings to understand what your page is about
Blind users jump from heading to heading with screen readers
Readers scan headings first, then read the paragraphs they need

Do notUse <h1> just to make text big, or <h6> just to make it small. Wrong headings confuse Google and screen readers.

Module 2Paragraphs

Paragraphs, Line Breaks and the "Space Squeeze"

text.htmlHTML

file:///D:/my-website/text.html

Tag	Use it for
`<p>`	A block of text (paragraph)
`<br>`	A line break inside a paragraph (addresses, poems)
`<hr>`	A thematic break: a line between topics

Space squeezeMany spaces or Enter keys in your code become one single space on screen. Use <br>, <p> or CSS for spacing.

Module 2Formatting

Formatting Tags: Make Words Stand Out

format.htmlHTML

file:///D:/my-website/format.html

Tag	Looks like	Meaning
`<strong>`	bold	Very important
`<em>`	italic	Stress / emphasis
`<mark>`	highlight	Highlighted for attention
`<del> <ins>`	~~old~~ new	Removed / inserted text
`<sub> <sup>`	H₂O x²	Subscript / superscript
`<small>`	fine print	Side comments, legal text
`<b> <i> <u>`	b i u	Style only, no extra meaning

strong vs bBoth look bold. <strong> tells screen readers "this is important" so prefer it for warnings. Use <b> for product names or keywords.

Module 2Formatting

Quotes, Abbreviations, Code and Preformatted Text

quotes.htmlHTML

file:///D:/my-website/quotes.html

Tag	Used for
`<blockquote>`	A long quote, shown indented
`<q>`	Short quote, browser adds " "
`<abbr title>`	Short form; hover to see full form
`<kbd> <code>`	Keyboard keys and code
`<pre>`	Keeps spaces and line breaks exactly

Module 2Special characters

HTML Entities: Typing Special Characters

You want	Type this	Why
< >	`< >`	< would start a tag!
&	`&`	& starts an entity
₹	`₹`	Indian Rupee sign
©	`©`	Copyright in footers
® ™	`® ™`	Brand marks
(space)	` `	Space that never breaks or squeezes
♥ ★	`&hearts; ★`	Symbols, ratings

PatternEvery entity starts with & and ends with ;. Named (©) or numbered (©).

entities.htmlHTML

file:///D:/my-website/entities.html

Module 2Languages

Writing in Hindi (and Any Language)

hindi.htmlHTML

file:///D:/my-website/hindi.html

<meta charset="UTF-8"> lets the page show Hindi, Bengali, Santhali (Ol Chiki) and emojis
lang="hi" tells Google and screen readers the page is in Hindi
Switch language for one part with lang="en" on that element
In VS Code, save files as UTF-8 (bottom-right corner)

Typing HindiUse Google Input Tools or the Windows Hindi keyboard (Win + Space to switch).

Module 2Live Lab

Live Lab: Format a School News Story

news.html – edit me!

Live preview

TryAdd a <h3> "Chief Guest" with a paragraph. Highlight the winner names with <mark>. Add a price "₹ 50 entry fee".

Module 2Practice Example 1 of 5

School Notice Board

BeginnerKendriya Vidyalaya, Dhanbad needs an online notice for the Parent-Teacher Meeting.

Your tasks

Heading <h1>: NOTICE
<h2> with the subject: Parent-Teacher Meeting
Paragraph with date and time in <strong>
Highlight "Attendance is compulsory" with <mark>
Signature lines using <br> and a <small> footer

Where this is used: School and college websites, government notice pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/notice.html

notice.htmlHTML

Module 2Practice Example 2 of 5

Local News Article

BeginnerThe "Jharkhand Junior Times" (a student newspaper) wants to publish a story about the Hundru Falls cleanliness drive.

Your tasks

One <h1> headline and a <h4> byline
Three paragraphs with <em> and <strong>
A quote from a volunteer in <blockquote>
A sub-heading <h2> "What happens next"
Use <abbr> for NSS (National Service Scheme)

Where this is used: News portals, blogs, school magazines.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/news.html

news.htmlHTML

Module 2Practice Example 3 of 5

Science Formula Sheet

BeginnerHelp Class 9 students revise formulas. Chemistry needs subscripts and maths needs superscripts.

Your tasks

Heading: Formula Sheet
<h3> Chemistry: H₂O, CO₂, H₂SO₄
<h3> Maths: a² + b² = c², area = πr²
Use π and × entities
Ordinal dates: 1^st, 2^nd

Where this is used: Education sites, online notes, quiz apps.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/formulas.html

formulas.htmlHTML

Module 2Practice Example 4 of 5

Sweet Shop Price List

IntermediateA sweet shop on Main Road, Ranchi is running a Diwali offer. Show old prices crossed out and new prices.

Your tasks

Heading with the shop name
Each item: name in <b>, old price in <del>, new price in <ins>
Use the rupee entity ₹
Use   so "₹ 400" never breaks
Footer with © and <small>

Where this is used: E-commerce product prices, sale banners, menu cards.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/pricelist.html

pricelist.htmlHTML

Module 2Practice Example 5 of 5

Poem and Quote Page

IntermediateFor Hindi Diwas, Class 8 wants a page with a poem whose line breaks and spacing must stay exactly as written.

Your tasks

<html lang="hi"> and UTF-8
Poem inside <pre> so spacing is kept
Poet name with <cite>
A famous quote in <blockquote>
Short English note with lang="en"

Where this is used: Literature blogs, code tutorials (pre keeps code spacing), lyrics sites.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/hindi-diwas.html

hindi-diwas.htmlHTML

Module 2Module complete

Recap: What You Completed in Module 2

✓Six heading levels and the outline they create
✓One h1 per page, no skipped levels
✓Paragraphs, <br>, <hr> and the space squeeze
✓strong, em, mark, del, ins, sub, sup, small
✓blockquote, q, abbr, kbd, code, pre
✓Entities: < & ₹ ©  
✓UTF-8 and lang for Hindi pages

Coming next

Module 3: Links, Images & Media – connect pages and add pictures, video and maps.

Quick quiz – click an answer

Q1. How many <h1> headings should a page normally have?

One main title per page. Use h2/h3 for sections.

Q2. You typed 5 spaces between two words. How many does the browser show?

Whitespace collapses to a single space.

Q3. Which shows the Rupee sign?

₹ is the numbered entity for ₹.

MODULE 3

Links, Images & Media

⏱ 3 hours5 practice examplesLive code lab

You will learn

Hyperlinks: to websites, pages, sections, email, phone, WhatsApp
Absolute vs relative paths (the folder map)
Images with alt text, width and figure captions
Image formats: JPG, PNG, SVG, WebP, GIF
Audio, video and embedding YouTube / Google Maps

You will build

A 3-page mini website with navigation
A Jharkhand tourism photo gallery
A shop contact page with map

Module 3Real-world use

Where Is This Used on a Web Page?

You will find it here

Navigation menu: every menu item is a link
Images: logos, banners, product photos, profile pictures
Buttons like "Call Now" or "Chat on WhatsApp" are often links
Footer links: Privacy, Contact, social media icons
Video / maps: tutorials, shop location on a contact page

Module 3Hyperlinks

Anatomy of a Link: the <a> Tag

<aAnchor tag

href="https://www.jharkhandtourism.gov.in"href = where to go (Hypertext REFerence)

target="_blank"Open in a new tab

Visit JharkhandClickable text

</a>Close

Default look

Unvisited links are blue and underlined, visited ones purple. You will restyle them with CSS.

Anything can be a link

Text, an image, a whole card. Wrap it in <a>...</a>.

Safety

With target="_blank" add rel="noopener". It stops the new page from controlling your page.

Module 3Hyperlinks

Seven Types of Links You Will Use

links.htmlHTML

file:///D:/my-website/links.html

Click the links in the previewThe preview tells you what a real browser would do. #contact scrolls down to the element with id="contact".

href starts with	Opens
`https://`	Another website
`page.html`	A page in your folder
`#id`	A section of the same page
`mailto: / tel:`	Email app / phone dialler

Module 3Paths

Absolute vs Relative Paths: Finding Your Files

Type	Example	Use for
Absolute	`https://site.com/img/a.jpg`	Files on other websites
Relative (same folder)	`about.html`	Pages next to each other
Relative (sub-folder)	`images/logo.png`	Go DOWN into a folder
Relative (parent)	`../index.html`	Go UP one folder

Never do thissrc="C:\Users\Aman\Desktop\logo.png" works only on YOUR computer. Online it breaks. Always use relative paths for your own files.

RememberPaths use forward slash /, not backslash.

Module 3Images

Adding Images with <img>

<imgEmpty tag (no closing)

src="images/x.jpg"Path to the picture

alt="..."Text if image fails + for blind users

width="320">Size in pixels

images.htmlHTML

Always write altScreen readers read alt aloud. If the image is broken, the alt text appears instead (see the second image). Google also reads alt text.

file:///D:/my-website/images.html

Module 3Images

Which Image Format Should I Use?

Smaller files = faster pages, less mobile data. Exact sizes vary by image.

Format	Best for	Note
JPG	Photos (Hundru Falls, food)	Small size, no transparency
PNG	Screenshots, logos with transparent background	Sharp but large for photos
WebP	Modern replacement for JPG/PNG	Smallest; all new browsers support it
GIF	Tiny simple animations	Only 256 colours
SVG	Logos, icons, diagrams	Drawn with code, sharp at any size

Before uploadingResize photos to the size you need (1200 px wide is enough for a banner) and compress them with a free tool like squoosh.app.

Module 3Images

Captions with <figure> and Clickable Images

figure.htmlHTML

<figure> groups an image with its caption
<figcaption> is the caption text (top or bottom)
Put <img> inside <a> to make a clickable logo or banner
Website logos almost always link to the home page

file:///D:/my-website/figure.html

Module 3Media

Video and Audio

media.htmlHTML

Attribute	What it does
`controls`	Shows play / pause / volume buttons
`poster`	Picture shown before the video plays
`autoplay muted`	Starts by itself (browsers allow it only when muted)
`loop`	Plays again and again (background videos)

file:///D:/my-website/media.html

File sizeVideos are big. For long videos, upload to YouTube and embed them (next slide) instead of putting the MP4 on your site.

Module 3Media

Embedding YouTube and Google Maps with <iframe>

embed.htmlHTML

How to get the code

1
YouTube: open the video > Share > Embed > copy the code
2
Google Maps: search your shop > Share > Embed a map > copy HTML
3
Paste the code inside your page body

file:///D:/my-website/embed.html

In this deckThe previews show placeholders. On your computer, with internet on, the real video and map appear.

Module 3Live Lab

Live Lab: Links + Images Together

gallery.html – edit me!

Live preview

TryChange betla.jpg to netarhat.jpg. Add a temple.jpg figure. Break a path on purpose and watch the alt text appear. Other images available: ranchi.jpg, school.jpg, thekua.jpg, samosa.jpg.

Module 3Practice Example 1 of 5

A 3-Page Mini Website

BeginnerBuild the menu for "Sunrise Coaching Centre, Bokaro". The same menu goes at the top of index.html, courses.html and contact.html.

Your tasks

Create 3 files in the same folder
At the top of each page add the menu: Home | Courses | Contact
Each menu item links to its file using a relative path
Each page has its own <h1>
Test: click through all pages in the browser

HintThe menu is identical on every page. Only the content below changes.

Where this is used: Every website menu. Later CSS turns this into a nice navigation bar.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/index.html

index.htmlHTML

Module 3Practice Example 2 of 5

Jharkhand Tourism Photo Gallery

BeginnerThe tourism club wants a gallery of 4 places, each with a photo and caption.

Your tasks

Heading "Explore Jharkhand"
4 <figure> blocks with <img> and <figcaption>
Use images: hundru-falls.jpg, netarhat.jpg, betla.jpg, temple.jpg
Every image width 200 and a meaningful alt
Put all images in an images folder

HintFigures stack one below the other for now. In Module 14 (CSS Grid) you will arrange them in a neat grid.

Where this is used: Tourism sites, photo galleries, product listings.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/gallery.html

gallery.htmlHTML

Module 3Practice Example 3 of 5

Contact Links for a Local Shop

BeginnerGupta Electronics, Lalpur Chowk wants customers to call, email or WhatsApp in one tap from their phones.

Your tasks

A "Call Now" link with tel:
An email link with mailto: and a subject
A WhatsApp link with https://wa.me/91...
Facebook page link opening in a new tab with rel="noopener"
Add the WhatsApp icon image (whatsapp.png) inside its link

HintPhone numbers in tel: and wa.me use the country code 91 and no spaces.

Where this is used: Contact pages, "Call Now" buttons on mobile, business listing sites.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/contact.html

contact.htmlHTML

Module 3Practice Example 4 of 5

Table of Contents with Jump Links

IntermediateA long "Jharkhand General Knowledge" page needs a contents list at the top and "Back to top" links.

Your tasks

Give the top heading id="top"
Contents links: #history, #rivers, #festivals
Each section heading has the matching id
Each section ends with a "Back to top" link (href="#top")
Click links in the preview to test

HintAn id must be unique on the page and should not have spaces.

Where this is used: Wikipedia articles, FAQ pages, long documentation, single-page websites.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/gk.html

gk.htmlHTML

Module 3Practice Example 5 of 5

Shop Location Page with Map and Video

IntermediateA new cafe near Morabadi Ground wants a "Visit Us" page with a map, a welcome video and a photo.

Your tasks

Heading and address
Embed a Google Map with <iframe> (title + loading="lazy")
A video with controls and poster image
A cafe photo with alt text inside a figure
A "Get Directions" link opening Google Maps in a new tab

Where this is used: Restaurant, clinic and shop websites; "Contact us" pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/visit.html

visit.htmlHTML

Module 3Module complete

Recap: What You Completed in Module 3

✓Anchor tag <a href> and its attributes
✓Links to sites, pages, #sections, mailto:, tel:, WhatsApp, download
✓Absolute vs relative paths and ../
✓Images with src, alt, width; broken image shows alt
✓Choosing JPG, PNG, WebP, GIF or SVG
✓figure + figcaption and clickable images
✓video, audio and iframe embeds

Coming next

Module 4: Lists & Tables – organise information like menus, timetables and marksheets.

Quick quiz – click an answer

Q1. Your page is in pages/about.html. How do you show images/logo.png?

../ goes up from pages/ to my-website/, then into images/.

Q2. Why is the alt attribute important?

Alt text describes the image for blind users and when the image cannot load.

Q3. Which link opens the phone dialler?

tel: is the standard scheme.

MODULE 4

Lists & Tables

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

Unordered (bullet) and ordered (numbered) lists
Nested lists and description lists
Why menus are built with lists
Tables: rows, cells, headers, caption
Merging cells with colspan and rowspan

You will build

A litti-chokha recipe page
A class timetable
A report card / marksheet

Module 4Real-world use

Where Is This Used on a Web Page?

You will find it here

Lists: navigation menus, feature lists, steps of a recipe, footer links
Ordered lists: instructions, rankings, top-10 lists
Tables: timetables, results, price comparisons, bank statements
Description lists: FAQs, glossaries, product specifications

Module 4Lists

Unordered Lists <ul> (Bullets) and Nesting

list.htmlHTML

RuleInside <ul> you can only put <li>. A nested list goes inside an <li>, before its closing tag.

file:///D:/my-website/list.html

<ul> = unordered list (order does not matter)
<li> = list item
Nested lists get a different bullet style automatically

Module 4Lists

Ordered Lists <ol> (Numbers, Letters, Roman)

steps.htmlHTML

file:///D:/my-website/steps.html

Attribute	Example	Result
`type`	"1" "A" "a" "I" "i"	1, A, a, I, i
`start`	start="4"	begins at 4 (IV)
`reversed`	(no value)	counts down 3, 2, 1

Module 4Lists

Description Lists <dl>: Terms and Meanings

glossary.htmlHTML

<dl>description list (the container)<dt>description term (the word)<dd>description details (the meaning), indented

file:///D:/my-website/glossary.html

Where usedGlossaries, FAQs (question = dt, answer = dd), product specs (RAM: 8 GB, Storage: 128 GB).

Module 4Lists

Secret: Every Menu Is a List of Links

menu.htmlHTML

A menu is a list of choices, so we use <ul>
Each item is a link <a> inside <li>
Screen readers announce "list, 4 items", which helps blind users
CSS removes bullets and puts the items in a row

file:///D:/my-website/menu.html

HoverHover over the styled menu in the preview. Same HTML, different CSS!

Module 4Tables

Building a Table: Rows First, Then Cells

table.htmlHTML

file:///D:/my-website/table.html

Think like thisA table is built row by row (<tr>). Inside each row put cells: <th> for headings (bold, centred) or <td> for data. border="1" is a quick test border – in Part 2 we use CSS instead.

Module 4Tables

Table Sections: caption, thead, tbody, tfoot

bill.htmlHTML

file:///D:/my-website/bill.html

Tag	Purpose
`<caption>`	Title of the table (shown above it)
`<thead>`	Header rows
`<tbody>`	Main data rows
`<tfoot>`	Totals / summary row
`scope`	Tells screen readers if a th is for a column or row

Why bother?Sections help CSS style the header and footer differently, and long tables can repeat the header on every printed page.

Module 4Tables

Merging Cells: colspan and rowspan

timetable.htmlHTML

file:///D:/my-website/timetable.html

Module 4Tables

When to Use Tables (and When NOT To)

✔ Use a table for

Data with rows AND columns: marks, prices, timetables
Comparisons: plan A vs plan B
Reports and statements

✘ Do NOT use a table for

Page layout (header, sidebar, columns) – use CSS Flexbox/Grid
A simple list of items – use <ul>
Putting images side by side

Old websitesWebsites from the 1990s used tables for layout. It is now bad practice: hard to maintain and does not work on mobiles.

Module 4Live Lab

Live Lab: A Fee Table and a List

fees.html – edit me!

Live preview

TryAdd a row for "Tally Prime". Add a <tfoot>. Change <ul> to <ol type="a">. Merge the heading across 3 columns with colspan.

Module 4Practice Example 1 of 5

Recipe Page: Litti Chokha

BeginnerA food blogger from Ranchi wants a recipe page that Google can show as steps.

Your tasks

Heading + photo litti-chokha.jpg
<h2> Ingredients as an unordered list
Nested list under "For the filling": sattu, onion, garlic
<h2> Method as an ordered list (5 steps)
A tip in <strong> at the end

Where this is used: Recipe sites, how-to guides, product feature lists.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/recipe.html

recipe.htmlHTML

Module 4Practice Example 2 of 5

FAQ Page with a Description List

BeginnerSunrise Coaching Centre gets the same questions on phone daily. Put them on an FAQ page.

Your tasks

Heading "Frequently Asked Questions"
Use <dl>, <dt>, <dd>
At least 4 questions with answers
Make questions bold with <strong> inside dt
End with a contact link

Where this is used: FAQ sections on every business website, product specifications.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/faq.html

faq.htmlHTML

Module 4Practice Example 3 of 5

Class Timetable with Lunch Break

IntermediateMake the Class 7 weekly timetable. Lunch is at the same time every day, so one tall cell can cover it.

Your tasks

Header row: Day, 8:00, 8:45, 9:30, 10:15, 11:00
Rows for Monday, Tuesday, Wednesday
The 9:30 lunch cell uses rowspan="3"
A caption "Class 7 - Section B"
Use <th> for day names

HintThe rows for Tuesday and Wednesday have one FEWER <td>, because the LUNCH cell already fills that spot.

Where this is used: School portals, coaching apps, bus/train schedules.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/timetable.html

timetable.htmlHTML

Module 4Practice Example 4 of 5

Report Card with Totals

IntermediateCreate a marksheet for Priya Kumari, Class 10, with a total row in the footer.

Your tasks

A caption with the student name
<thead>: Subject, Max Marks, Marks Obtained
<tbody> with 5 subjects
<tfoot> with Total and Percentage (use colspan)
Highlight the highest mark with <mark>

Where this is used: Result portals (JAC, CBSE), bank statements, invoices.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/marksheet.html

marksheet.htmlHTML

Module 4Practice Example 5 of 5

Train Timetable: Ranchi to Howrah

IntermediateA travel website needs a table of sample trains. Group them into Morning and Night trains.

Your tasks

Columns: Train No., Name, Departs, Arrives, Days
A full-width row "Morning Trains" using colspan="5"
2 morning trains, then a "Night Trains" row and 2 night trains
Use scope="col" on headers
A small note below: "Sample data for practice"

Where this is used: Travel sites, bus booking, cinema show timings.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/trains.html

trains.htmlHTML

Module 4Module complete

Recap: What You Completed in Module 4

✓ul + li for bullet lists, nested lists
✓ol with type, start, reversed
✓dl / dt / dd for terms and FAQs
✓Menus = lists of links
✓table, tr, th, td built row by row
✓caption, thead, tbody, tfoot, scope
✓colspan and rowspan; tables only for data

Coming next

Module 5: Forms & User Input – collect names, phone numbers and feedback from visitors.

Quick quiz – click an answer

Q1. Which tag makes a numbered list?

ol = ordered list.

Q2. A cell should cover 2 columns. Which attribute?

colspan spreads across columns.

Q3. Should you use a table to create a page layout with a sidebar?

Tables are for data. Layout is done with CSS Flexbox/Grid.

MODULE 5

Forms & User Input

⏱ 3.5 hours5 practice examplesLive code lab

You will learn

How form data travels from browser to server
form, label, input and the name attribute
15 input types: text, email, date, range, file...
Radio buttons, checkboxes, dropdowns, textarea
Built-in validation: required, min, max, pattern

You will build

A coaching admission form
A login and feedback form
A hospital appointment booking form

Module 5Real-world use

Where Is This Used on a Web Page?

You will find it here

Login / sign-up on every app and website
Search box at the top of shopping sites
Contact / enquiry forms on business websites
Admission, exam and job applications (JAC, SSC, IBPS portals)
Checkout: address, payment, OTP

Module 5How forms work

How a Form Sends Data

HTML builds the form

Boxes, buttons, dropdowns. That is what we learn now.

name = value

Every field needs a name. The text the user typed is the value.

Server processes it

A backend language (PHP, Python, Node) saves it. You learn that in a later course.

Module 5Form basics

form + label + input: The Three Musketeers

Piece	Job
`<form action method>`	Container. action = where to send, method = how
`<label for="sname">`	Text for the box. Clicking it focuses the box
`<input id="sname">`	The box. id matches label for
`name="student_name"`	The key sent to the server

file:///D:/my-website/register.html

Try itType a name and number in the preview and click Register. You will see exactly what the browser sends: student_name=...&mobile=...

Label trickClick the word "Student name:" – the cursor jumps into the box. This also helps people on mobiles.

Module 5Input types

One Tag, Many Types: <input type="...">

types.htmlHTML

file:///D:/my-website/types.html

Why types matterOn a mobile, type="tel" opens the number keypad, type="email" shows the @ key, and type="date" shows a calendar. Users love it!

Module 5Choices

Radio Buttons vs Checkboxes

choices.htmlHTML

file:///D:/my-website/choices.html

	Radio ◉	Checkbox ☑
How many?	Only one from the group	Zero, one or many
Grouped by	Same `name`	Same `name` (optional)
Example	Gender, payment method	Hobbies, "I agree to terms"
Pre-select	`checked`	`checked`

Common bugIf radio buttons have different names, the user can select all of them. Same group = same name.

Module 5Choices

Dropdowns, Text Areas and Suggestions

select.htmlHTML

file:///D:/my-website/select.html

Tag	Use when
`<select>` + `<option>`	Many fixed choices (districts, states)
`<optgroup>`	Group options under a heading
`<textarea>`	Long text: address, message, feedback
`<datalist>`	Suggestions while typing, but free text allowed

Module 5Validation

Built-in Validation: No Code Needed

validate.htmlHTML

Attribute	Rule
`required`	Cannot be empty
`minlength / maxlength`	Number of characters
`min / max`	Smallest / biggest number or date
`pattern`	Must match a pattern (here: Indian mobile)
`readonly / disabled`	Cannot edit (disabled is not even sent)

file:///D:/my-website/validate.html

Try itClick Submit with empty boxes. Type a mobile number "12345". The browser stops you and shows a message.

SecurityBrowser checks are for user comfort. Real websites ALSO check data on the server, because anyone can skip HTML checks.

Module 5Organising forms

Grouping with <fieldset> and <legend>

groups.htmlHTML

<fieldset> draws a box around related fields
<legend> is the title on the box
Long forms (job, exam applications) are split into sections like this
You can also wrap an input inside its label (no for/id needed)

file:///D:/my-website/groups.html

Module 5Sending data

GET vs POST: Two Ways to Send

	GET	POST
Data visible in URL?	Yes	No
Can bookmark / share?	Yes	No
Good for	Search, filters	Login, payment, sign-up
Size limit	Small	Large (files)
Default?	Yes (if no method)	Must write method="post"

Rule of thumbReading data = GET. Changing or saving data, passwords or files = POST.

File uploadsFor type="file" use method="post" enctype="multipart/form-data".

Module 5Live Lab

Live Lab: Build an Enquiry Form

enquiry.html – edit me!

Live preview

TryAdd a mobile field with type="tel" and a pattern. Add radio buttons for "Morning / Evening batch". Submit and read the data shown at the bottom of the preview.

Module 5Practice Example 1 of 5

Coaching Admission Form

BeginnerExcel Academy, Hazaribagh takes admissions online for its Class 11 batch.

Your tasks

Fields: student name, father's name, date of birth, mobile
Labels connected to inputs with for/id
Stream selection with radio buttons (Science / Commerce / Arts)
All fields required
Submit button "Apply Now"

Where this is used: Every coaching, school and college website. Exam application portals.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/admission.html

admission.htmlHTML

Module 5Practice Example 2 of 5

Login Form

BeginnerThe BrainBit Infotech school app needs a simple login page.

Your tasks

Heading "Student Login"
Email field (type email, required)
Password field (type password, minlength 6)
Checkbox "Remember me"
Login button + "Forgot password?" link

HintLogin forms always use method="post" so the password does not show in the URL.

Where this is used: Every app: Gmail, school portals, banking, shopping.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/login.html

Module 5Practice Example 3 of 5

Feedback Survey

IntermediateAfter the Python workshop, collect feedback from students.

Your tasks

Rating 1-10 with type="range"
What did you like? (checkboxes: Teacher, Notes, Projects, Lab)
Would you recommend us? (radio: Yes / No)
Comments in a <textarea>
Group the form inside a <fieldset> with legend

Where this is used: Google Forms-style surveys, product reviews, customer satisfaction.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/feedback.html

feedback.htmlHTML

Module 5Practice Example 4 of 5

Hospital Appointment Booking

IntermediateCity Care Hospital, Bariatu wants patients to book OPD appointments online.

Your tasks

Patient name and age (number 0-120)
Department dropdown (General, Child Specialist, Eye, Dental)
Preferred date (type="date") and time (type="time")
Mobile with pattern for 10 digits
Symptoms textarea + "Book Appointment" button

Where this is used: Hospital and clinic sites, salon booking, service appointment apps.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/appointment.html

appointment.htmlHTML

Module 5Practice Example 5 of 5

Job Application with File Upload

AdvancedA Ranchi software company is hiring interns. The form has two sections and a resume upload.

Your tasks

Fieldset 1 "Personal": name, email, phone
Fieldset 2 "Job": position dropdown, experience (number), skills (checkboxes)
Resume upload: type="file" with accept=".pdf"
Form uses method="post" and enctype="multipart/form-data"
Terms checkbox (required) + Submit and Reset buttons

Where this is used: Job portals (Naukri, LinkedIn), government recruitment, college applications.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/apply.html

apply.htmlHTML

Module 5Module complete

Recap: What You Completed in Module 5

✓Form data travels as name=value pairs
✓form (action, method), label (for), input (id, name)
✓Input types for text, email, tel, date, colour, range, file
✓Radio (one choice) vs checkbox (many)
✓select, optgroup, textarea, datalist
✓Validation: required, min/max, minlength, pattern
✓fieldset + legend; GET vs POST

Coming next

Module 6: Semantic HTML & Page Structure – plan a full page like a professional.

Quick quiz – click an answer

Q1. Which attribute decides the KEY sent to the server?

The server receives name=value.

Q2. Users must pick only ONE payment method. Use:

Radio buttons in one group (same name) allow a single choice.

Q3. Which method should a login form use?

POST keeps the password out of the URL.

MODULE 6

Semantic HTML & Page Structure

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

div soup vs meaningful (semantic) tags
header, nav, main, section, article, aside, footer
Block vs inline elements, div and span
id and class: getting ready for CSS
The head: meta, SEO, favicon; accessibility; validation

You will build

A blog page layout
An SEO-ready head for a coaching site
Mini project: a complete school homepage

Module 6Real-world use

Where Is This Used on a Web Page?

You will find it here

<header>: logo + site name at the top
<nav>: the main menu
<main>: the unique content of this page
<aside>: sidebar – ads, related links, notices
<footer>: copyright, contact, social links

Module 6Semantic HTML

"Div Soup" vs Semantic HTML

✘ Div soup

old.htmlHTML

Everything is a <div>. The browser, Google and screen readers cannot tell what is a menu or a story.

✔ Semantic

new.htmlHTML

Tag names describe the meaning: header, nav, article, footer. Same look, much smarter page.

Semantic = meaningfulBetter Google ranking (SEO), better accessibility, and code that is easier for your team to read.

Module 6Semantic HTML

The Semantic Layout Map

Tag	Meaning	How many?
`<header>`	Intro area: logo, title (page or article)	Many
`<nav>`	Main navigation links	One or more
`<main>`	The main unique content	Only one
`<section>`	A themed group with a heading	Many
`<article>`	Complete on its own: blog post, news, product card	Many
`<aside>`	Side content, related but not essential	Many
`<footer>`	Closing info: copyright, contact	Many

Module 6Semantic HTML

A Complete Semantic Page

school.htmlHTML

file:///D:/my-website/school.html

Looks plain now. In Part 3 the same HTML becomes a 2-column layout with Flexbox/Grid.

Module 6Semantic HTML

article, section or div? A Simple Decision Chart

article: a news story, a blog post, one product card, one comment
section: "Our Courses", "Testimonials", "Contact" blocks on a homepage
div: a box needed only for CSS layout, with no special meaning

Don't panicThere is no single "perfect" answer. Using semantic tags sensibly is far better than only divs.

Module 6Block vs inline

Block vs Inline Elements, div and span

file:///D:/my-website/block-inline.html

Block

New line, full width. divph1-h6ullitableformsection

Inline

Same line, only as wide as content. spanabstrongemimginputlabel

block-inline.htmlHTML

div and span<div> = a generic block box. <span> = a generic inline box. They mean nothing on their own – you use them as hooks for CSS.

RuleDo not put a block element inside an inline one, e.g. a <div> inside a <span>.

Module 6Hooks for CSS

id and class: Names for Your Elements

names.htmlHTML

	id	class
Unique?	Only one element per page	Many elements can share it
Multiple per element?	No	Yes: `class="notice important"`
Used by	Links `#admission`, JavaScript	CSS styling (most common)
CSS selector	`#admission`	`.notice`

NamingUse lowercase and hyphens: main-menu, price-box. No spaces inside one name.

Module 6The head

Inside <head>: Settings, SEO and Favicon

head.htmlHTML

Line	Purpose
viewport	Page fits mobile screens (Module 15)
title	Browser tab + Google result headline
description	Summary under the link on Google
link rel="icon"	Small logo on the browser tab (favicon)
link rel="stylesheet"	Connects your CSS file (Part 2)

sunrisecoaching.in

Sunrise Coaching Bokaro | JEE & NEET Classes

Best JEE and NEET coaching in Bokaro Steel City. Small batches, weekly tests, free demo class.

↑ How Google can show your page: title + meta description

SEOSearch Engine Optimisation = helping Google understand and rank your page. Good titles, descriptions, headings and alt text are free SEO.

Title lengthKeep titles around 50-60 characters and descriptions around 150-160 so they are not cut off.

Module 6Accessibility

Accessibility: A Website for Everyone

♿

Who benefits?

People who are blind (screen readers), have low vision, cannot use a mouse, are elderly, are on a slow phone, or are outside in bright sun. Everyone.

Your HTML checklist

lang on the html tag
One h1, headings in order
alt on every image (empty alt="" for decoration)
Every input has a <label>
Use real <button> and <a>, not clickable divs
Links say where they go: "Download syllabus", not "click here"

Module 6Quality check

Validate Your HTML (Free Spell-check for Code)

1
Go to validator.w3.org
2
Choose Validate by File Upload or Direct Input
3
Paste your code and click Check
4
Fix errors from top to bottom (one error can cause many)
5
Repeat until you see "No errors or warnings"

VS Code helpersInstall the extensions HTMLHint and Prettier. HTMLHint underlines mistakes; Prettier fixes indentation when you save.

Common error	Fix
Element "title" not allowed in body	Move it into head
Unclosed element "p"	Add the closing tag
Duplicate ID "menu"	Each id once only; use class instead
An img element must have an alt	Add alt text
Stray end tag "div"	Remove the extra closing tag

Missing alt 30%
Unclosed tags 25%
Duplicate id 15%
Wrong nesting 20%
Others 10%

Typical beginner mistakes (illustrative mix)

Module 6Live Lab

Live Lab: Write a Semantic Blog Page

blog.html – edit me!

Live preview

TryAdd a second <article> about Netarhat with an image. Add an <aside> with "Popular Posts". Add a meta description in the head.

Module 6Practice Example 1 of 5

Blog Layout with Semantic Tags

BeginnerNeha writes a food blog about Jharkhand dishes. Give her page a proper semantic structure.

Your tasks

<header> with blog name and <nav>
<main> with two <article> posts (heading, date, text)
Each article has its own <footer> with "Posted by Neha"
<aside> with categories list
Page <footer> with copyright

Where this is used: Blogs, news portals, Medium, WordPress themes.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/blog.html

blog.htmlHTML

Module 6Practice Example 2 of 5

Restaurant Homepage Structure

IntermediatePlan the homepage of "Kanke Dhaba" (HTML only, no CSS yet). Use sections for each part of the page.

Your tasks

header with logo image (logo.png) and nav
section "Our Specials" with 3 article cards (image + name + price)
section "Opening Hours" with a small table
section "Contact" with phone link and address
footer with copyright

HintImages next to a heading that says the same thing can use empty alt="" so screen readers do not repeat it.

Where this is used: Restaurant, hotel and shop landing pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/dhaba.html

dhaba.htmlHTML

Module 6Practice Example 3 of 5

Convert Div Soup to Semantic HTML

IntermediateAn old website of a Jamshedpur NGO uses only divs. Rewrite it with semantic tags. Click Try it in the Lab to load the old code.

Your tasks

div#header → <header>
div.menu → <nav> with a <ul> of links
div.content → <main>, each div.news → <article>
div.side → <aside>, div#footer → <footer>
Use real headings instead of div.title

Where this is used: Website redesign projects: making old sites modern and accessible.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/ngo.html

ngo.htmlHTML

Module 6Practice Example 4 of 5

SEO-Ready Head for a Coaching Institute

IntermediateBrainBit Infotech's new course page must look good on Google and on mobiles.

Your tasks

lang="en" and UTF-8
viewport meta tag
Title under 60 characters with course + city
Meta description of about 150 characters
Favicon link + a visible h1 that matches the title

HintThe head is invisible on the page. Check your title on the browser tab, and use View Source.

Where this is used: Every business website that wants customers from Google search.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/course.html

course.htmlHTML

Module 6Practice Example 5 of 5

Mini Project: School Homepage (HTML Only)

AdvancedPut everything from Part 1 together: build the homepage of "Ranchi Public School". You will style this exact file in Parts 2 and 3.

Your tasks

Full skeleton with SEO head
header (logo + name) and nav (list of links)
main: banner image, Notices (list), Toppers (table), Admission enquiry form
aside: contact details with tel/mailto links

HintBuild it section by section and check the preview after each one. Save this file: it is your starting point for Part 2!

Where this is used: This is how every real website starts: structure first, style later.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/rps-home.html

rps-home.htmlHTML

Module 6Module complete

Recap: What You Completed in Module 6

✓Why semantic tags beat div soup
✓header, nav, main, section, article, aside, footer
✓Choosing article vs section vs div
✓Block vs inline; div and span
✓id (unique) vs class (shared)
✓head: viewport, title, description, favicon, stylesheet
✓Accessibility checklist and HTML validation

Coming next

Part 2: CSS Foundations – colours, fonts, boxes and selectors to make your pages beautiful.

Quick quiz – click an answer

Q1. How many <main> elements should a page have?

Only one main per page.

Q2. Which is an INLINE element?

span sits inside a line of text.

Q3. Many elements need the same style. Use:

A class can be shared; an id must be unique.

PART 1 COMPLETE

Well done!

You have finished Part 1 of the Complete HTML + CSS Course.

Continue to Part 2: CSS Foundations ➜ Course index

Modules completed

Module 1: How the Web Works & First Page
Module 2: Text, Headings & Formatting
Module 3: Links, Images & Media
Module 4: Lists & Tables
Module 5: Forms & User Input
Module 6: Semantic HTML & Page Structure

Keep all your practice files in D:\my-website. You will reuse them in the capstone projects.