How-To Guide · 01
HTML & CSS Basics
No fluff. No talking down. This guide treats you like the smart person you are and gives you what you need to build real things.
LESSON 01
What is HTML?
HTML (HyperText Markup Language) is the skeleton of every webpage. It defines what’s on a page — headings, paragraphs, images, links, buttons — using tags that wrap around content. HTML isn’t a programming language — it’s a markup language: you’re labeling content so the browser knows what to do with it.
.html and open it in your browser. No installs, no accounts. Your browser is already your dev environment.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</body>
</html>LESSON 02
The Tags You’ll Use Every Day
HTML has hundreds of tags, but you’ll use about 15 of them 90% of the time. Here are the essential ones:
<!-- HEADINGS — h1 is biggest, h6 is smallest -->
<h1>Page Title</h1>
<h2>Section Heading</h2>
<!-- TEXT -->
<p>Paragraph of text.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<!-- LINKS -->
<a href="https://hotgirlzcode.com">Click here</a>
<!-- IMAGES -->
<img src="logo.png" alt="Description of image"/>
<!-- LISTS -->
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<!-- CONTAINER -->
<div class="card">Group elements together</div>
<!-- BUTTON -->
<button>Click Me</button>LESSON 03
What is CSS?
CSS (Cascading Style Sheets) controls how your HTML looks. Color, font, size, spacing, layout — all CSS. CSS works by targeting an HTML element with a selector and applying properties to it.
padding = space inside. margin = space outside. border = the edge. Understand this and layouts click./* Target by tag */
h1 {
color: #FF1A8C;
font-size: 2rem;
}
/* Target by class (prefix with .) */
.card {
background: #111;
border: 1px solid #333;
border-radius: 12px;
padding: 24px;
}
/* Target by id (prefix with #) */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
}LESSON 04
Layout with Flexbox
Flexbox arranges things side by side, centered, or spaced out. Apply it to a container and it controls how its children are positioned.
/* Nav: logo left, links right */
.navbar {
display: flex;
justify-content: space-between; /* push to opposite ends */
align-items: center; /* vertically center */
padding: 16px 32px;
}
/* Center something on screen */
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* Card row that wraps on small screens */
.card-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}LESSON 05
Your First Complete Page
Copy this into a file named index.html and open it in your browser. It’s a working webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Portfolio</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; color:#fff; font-family:sans-serif; }
.hero {
display:flex; flex-direction:column;
align-items:center; justify-content:center;
min-height:100vh; text-align:center; gap:20px;
}
h1 { font-size:3rem; color:#FF1A8C; }
p { color:#aaa; max-width:400px; line-height:1.6; }
.btn {
background:#FF1A8C; color:#fff;
padding:12px 28px; border-radius:50px;
text-decoration:none; font-weight:bold;
}
</style>
</head>
<body>
<div class="hero">
<h1>Hi, I'm [Your Name]</h1>
<p>I build things for the web. Learning every day.</p>
<a href="mailto:you@email.com" class="btn">Say Hello</a>
</div>
</body>
</html>