HTML HTML5BeginnerHTML
Semantic elements, forms, accessibility attributes, meta tags, and modern HTML5 features.
Document Structure
1 topic
HTML Boilerplate
Standard HTML5 document structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="Page description">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
<script src="app.js"></script>
</body>
</html>💡 Always include lang attribute on html
📌 Place scripts at end of body or use defer
Semantic Elements
1 topic
Layout Elements
Use semantic HTML for meaningful structure
<header>Site header, navigation</header>
<nav>Navigation links</nav>
<main>Primary page content (one per page)</main>
<article>Self-contained content</article>
<section>Thematic grouping</section>
<aside>Sidebar, related content</aside>
<footer>Footer content</footer>
<figure>
<img src="photo.jpg" alt="Description">
<figcaption>Caption text</figcaption>
</figure>💡 Semantic HTML improves SEO and accessibility
📌 Only one <main> element per page
Forms
1 topic
Form Elements
Collect user input with form controls
<form action="/submit" method="POST">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" minlength="8">
<select name="role">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
<textarea name="bio" rows="4"></textarea>
<button type="submit">Submit</button>
</form>💡 Always associate labels with inputs via for/id
⚡ Use built-in validation attributes (required, pattern, min, max)
Related Cheat Sheets
More hands-on references connected to this topic.
ReactReact hooks, component patterns, state management, performance optimisation, and best practices.
shared topics
JavaScriptModern JavaScript — ES6+, arrays, objects, promises, destructuring, and common patterns.
shared topics, same difficulty
Tailwind CSSTailwind utility classes for layout, spacing, typography, flexbox, grid, and responsive design.
shared topics, same difficulty
Vue.jsVue 3 Composition API, reactivity, components, directives, and Pinia state management.
shared topics, same difficulty
Related Articles
Background reading and deeper explanations for this sheet.
AI Helped Me Build 100 Features. It Didn't Bring Me 100 Users.
AI made me faster than ever at building software. Then I opened analytics and realized my biggest bottleneck had moved.
keyword overlap
Customer Retention Strategies in 2026
Customer retention is the key to sustainable business growth. Learn actionable strategies to improve customer loyalty, reduce churn, and deliver exceptional customer experiences using modern CRM practices.
keyword overlap
Handling AI Hallucinations in Real Applications: A Practical Guide for Developers and Product Teams
Hallucinations are one of the biggest blockers to shipping trustworthy AI features. In this practical guide, you’ll learn how to detect, reduce, and contain hallucinations in production with proven patterns, real-world examples, and implementation-ready code.
keyword overlap
Intro to FastAPI: Build a Production-Ready Python API with Real Examples
FastAPI is one of the fastest ways to build modern APIs in Python without sacrificing code quality or developer experience. In this practical, beginner-friendly guide, you’ll learn how to create endpoints, validate data, handle errors, connect a database, secure routes, and prepare your FastAPI app for real-world deployment.
keyword overlap