Leave a Comment / HTML & CSS projects, Coding for kids / By

How to build a HTML & CSS Personal Portfolios for 8 – 20 yr olds

Hey there, future web developers! Whether you’re into drawing, coding game characters, or just want to show off your school projects online, having a personal website is like creating your own digital museum. Imagine showcasing your work with pictures, descriptions, and even links to project demos—all accessible from anywhere in the world!

In this beginner-friendly guide, we’ll walk through how to build an HTML & CSS portfolio step-by-step. No coding experience? No problem! We’ll keep things simple, fun, and super interactive. By the end of this tutorial, you’ll have your very own personal website using HTML & CSS—perfect for students, hobbyists, or anyone looking to start building their digital presence.

Let’s dive right in!

Why Create an HTML & CSS Portfolio?

An HTML & CSS portfolio is not only a great way to show off your creative work but also a fantastic first step into the world of web development. You don’t need any special tools or expensive software—just a text editor (like Notepad or VS Code) and a browser to see your site come to life.

This type of portfolio is perfect for:

  • Students wanting to showcase school projects
  • Young artists sharing drawings or digital art
  • Aspiring game designers showing off game ideas
  • Tech-savvy kids experimenting with code

And the best part? It’s completely customizable and gives you full control over how your site looks and feels.

How to Build an HTML & CSS Portfolio

We’ll build our personal website using HTML & CSS by following four easy levels. Each level builds upon the last, so feel free to follow along at your own pace.

Level 1: Creating the HTML Structure (Ages 7–10)

Think of HTML as the skeleton of your website. It tells the browser what each part of your page is—like headers, paragraphs, images, and more.

Basic HTML File Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML & CSS Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <h1>Hello, I'm [Your Name]!</h1>
    </div>

    <div class="gallery">
        <figure>
            <img src="art-drawing.png" alt="Colored pencil drawing">
            <figcaption>Art Project</figcaption>
        </figure>
        <figure>
            <img src="game-screen.png" alt="Simple game intro screen">
            <figcaption>Coding Game</figcaption>
        </figure>
    </div>

    <div class="contact">
        <p>Contact Me</p>
        <p>Email: kid@example.com</p>
    </div>
</body>
</html>

Explanation:

  • <!DOCTYPE html> – Tells the browser that this is an HTML5 document.
  • <html lang="en"> – Sets the language of the webpage to English.
  • <head> – Contains metadata and external resources like stylesheets.
  • <meta charset="UTF-8"> – Ensures the browser reads special characters correctly.
  • <meta name="viewport"...> – Makes sure the site works well on mobile devices.
  • <title> – This is the title shown in the browser tab. Make it catchy!
  • <link rel="stylesheet"...> – Links your HTML file to your CSS styling file.
  • <body> – Everything inside here is what users will see on the page.
  • <div class="header"> – A container for your header section.
  • <h1> – The main heading of your page.
  • <div class="gallery"> – Holds your project images and captions.
  • <figure> and <figcaption> – Used together to display an image with its description.
  • <img src="..." alt="..."> – Displays an image; always include an alt attribute for accessibility.
  • <div class="contact"> – Shows contact information like your email.

Level 2: Styling with CSS

Now let’s add some color and style! CSS (Cascading Style Sheets) is what makes your HTML look beautiful. Think of it as the paint and decorations for your house blueprint.

Sample CSS File (style.css):

body {
    font-family: Arial, sans-serif;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.header {
    font-size: 36px;
    padding: 30px;
    color: #44d;
    background-color: #eef;
    border-bottom: 2px solid #ccc;
}

.gallery img {
    width: 100%;
    max-width: 200px;
    margin: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.contact {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding: 10px;
    font-size: 18px;
    color: #555;
}

Explanation:

  • body { ... } – Styles the entire webpage. Here, we set the font, color, background, and remove default margins/padding.
  • .header { ... } – Styles the top section. We added padding, background color, and a bottom border.
  • .gallery img { ... } – Styles all images in the gallery. We made them responsive and added shadows and rounded corners.
  • .contact { ... } – Styles the contact info section. Added spacing, a top border, and a lighter text color.

💡 Pro Tip: Try changing colors like #44d (a dark blue) or #eef (light blue background) to match your favorite theme!

Level 3: Creating a Grid Layout

Want to make your projects look neat and organized? Let’s use CSS Grid to arrange your images side-by-side.

Updated HTML:

<div class="gallery">
    <figure>
        <img src="art-drawing.png" alt="Colored pencil drawing">
        <figcaption>Art Project</figcaption>
    </figure>
    <figure>
        <img src="game-screen.png" alt="Simple game intro screen">
        <figcaption>Coding Game</figcaption>
    </figure>
</div>

Updated CSS:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

✅ Line-by-Line Explanation:

  • display: grid; – Turns the gallery into a CSS Grid layout.
  • grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); – Automatically adjusts the number of columns based on screen size. Minimum item width is 200px.
  • gap: 20px; – Adds space between items.
  • padding: 20px; – Gives the gallery some breathing room around the edges.

📱 Level 4: Making It Mobile-Friendly (Responsive Design)

You want your HTML & CSS portfolio to look great on both phones and computers. Let’s make it responsive using media queries.

Responsive CSS:

@media (max-width: 600px) {
    .header {
        font-size: 24px;
        padding: 20px;
    }

    .gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

Explanation:

  • @media (max-width: 600px) – Applies styles only when the screen width is 600 pixels or less (i.e., mobile devices).
  • .header – Adjusts font size and padding for smaller screens.
  • .gallery – On mobile, displays one column instead of multiple and reduces the gap between items.

Final Thoughts: Start Building Today!

Congratulations! You’ve created your very own HTML & CSS portfolio from scratch. This is a big milestone in your coding journey. With practice, you can add more features like animations, interactive forms, or even JavaScript effects.

Remember, the web is ever-evolving, and your portfolio can grow with you. Keep tinkering, exploring, and most importantly—have fun while learning.

Resources you might like

Scroll to Top