# Web Basics

> >

- **Type:** Skill
- **Install:** `agentstack add skill-dojocodinglabs-code-sensei-web-basics`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DojoCodingLabs](https://agentstack.voostack.com/s/dojocodinglabs)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DojoCodingLabs](https://github.com/DojoCodingLabs)
- **Source:** https://github.com/DojoCodingLabs/code-sensei/tree/main/skills/web-basics
- **Website:** https://github.com/DojoCodingLabs/code-sensei

## Install

```sh
agentstack add skill-dojocodinglabs-code-sensei-web-basics
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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: `content`. The tag tells the browser what KIND of content it is.
- **Key tags to teach:**
  - `` to `` — headings (h1 is the biggest, like a newspaper headline)
  - `` — paragraph (a block of text)
  - `` — link (a door to another page)
  - `` — image (a picture on the wall)
  - `` — container (a box that groups things together)
  - `` — form (like a paper form you fill out)
  - `` — 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 & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DojoCodingLabs](https://github.com/DojoCodingLabs)
- **Source:** [DojoCodingLabs/code-sensei](https://github.com/DojoCodingLabs/code-sensei)
- **License:** MIT
- **Homepage:** https://github.com/DojoCodingLabs/code-sensei

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dojocodinglabs-code-sensei-web-basics
- Seller: https://agentstack.voostack.com/s/dojocodinglabs
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.