Get the FREE Ultimate OpenClaw Setup Guide →

web-basics

Scanned
npx machina-cli add skill DojoCodingLabs/code-sensei/web-basics --openclaw
Files (1)
SKILL.md
2.4 KB

Web Basics — CodeSensei Teaching Module

HTML

  • Analogy: HTML is the skeleton of a webpage. It defines the structure — where the heading goes, where the paragraph goes, where the image goes. Like the blueprint of a house showing where rooms are.
  • Key insight: HTML uses "tags" that come in pairs: <tag>content</tag>. The tag tells the browser what KIND of content it is.
  • Key tags to teach:
    • <h1> to <h6> — headings (h1 is the biggest, like a newspaper headline)
    • <p> — paragraph (a block of text)
    • <a> — link (a door to another page)
    • <img> — image (a picture on the wall)
    • <div> — container (a box that groups things together)
    • <form> — form (like a paper form you fill out)
    • <button> — a clickable button
  • Quiz idea: "If you wanted to add a clickable link to Google, which tag would you use?"

CSS

  • Analogy: CSS is the paint, wallpaper, and furniture of the house. HTML says "there's a heading here," CSS says "make it blue, centered, and 32px big."
  • Key insight: CSS works by SELECTING an HTML element and then STYLING it. It's always: "who are you targeting?" + "what should they look like?"
  • Key concepts:
    • Selectors (which elements to style)
    • Properties (what to change: color, size, position)
    • Values (the specific setting: red, 16px, center)
    • Classes (reusable style labels, like "VIP" or "highlighted")
  • Quiz idea: "If the text is too small, which file would you change — the HTML or the CSS?"

How Browsers Work

  • Analogy: A browser is like a translator + artist. It reads your HTML (the instructions), applies your CSS (the design specs), and paints the result on screen.
  • Key insight: When someone visits your site, the browser downloads your files and assembles them in real-time. That's why you see the page "load."
  • Teaching flow: User types URL → Browser requests files from server → Server sends HTML/CSS/JS → Browser assembles and displays the page

The Relationship

HTML = Structure (what's on the page)
CSS  = Style (how it looks)
JS   = Behavior (what it does)

Think of it as: HTML is the house frame, CSS is the interior design, JavaScript is the electricity and plumbing that makes things work.

Source

git clone https://github.com/DojoCodingLabs/code-sensei/blob/main/skills/web-basics/SKILL.mdView on GitHub

Overview

Web Basics introduces the core building blocks of the web: HTML structures, CSS styling, and how browsers render pages. It clarifies how code creates structure, presentation, and rendering, especially when editing HTML or CSS files in CodeSensei sessions. This module uses practical analogies to help Claude explain web fundamentals.

How This Skill Works

HTML defines the page structure with tags, while CSS selects those elements and applies visual styles. When a browser loads a site, it downloads HTML and CSS, then renders the page by applying the styles to the structure. The teaching flow covers URL input, file requests, and real-time assembly of the final page.

When to Use It

  • Teaching HTML structure and common tags (h1–h6, p, a, img, div, form, button).
  • Explaining CSS concepts: selectors, properties, values, and classes.
  • Describing how browsers work: request, download, and render.
  • When Claude edits or creates .html or .css files to reinforce fundamentals.
  • Debugging or reviewing a static page to improve structure or styling.

Quick Start

  1. Step 1: Create index.html with a basic HTML skeleton and a few tags (h1, p, img).
  2. Step 2: Create styles.css, select elements (body, h1, p) and add color, font-size, and alignment; link CSS in HTML.
  3. Step 3: Open the HTML file in a browser to see rendering and observe how HTML structure and CSS styles are applied.

Best Practices

  • Use semantic HTML tags to convey meaning (e.g., h1–h6 for headings, p for paragraphs, nav for navigation).
  • Keep content structure in HTML separate from presentation; style with CSS, not inline styles.
  • Teach CSS via selectors, then demonstrate properties and values with concrete examples.
  • Explain the browser render flow (request, download, parse, paint) to connect code to visuals.
  • Test pages across browsers and viewports to ensure consistent layout and styling.

Example Use Cases

  • Build a small homepage with header, main content, and footer.
  • Create a simple post with headings, paragraphs, and an image using HTML tags.
  • Add a link to another page with the a tag and demonstrate target behavior.
  • Style typography and layout with a separate CSS file (color, font-size, alignment).
  • Add a basic form (input + button) to illustrate structure and submission flow.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