Web Design Basics

Explore & Discover

Every website you've ever visited was built by someone who started exactly where you are. Open your browser and right-click on any webpage, then choose "Inspect" or "View Page Source" — you're now looking at the actual code that makes the page appear. Spend time on websites you think look great and websites you think look terrible. What's the difference? Check out awwwards.com for examples of award-winning web design, and look at CSS Zen Garden (csszengarden.com) where the same HTML content is styled dozens of completely different ways. You're ready for the next step when you can describe three specific design choices — colors, layout, fonts, spacing — that make a website feel good or bad to use.

Learn the Basics

HTML is the skeleton of every webpage, and CSS is the skin. Start at freeCodeCamp.org — their "Responsive Web Design" certification is free and walks you through both from scratch. Work through the first four lessons on HTML structure: headings, paragraphs, images, and links. Then try CSS basics: changing colors, fonts, and sizes. Use VS Code (free at code.visualstudio.com) as your editor and install the "Live Server" extension so your page reloads automatically as you type. Don't just read — type every example yourself. Your fingers need to learn this too. You're ready for the next step when you've built a basic webpage from scratch that has a heading, a paragraph, an image, a link, and at least three CSS style rules.

Build Your First Project

Build your first real website — a personal homepage or a site about something you actually care about. It could be your favorite Utah hiking trails, a band you love, or a portfolio of projects. Your site needs at least three pages linked together: a home page, an about page, and one more of your choice. Use Flexbox for layout (search "CSS Flexbox tutorial" — Flexbox Froggy at flexboxfroggy.com teaches it through a game). Pick a Google Font from fonts.google.com and use it throughout. Choose a color palette of two to three colors that work together — coolors.co generates palettes for free. You're ready for the next step when you have a three-page website with consistent fonts, colors, and navigation between pages.

Experiment & Iterate

Most people browse the web on their phones — your site needs to work on every screen size. Learn responsive design by adding CSS media queries that change your layout at different widths. Try building a navigation menu that collapses into a hamburger icon on mobile. Experiment with CSS Grid (search "CSS Grid Garden" for a free game that teaches it) alongside Flexbox to create more complex layouts. Deploy your site live using GitHub Pages — it's free, and you'll have a real URL to share. Create a GitHub account at github.com, push your code, and enable GitHub Pages in settings. You're ready for the next step when your site has a live URL and looks good on both a phone screen and a laptop screen.

Advanced Techniques

Move beyond static pages with three advanced techniques: CSS animations, JavaScript interactivity, and accessibility. For animations, use CSS transitions and keyframes to make elements fade in, slide, or pulse. For JavaScript, add a dark mode toggle button — when clicked, it switches a CSS class on the page body. Search "JavaScript dark mode toggle tutorial" for a walkthrough. For accessibility, run your site through Google's Lighthouse tool (built into Chrome DevTools) and fix every red accessibility issue — this means your site works for people using screen readers, which also makes it rank better in Google. You're ready for the next step when your site passes Lighthouse accessibility checks and has at least one working JavaScript interaction.

Final Project Showcase

Design and build a complete website for a real purpose — a local Utah business, a community organization, an event, or a personal portfolio you'd actually show to people. Your final site must have: a polished home page with a clear headline and call to action, at least four pages, responsive layout that works on mobile, a contact form (use Formspree.io for free form handling), custom fonts and a consistent color system, and zero broken links. Get feedback from two people who aren't you — watch them try to use the site without any explanation and note where they get confused. Fix at least one thing based on their feedback. You're ready for the next step when your site is live, shared with real people, and you've made at least one revision based on actual feedback.