Module 2: Fundamentals of Website Design – Your Step-by-Step Guide

Hey future web designers! 🌍✨

This module is your hands-on toolkit to build and style real web pages. Let's walk through it together:

Part 1: HTML – The Skeleton of Your Page


HTML (HyperText Markup Language).
HTML is the standard language for creating web pages. It structures content using elements like headings, paragraphs, and links. Browsers read HTML to display text, images, and multimedia.

What you'll do:

  1. Write your first proper HTML file (it's like creating a blank document before writing an essay).
  2. Use these key tags:
    • <h1> for main headings (like a book title)
    • <p> for paragraphs (like these instructions)
    • <a href="..."> to link to other pages (like a doorbell to ring another room)
    • <img src="..."> to add images (like hanging a picture on a wall)

Try this now:

<h1>My Favorite Recipe</h1>

<p>Learn to make perfect scrambled eggs!</p>

<img src="eggs.jpg">

<a href="more-recipes.html">See more recipes</a>

→ Save this as recipe.html and open it in a browser. Congrats, you just built a webpage!


Part 2: CSS – The Designer's Paintbrush


CSS (Cascading Style Sheets).
CSS styles HTML elements, controlling layout, colors, fonts, and responsiveness. It separates design from content, enabling consistent styling across multiple pages. CSS3 added animations and flexible layouts.

What you'll learn:

  • How to make your HTML look professional (no more boring black-and-white pages!).
  • The 3 most important CSS rules: 
    h1 { color: blue; }                   /* Changes heading color */

p { font-size: 18px; }               /* Makes text larger */

img { border: 2px solid black; }     /* Adds a frame to images */

Your mission:

  1. Create a style.css file.
  2. Link it to your HTML with <link rel="stylesheet" href="style.css"> in the <head>.
  3. Play with colors/fonts—what happens if you change blue to #ff5733?


Part 3: The Box Model – Your Layout Superpower

Ever wondered why web elements have spacing? This diagram explains it:

[MARGIN]  

  [BORDER]  

    [PADDING]  

      [YOUR CONTENT]

Try this challenge:

img {

  padding: 20px;

  margin: 10px;

  border: 3px dotted red;

}

→ See how the image gets "breathing room"? That's the box model in action!


Download the PDF file to get a digital copy of everything explained so far.

HTML PDF 

CSS PDF 


Why This Matters

  • Every website you use (Facebook, YouTube) combines HTML/CSS this way.
  • These skills are the foundation for learning advanced topics later.

Pro Tip: Right-click any webpage → "Inspect" to see how pros use HTML/CSS!

What's Next?

  • Project: Build a simple "About My Hobby" page (due 7 days from now).
  • Coming Soon: In Module 3, we'll make buttons actually do things with JavaScript, UX/UI Design, and More!

Remember: Every expert was once a beginner. Keep coding, keep experimenting! 💻🎨

— Areteclass

P.S. Hit comment if you get stuck—I'm here to help!

Knowledge Check: Web Design Fundamentals Quiz

1. Which HTML tag would you use for a main page heading?

2. What CSS property changes text color?

3. Which part of the box model creates space between elements?

4. How do you link a CSS file to HTML?

5. What does this CSS rule do? img { border: 2px solid red; }

Post a Comment