Explore | Enquire | Expand
PROJECT UNIT

HTML & CSS

My Personal Website

Design and build a multi-page website about yourself. Learn how to structure webpages using HTML, add images and links, then style your website using CSS.

Start Project → View Journey ↓
HTML and CSS
HTML CSS Project

Project Goal

  • Create a personal website using HTML and CSS.
  • Set up a folder called mywebsite to organise your files.
  • Add headings, paragraphs, images and hyperlinks.
  • Create a second page and link both pages together.
  • Use CSS to improve layout, colours, buttons and navigation.
  • Test your website with a peer and improve it based on feedback.

Starter: What Makes a Good Website?

Before you begin, look at different websites and think about what makes them clear, useful and visually appealing.

What colours work well together?
Is the navigation easy to use?
Are images used effectively?
Is the layout clear?
Does the text stand out?
What makes it look professional?

Finished Website

This is the completed version of the exemplar website. It includes the key elements expected in the final project: two linked pages, images, text, navigation and CSS styling.

Click the button below to open the finished website preview. From there, you can switch between Page 1 and Page 2.

View the Finished Website
YOUR PROJECT JOURNEY

6-Stage Personal Website Project

Stage 1: Getting Started

Goal: Create a new folder called mywebsite, open Notepad or TextEdit, and save your first file as index.html.

  • Create a folder called mywebsite.
  • Open Notepad on Windows or TextEdit on Mac.
  • Save your file as index.html.
  • Keep all website files and images inside the same folder.

Saving in TextEdit on Mac

  • Open TextEdit.
  • Choose Format > Make Plain Text.
  • Choose File > Save.
  • Name the file index.html.
  • Make sure it does not save as index.html.txt.

Saving in Notepad on Windows

  • Open Notepad.
  • Choose File > Save As.
  • Set Save as type to All Files.
  • Name the file index.html.
  • Save it inside your mywebsite folder.
Teacher Tip: If your file opens as plain text, check that it has been saved as .html and not .txt.
Structure

Stage 2: Page Structure

Goal: Build the main content for your homepage using headings, subheadings and paragraphs.

  • Add an h1 heading with your name.
  • Add three h3 subheadings.
  • Write a paragraph for each subheading.
  • Check that your HTML tags open and close correctly.
<!DOCTYPE html>
<html>
<head>
<title> Your title goes here</title>
</head>
<body>
<h1> Your name goes here</h1>
<h3> Your subheading goes here</h3>
<p>Add your paragraph goes here</p>
</body>
</html>
Key Idea: HTML uses tags. Most tags have an opening tag and a closing tag, such as <p> and </p>.
Images

Stage 3: Adding Images

Goal: Add images to your website and resize them so they fit neatly on the page.

  • Save your images inside the mywebsite folder.
  • Use the img tag to add images.
  • Use src to tell the webpage where the image is.
  • Use alt text to describe the image.
<img src="me.jpg" alt="A photo of me">

<img src="football.jpg" alt="Playing football" width="300">

<img src="artwork.png" alt="My artwork" width="250">
Important: The image filename in your code must match the real filename exactly, including capitals, spaces and file type.
Links

Stage 4: Links and a Second Page

Goal: Create a second page and link your webpages together using internal and external hyperlinks.

  • Create a second page, such as gallery.html.
  • Add a gallery or extra information to the second page.
  • Create a link from your homepage to the second page.
  • Create a link back to your homepage.
  • Add one external hyperlink inside a paragraph.
<a href="gallery.html">My Gallery</a>

<a href="index.html">Home</a>

<p>
    I enjoy learning new skills from 
    <a href="https://www.bbc.co.uk/bitesize">BBC Bitesize</a>.
</p>
Remember: Internal links connect pages in your website folder. External links go to websites on the internet.
Divs

Stage 5: Using Divs

Goal: Use div containers to group content and make your page easier to style.

  • Understand that a div is a container.
  • Wrap each section of your page in a div.
  • Add class names to your divs.
  • Prepare your page for CSS styling.
<div class="section">
    <h3>About Myself</h3>
    <p>This section is about me.</p>
</div>

<div class="section">
    <h3>My Interests</h3>
    <p>This section is about my hobbies.</p>
</div>
Think of a div like a box: once your content is inside the box, you can style the whole box using CSS.
CSS

Stage 6: Styling with CSS

Goal: Add CSS to make your website look more professional.

  • Create a file called style.css.
  • Link your CSS file to your HTML page.
  • Change colours, fonts and spacing.
  • Add buttons, borders, rounded corners and a navigation bar.
<link rel="stylesheet" href="style.css">
body {
    background: #f7f5ef;
    font-family: Arial;
}

.section {
    background: white;
    padding: 20px;
    border-radius: 15px;
}

a {
    background: black;
    color: white;
    padding: 10px;
    border-radius: 8px;
}
HTML gives your page structure. CSS changes how that structure looks.

Creative Extensions

Choose at least two extensions. For higher grades, aim for three or more.

Navigation Bar
Styled Buttons
Hover Effects
Image Gallery
Background Image
Contact Page
Embedded Video
Footer Section

How to Achieve Higher Grades

Secure

Working homepage with headings, paragraphs, images and basic links.

Strong

Multi-page website with internal links, external links, divs and clear CSS styling.

Exceptional

Polished website with strong layout, navigation, creative styling, accessibility and original design choices.

Final Submission Checklist

Tick when completed: