HTML & CSS — Basics (Super‑Detailed,
Well‑Designed)
A focused canvas dedicated to HTML & CSS basics: step‑by‑step examples, clear visuals (code
blocks), masterkeys, practical tips, and bite‑sized practice tasks. Perfect for beginners who
want a deep, reliable foundation.
🎯 Goal of this Canvas
By the end you'll be able to:
• Build a semantic HTML page from scratch.
• Style it with organized CSS (external file + best practices).
• Understand the box model, layout (Flexbox basics), and responsive rules.
• Apply accessibility and performance basics.
1) Getting Started — Files & Tools
• Files: index.html , styles.css (external CSS is recommended).
• Editor: VS Code (with Live Server) or any text editor.
• Browser: Chrome/Firefox for DevTools.
How to run
1. Create index.html and styles.css in a folder.
2. Link: <link rel="stylesheet" href="styles.css"> inside <head> .
3. Open index.html in browser or use Live Server.
2) HTML Basics — Structure & Tags (Step‑by‑Step)
2.1 Document skeleton
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Page</title>
<link rel="stylesheet" href="styles.css">
1
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Masterkey: doctype , lang , charset , and viewport = non‑negotiable.
2.2 Common tags & when to use them
• Headings: <h1> (page title) → <h6> (lowest).
• Paragraph: <p> for blocks of text.
• Links: <a href="URL">text</a> (use rel="noopener" for external links).
• Images: <img src="path" alt="description"> (always include alt ).
• Lists: <ul> (unordered), <ol> (ordered), with <li> items.
• Containers: <div> (generic) and semantic containers: <header> , <nav> , <main> ,
<section> , <article> , <aside> , <footer> .
Tip: Use semantic elements for meaning and better SEO.
2.3 Small, complete example (HTML only)
<header>
<h1>Devansh's Notes</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I study, code, and drink chai.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li>Portfolio</li>
<li>Mini‑game</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 Devansh</p>
</footer>
2
3) CSS Basics — Structure & Syntax (Step‑by‑Step)
3.1 Link CSS (external recommended)
Inside <head> :
<link rel="stylesheet" href="styles.css">
3.2 Selector & rule structure
selector { property: value; property2: value2; }
/* example */
h1 { color: #7C3AED; font-size: 2rem; }
3.3 Reset & box‑sizing (first lines in styles.css)
/* styles.css */
* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, Arial, sans-serif; line-height: 1.6; }
💡 Masterkey: box-sizing: border-box removes confusing width calculations.
3.4 Basic page styles (example)
.container { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: 1rem; }
header { padding: 1rem 0; border-bottom: 1px solid #eee; }
h1 { color: var(--brand, #7C3AED); font-size: 2rem; margin: 0; }
4) Box Model — The Core Concept (Explain Like I'm Practical)
• Content: text or image.
• Padding: space inside border.
• Border: line around padding.
• Margin: space outside border.
.box { width: 300px; padding: 16px; border: 2px solid #ddd; margin: 12px; }
3
Tip: vertical margins between elements can collapse — use padding or overflow:auto to avoid surprises.
5) Layout Basics — Flexbox (Practical Starter)
Flexbox is ideal for one‑dimensional layouts: navbars, cards in a row, centering.
5.1 Centering horizontally & vertically
.center { display: flex; align-items: center; justify-content: center; }
5.2 Simple responsive row of cards
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.card { flex: 1 1 220px; padding: 1rem; border: 1px solid #eee; }
Try it: shrink window — cards wrap automatically.
6) Responsive Basics — Media Queries
Mobile‑first pattern: write base styles (mobile) -> add @media (min-width: ...) for larger screens.
/* mobile defaults (stacked) */
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* at tablet and above */
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
Masterkey: use rem or em for breakpoints if you need user‑scalable sizing.
7) Accessibility & Good Habits (Basics)
• Always provide alt for images.
• Use <label for="id"> for form inputs.
• Make interactive elements keyboard focusable (links, buttons).
• Visible focus styles: :focus-visible .
4
• Skip link: <a href="#main" class="skip">Skip to content</a> .
8) Masterkeys & Tips (Practical Shortcuts)
• Structure first: finish HTML skeleton before CSS.
• External CSS: easier to maintain.
• Use classes for styling, not element tags (avoid styling by tag for big projects).
• Box‑sizing: always border-box .
• Use variables for colors: :root { --brand: #7C3AED; } and color: var(--brand);
• Prefer Flexbox for simple layouts; Grid for complex 2D layouts.
• Use `` instead of margins for spacing inside flex/grid.
• Mobile first: easier to scale and smaller CSS.
9) Common Pitfalls & How to Fix
• No spacing working? → check box-sizing or margin collapse.
• Image overflows container → img { max-width:100%; height:auto; } .
• Navbar items not centered → align-items:center; on the nav container.
• Specificity problems → avoid !important ; refactor selectors or use utility classes.
10) Small Practice Tasks (Do these now)
1. Create index.html + styles.css . Build a header, main (with two sections), footer. Style header
and sections.
2. Make a responsive cards grid that shows 1 column on mobile, 2 on tablet, 3 on desktop.
3. Build a simple form (name, email) with labels and validation required . Style inputs and show
focus state.
4. Make a small hero with text + image side by side (stack on mobile). Use Flexbox.
11) Copy‑Paste Starter Template (Ready to Use)
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Starter — Devansh</title>
<link rel="stylesheet" href="styles.css">
5
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header container">
<h1>Devansh</h1>
<nav><a href="#about">About</a> <a href="#projects">Projects</a></nav>
</header>
<main id="main" class="container">
<section id="about">
<h2>About</h2>
<p>Hello — I build stuff and sip chai.</p>
</section>
<section id="projects" class="cards">
<article class="card"><h3>Project A</h3></article>
<article class="card"><h3>Project B</h3></article>
<article class="card"><h3>Project C</h3></article>
</section>
</main>
<footer class="container">
<p>© 2025 Devansh</p>
</footer>
</body>
</html>
styles.css
/* reset + base */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{ font-family: system-ui, sans-serif; line-height:1.6 }
.container{ width: min(100% - 2rem, 72rem); margin:0 auto; padding:1rem }
.skip{ position:absolute; left:8px; top:8px; transform:translateY(-200%); }
.skip:focus{ transform:none }
.site-header{ display:flex; justify-content:space-between; align-items:center;
padding:1rem 0 }
.cards{ display:grid; gap:1rem; grid-template-columns:1fr }
.card{ padding:1rem; border:1px solid #eee; border-radius:8px }
@media(min-width:48rem){ .cards{ grid-template-columns: repeat(2,1fr) } }
@media(min-width:64rem){ .cards{ grid-template-columns: repeat(3,1fr) } }
12) Next steps (if you want me to expand this canvas)
• Add visual diagrams for box model & flexbox (I can create images).
• Add a one‑page printable cheat sheet.
6
• Create downloadable starter files (zipped).
Final quick pep talk
This canvas is your minimal, super‑detailed basics reference. Clone it, practice the tasks, and I’ll help you
level up to advanced layouts and CSS features when you’re ready. 🚀
