First Mini Project: Build a Personal Portfolio Page Using Only HTML

By -

 Now that you’ve learned the basics of HTML—tags, lists, tables, forms, and semantic structure—it’s time for something exciting: your first real mini project.

This project will help you apply everything you’ve learned so far and create a simple but meaningful output: a personal portfolio page using only HTML.

No CSS. No JavaScript. Just pure HTML.

Why Build a Portfolio as Your First Project?

A personal portfolio is perfect for beginners because:

  • It’s simple but practical
  • You can finish it in one day
  • It shows real progress
  • You can improve it later with CSS & JavaScript
  • It builds confidence

By the end, you’ll have a webpage you can proudly say: “I built this myself.”

What You’ll Build

A single HTML page that includes:

  • Your name and introduction

  • About Me section

  • Skills list

  • Education or experience

  • Contact form

  • Footer

All using basic HTML tags you already know. It will look like this:

I know it doesn't looks cool right but we are here making foundation of our building, we are not styling it right now, we aren't painting our building right now, we will do styling when we learn CSS, right now we are only learning html to keep things simple and clean.

Project Structure

Create one file:

index.html

That’s it. Simple and beginner-friendly like this one:

Step 1: Basic HTML Structure

Start with the basic HTML skeleton:

<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
</head>
<body>
</body>
</html>

This sets up your webpage properly.

Step 2: Header Section

Add your name and role:

<header>
  <h1>Your Name</h1>
  <p>Beginner Web Developer</p>
</header>

This introduces who you are.

Step 3: About Me Section

<section>
  <h2>About Me</h2>
  <p>
    I am learning web development and this is my first HTML project.
    I enjoy building simple websites and improving my skills every day.
  </p>
</section>

Keep it short and honest.

Step 4: Skills Section

Use lists to show what you know:

<section>
  <h2>Skills</h2>
  <ul>
    <li>HTML</li>
    <li>Basic Programming</li>
    <li>Problem Solving</li>
  </ul>
</section>

Step 5: Education or Experience

<section>
  <h2>Education</h2>
  <p>Currently learning web development and programming fundamentals.</p>
</section>

You don’t need job experience—learning counts.

Step 6: Contact Form

Add a simple contact form:

<section>
  <h2>Contact Me</h2>
  <form>
    <label>Name:</label><br>
    <input type="text"><br><br>

    <label>Email:</label><br>
    <input type="email"><br><br>

    <label>Message:</label><br>
    <textarea rows="4"></textarea><br><br>

    <button type="submit">Send</button>
  </form>
</section>

This introduces real-world interaction.

Step 7: Footer

<footer>
  <p>© 2026 Your Name. All rights reserved.</p>
</footer>
It will overall look like this:

What You Learned From This Project

By completing this mini project, you practiced:

  • HTML structure
  • Semantic elements
  • Headings and paragraphs
  • Lists
  • Forms
  • Real-world page layout

This is your first complete webpage.

Common Beginner Mistakes

  • Trying to make it perfect
  • Adding CSS too early
  • Copy-pasting without understanding
  • Comparing with advanced portfolios

Remember: progress > perfection.

How to Improve This Project Later

Once you learn more, you can:

  • Add CSS for styling

  • Make it responsive

  • Add JavaScript for form validation

  • Turn it into a multi-page site

But for now, HTML only is a big win.

Conclusion

This mini project marks an important milestone in your learning journey. It’s your first real output, built entirely with HTML. Every developer starts here, and finishing this project means you’re officially on the path to becoming a web developer.

Save this file. Look back at it one day.
You’ll be surprised how far you’ve come.

Comments

Post a Comment

Popular posts from this blog

Numbers & Numeric Operations in C++: Data Types & cmath Functions

