ToolScope Notes

HTML Notes in Simple English — Code Scope

Free HTML notes for beginners: page skeleton, headings, links, images, lists, tables, forms, semantic HTML, divs, classes and ids — with code examples, common mistakes and practice tasks. From the Code Scope HTML series.

9 HTML lessons Read online — free PDF download for every lesson Video with every lesson

All Series Notes

10 OF 10 READY · NEW SETS LAND WITH EVERY DEPLOY

Notes for every Code Scope series, in the same format: read the lesson online, or download its free PDF. Sets marked "Notes coming soon" are in production — their cards turn into live notes in a coming deploy, so nobody ever lands on an empty page.

HTML9 topics ready

The skeleton of every web page — structure, headings, links, images, lists, tables and forms, from your very first page.

Read the notes
CSS14 topics ready

Give your pages a look — colours, spacing, Flexbox, Grid, and pages that fit every phone. Lessons 2.1–2.14.

Read the notes
JavaScript26 topics ready

Make pages alive — variables, logic, the DOM, events, async and real projects. Lessons 3.1–3.26.

Read the notes
React26 topics ready

Build modern app interfaces with components, props, state and hooks. Lessons 5.1–5.26.

Read the notes
Git & GitHub10 topics ready

Save the history of your code and work with a team — commits, branches, pull requests and undoing anything. Lessons 4.1 + G.2–G.10.

Read the notes
SQL12 topics ready

Ask questions from databases — tables, SELECT, joins and real data work. Lessons DB.1–DB.12.

Read the notes
MongoDB11 topics ready

The NoSQL way of storing data — documents, collections, queries, Mongoose and aggregation for modern apps. Lessons MG.1–MG.11.

Read the notes
Laravel20 topics ready

PHP's famous framework — routes, Blade, Eloquent, auth, REST APIs and full projects, from first route to deployment. Lessons LV.1–LV.20.

Read the notes
Node.js & Express11 topics ready

JavaScript on the server — your first server, routes, middleware, a full CRUD API, JWT login and real backend projects. Lessons N.1–N.11.

Read the notes
Dart & Flutter16 topics ready

One codebase, real Android apps — the Dart language step by step (D.1–D.11), then Flutter widgets, layouts and a full app (F.1–F.5).

Read the notes
New · Learn AI AI se kaam karwana seekho — prompt gallery Prompt likhna aik skill hai. One free lesson (acha prompt likhne ke 5 usool) + 30 ready-made prompts for study, images, writing, coding and earning — copy, paste, done. Open Learn AI

HTML Notes

9 LESSONS · CODE SCOPE SERIES 1.1–1.9

Start from zero: what HTML is, your first page, then headings, links, images, lists, tables, forms, semantic tags and one full mini project. Simple English, short Roman-Urdu help lines, code you can copy, mistakes to avoid and practice tasks at the end of every lesson.

Lesson 1.1

HTML Kya Hai? + Your First Page

What is HTML? The page skeleton (doctype, html, head, body), your first tags, and how to save and open your first web page.

Read the notes Video
Lesson 1.2

Headings, Paragraphs & Text Formatting

h1 to h6 headings, the one-h1 rule, the p tag, and formatting tags like strong, em, mark and code.

Read the notes Video
Lesson 1.3

Links & Images

The a tag and href, target _blank, absolute vs relative paths, and the img tag with alt text — plus fixing a broken image.

Read the notes Video
Lesson 1.4 (Short)

Lists (ul / ol / dl)

ul for bullets, ol for numbered steps, dl for term-and-meaning pairs — plus the type attribute bonus.

Read the notes Video
Lesson 1.5

HTML Tables

table, tr, th, td, thead, tbody, and merging cells with rowspan and colspan — student marks table example.

Read the notes Video
Lesson 1.6

Forms & Inputs (text, radio, checkbox, select)

form and input tags, labels, radio vs checkbox, select dropdowns, required, and button types — a full signup form.

Read the notes Video
Lesson 1.7

Semantic HTML (header, nav, main, footer)

header, nav, main, section, article, footer — what each means, and why Google and screen readers love them.

Read the notes Video
Lesson 1.8 (Short)

Divs, Classes & IDs

div is a box, class is a group name, id is a unique name — and how CSS finds them with . and #.

Read the notes Video
Lesson 1.9

Mini Project: Personal Profile Page

A complete profile page in 6 stages: structure, photo, lists, table, links and a contact form.

Read the notes Video