HTML & CSS Introduction

Explore & Discover

Right-click on any webpage and choose "Inspect" or "View Page Source" — you just looked at the actual code behind the internet. Every website you've ever visited is built with HTML and CSS, and now you can see it. HTML is the skeleton: it defines what's on the page (headings, paragraphs, images, links). CSS is the style: it controls colors, fonts, layouts, and how everything looks. Browse to a few of your favorite sites and poke around in the inspector. Try changing some text or colors right in the browser — your changes only last until you refresh, but it's a great way to see how things connect. You're ready for the next step when you can identify at least five different HTML tags on a real webpage and explain what each one does.

Learn the Basics

Head to freeCodeCamp.org and start the "Responsive Web Design" certification — the first few sections cover exactly what you need. You'll learn the most important HTML tags: headings (h1–h6), paragraphs (p), links (a), images (img), and containers (div). Then you'll learn CSS basics: how to select elements, change colors with hex codes, set font sizes, and add spacing with margin and padding. Khan Academy's "Intro to HTML/CSS" course is another great option if you prefer videos. Do both if you're curious — they complement each other well. You're ready for the next step when you can write a basic HTML page from scratch with a title, at least two paragraphs, a link, and a styled heading — all without looking it up.

Build Your First Project

Build your first real webpage — a personal about page. Open a text editor (VS Code is free and what most developers use; Notepad works too) and create a file called index.html. Your page needs: your name as an h1 heading, a short bio paragraph, a list of three things you're interested in, one image, and at least three CSS rules in a linked stylesheet that change colors and fonts. Don't copy-paste from tutorials — type it out. Making typos and fixing them is how your brain actually learns this stuff. Try opening your file in a browser as you go so you can see changes in real time. You're ready for the next step when you have a working index.html file that opens in your browser and shows all the required elements styled the way you want.

Experiment & Iterate

Now make your page more interesting by experimenting with layout and interactivity. Learn CSS Flexbox — it's the tool that lets you arrange things side by side, center them, and build navigation bars. CSS-Tricks has a fantastic free "Complete Guide to Flexbox" article with visual examples. Try building a simple nav bar across the top of your page, a two-column layout (sidebar + main content), and a grid of image cards. Then add a hover effect: use CSS to change a button's color when your mouse moves over it. Each time something doesn't look right, use the browser inspector to figure out why. You're ready for the next step when you've built a layout with at least two columns and a nav bar that uses Flexbox.

Advanced Techniques

Go deeper with responsive design and CSS variables. Responsive design means your page looks good on a phone, a tablet, and a computer screen — not just one size. Learn media queries: CSS rules that only activate at certain screen widths. Open your browser's DevTools, switch to mobile view, and see how your current page breaks. Fix it. Then learn CSS custom properties (variables) — they let you define your color palette once and reuse it everywhere. Smashing Magazine and MDN Web Docs (developer.mozilla.org) are your best free references for advanced CSS. Try recreating a simplified version of a Utah-based website like visitutah.com or slc.gov just as a layout exercise. You're ready for the next step when your page looks correct on both a phone screen and a desktop screen.

Final Project Showcase

Your final project is a multi-page website with at least three linked HTML pages. Pick something you actually care about: a fan site for a game, a guide to your favorite Utah hiking trails, a portfolio of your creative work, or a resource page for something you know a lot about. Each page needs its own content, consistent navigation, and a shared CSS stylesheet. When it's done, publish it for free using GitHub Pages (free at github.com) or Netlify (free at netlify.com) — your site gets a real URL you can share. Show it to someone who doesn't code and ask them to click around. You're ready for the next step when your site is live on the internet with a real URL, has three pages, and someone else can navigate it without getting confused.