By -
Image
Introduction Numbers are at the core of almost every C++ program, whether you’re performing calculations, storing values, managing user input, or building complex logic. C++ provides several numeric data types—such as int , float , double , and long —to handle different kinds of numerical information efficiently. Understanding how these numbers work, how they are stored, and how to perform operations on them is essential for beginners. In this blog post, we’ll explore the different types of numbers in C++, how they behave, and how you can use them to perform mathematical tasks in your programs. Let’s Explore Numbers & Numeric Operations in C++ Today, we are performing mathematical operations in C++. We will include the include<cmath> library in our code, this library gives us a lot of functions, and methods that help us to perform mathematical operations. In this post, we are going to learn about functions like fmin(*, *) fmax(*, *) floor(*) ceil(*) and round(*...
Read more

Introduction to C++: Your First Program & Hello World

By -
Image
Introduction Programming always begins with a simple but powerful first step — printing “Hello, World!” to the screen. For beginners, this small program acts as an introduction to the basic structure, syntax, and workflow of a programming language. In C++, the “ Hello World ” program helps new learners understand how a C++ program is written, compiled, and executed. In this post, we’ll look at the C++ code for printing “ Hello World ”, break down every part of it, and explain how it works in the simplest way possible. Let’s Write Your First C++ Program Today we are learning about cout and endl Cout stands for " Console out " and endl stands for " End line ". Overall, We use cout to print output in our console and endl to start a new line after the execution of each cout. Using endl is optional but cout is mandatory to get output in our console. Also, we use the " << " sign when we use cout and endl. The overall statement looks like this: cout ...
Read more

Intro to C++ for Beginners

By -
Image
Hi, I’m Taiel , the writer of this blog, and this is the first post on C++ in the tech and programming blog . Let’s get started without any delay. If you’re new to C++, you don’t need any heavy setup at first. For practice, you can use tools like OnlineGDB, Programmiz, Scrimba, or Visual Studio . These platforms allow you to write, compile, and run C++ programs easily, making them perfect for beginners. Introduction C++ is a high-level, general-purpose programming language created by Bjarne Stroustrup . It was first released in 1985 as an extension of the C language. The main goal was to add more flexibility and features, such as object-oriented programming , while maintaining performance and efficiency. Over time, C++ has evolved to include templates for generic programming , functional programming support , and low-level memory control . Because of these features, it is widely used to build performance-critical systems such as operating systems and embedded software . C++ is a comp...
Read more

User Input in C++: Reading Data from Keyboard with cin & getline()

By -
Image
Introduction Getting user input is an essential part of making interactive C++ programs. Instead of displaying fixed outputs, programs can ask users for information—such as numbers, names, or choices—and respond based on those inputs. In C++, user input is commonly taken using the cin object along with the extraction operator ( >> ). This allows beginners to easily read values like integers, floating-point numbers, characters, and even entire strings. In this blog post, we’ll explore how user input works in C++, look at important functions, and understand how to handle input safely and correctly. Let’s Explore User Input in C++ Today, We are getting the user input and printing it out in a very creative manner. This is not only going to teach you how to get user input but also how to print them with strings, where the string is set as default. To get user input, we use cin meaning console in , and instead of using this sign << we will use this sign >> to get user...
Read more

Mad Libs Game in C++: Build Your First Interactive Program

By -
Image
Introduction One of the best ways to understand the basics of C++ is by building small, fun projects—and a Mad Libs game is a perfect example. This simple word-based game lets users enter different types of words like nouns, verbs, or adjectives, and the program places them into a story template to create a funny or unexpected result. By making a Mad Libs game in C++, beginners can practice key concepts such as variables, strings, user input, and output formatting. In this blog post, we’ll walk through how a basic Mad Libs program works and how it helps strengthen your overall understanding of C++. Let’s Build a Mad Libs Game in C++ Today, we are going to make a Mad Libs Game using C++ . To make the game, we are going to use the combinations of getline(); //function and cout //in our text editor Now, Here's our code, so you can understand better: As you can see, Our game is ready to play. Important Notes While building a simple game like Mad Libs in C++, beg...
Read more

Strings in C++: Basics, Methods & Examples

By -
Image
Introduction Strings are one of the most useful and frequently used features in C++ programming. They allow us to store and work with text, such as names, messages, sentences, and any sequence of characters. In C++, strings can be handled using both character arrays ( char[] ) and the modern string class from the Standard Library, which makes working with text much easier. In this blog, we’ll explore what strings are, how they work in C++, and look at practical examples of declaring, modifying, and accessing string data. Understanding strings is essential for building real-world applications like user input systems, text processing tools, and interactive programs. Let’s Explore Strings in C++ Today, we are learning about some methods, indexing characters, and replacing some letters without needing to rewrite the code. Also, we will use " \n " in some places instead of " endl " to print a new line in our code. Index numbers in programming languages start from 0 li...
Read more

Variables & Data Types in C++: Basics with Examples

By -
Image
Introduction Understanding variables and data types is one of the first and most important steps in learning C++. Variables act as containers that store different kinds of information, while data types define what kind of values those variables can hold—such as numbers, characters, or true/false values. Together, they form the foundation of every C++ program. In this blog, we’ll explore what variables are, why data types matter, and how C++ uses a variety of types like int , float , char , bool , and more. This topic is essential for beginners who want to write efficient, error-free programs. Let’s Explore Variables & Data Types in C++ Today, We are learning about Data Types and Variables , and how to use them in C++. In programming languages we use variables most of the time, variables are like boxes that contain elements like sentences, characters, integers, decimals, and boolean values . Variables are defined into multiple types, also known as Data Types. In the case of data t...
Read more

Printing Patterns in C++: Shape Output with Loops & Logic

By -
Image
Introduction Printing shapes using C++ is a fun and effective way for beginners to practice loops, conditions, and pattern-building logic. Whether it’s a square, triangle, pyramid, or diamond, these patterns help new programmers understand how nested loops work and how characters like * , # , or numbers can be arranged to create visual output. In this blog post, we’ll explore how to print different shapes in C++, look at the code behind them, and explain how the loops interact to form each pattern. This is one of the best ways to strengthen logical thinking and improve your problem-solving skills in C++. Let’s Print Patterns with Loops in C++ Today, we will print out shapes like pyramids and stairs using C++. It means today we are going to use this in multiple sentence: cout << * << endl; Yesterday, In the printing "Hello World" using C++  blog post we used this sentence only once but today we are going to use it multiple times, so if any of you don't know h...
Read more

Return Statement in C++: Syntax, Purpose & Examples

By -
Image
Introduction The return statement is one of the most important parts of a C++ function. It allows a function to send a value back to the place where it was called and also marks the end of the function’s execution. Whether you are working with simple functions or building more complex programs, understanding how the return statement works is essential. In this blog, we’ll explore what the return statement does, why it is used, how it behaves in different types of functions, and how it helps in writing cleaner and more efficient C++ code. This topic is crucial for beginners who want to strengthen their function-related concepts. Let’s Explore the Return Statement in C++ Today, we are going to return results from functions to main function. It is very easy to use return statement but return statement doesn't works on void() function. This is an example of return statement: return A; Where " A " is a variable and the word " return " passes the outcome from the ...
Read more

Functions in C++: Syntax, Use & Examples

By -
Image
Introduction Functions are one of the most important concepts in C++ because they allow you to break your program into smaller, manageable pieces. Instead of writing all your code inside the main() function, you can create separate blocks of code—called functions—that perform specific tasks. This makes your program easier to read, understand, reuse, and debug. In this blog post, we’ll explore what functions are, how they work in C++, the different types of functions, and why they are essential for writing clean and organized programs. Whether you're a beginner or building your first projects, understanding functions will significantly improve your coding skills. Let’s Explore Functions in C++ Today, we are going to create Functions . Functions performs a set of commands by using a set of data, e.g. int main() //It is also a kind of a function which runs some of our commands in our program. Functions are very helpful as we don't need to create same commands multiple time, he...
Read more