** How to Build a Simple Portfolio Website Using HTML and CSS**

If you are learning web development, building a personal portfolio website is one of the best projects to start with. It helps you practice HTML and CSS while creating something you can use to showcase your skills, projects, and experience... Read More

A portfolio website is a personal website where you introduce yourself, display your work, and provide contact information. Whether you are a student, beginner web developer, freelancer, or designer, having a portfolio can help you build an online presence... Read More

In this tutorial, we will learn how to create a simple, responsive portfolio website using only HTML and CSS. No JavaScript or external libraries are required

*## 1. What You Will Build
*
Our portfolio website will include the following sections:

• Home: A short introduction about you.
• About: A description of your background and interests.
• Skills: Technologies and tools you are learning.
• Projects: Examples of your work.
• Contact: Your email address or other contact details.

We will use HTML to structure the website and CSS to style it... Read More

*## 2. Understanding HTML and CSS
*
Before writing the code, let's understand the two technologies... Read More

HTML (HyperText Markup Language) provides the structure of a webpage. It defines headings, paragraphs, links, images, and other elements.

CSS (Cascading Style Sheets) controls how those elements look. It allows you to customize colors, spacing, fonts, layouts, and responsive behavior... Read More

Together, HTML and CSS are enough to create a clean and attractive static portfolio website.
**

3. Create Your Project Files**

First, create a folder named my-portfolio.

Inside that folder, create two files:

my-portfolio/
├── index.html
└── style.css

The index.html file will contain the website structure, while style.css will contain the design.

You can use Visual Studio Code or any text editor to write the code... Read More

4. Write the HTML Code

Open index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <nav class="navbar">
            <h2 class="logo">MyPortfolio</h2>

            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <h1>Hello, I'm Alex</h1>
            <h2>A Beginner Web Developer</h2>
            <p>
                I enjoy building simple, responsive, and
                user-friendly websites using HTML and CSS.
            </p>
            <a href="#projects" class="button">View My Projects</a>
        </section>

        <section id="about" class="section">
            <h2>About Me</h2>
            <p>
                I am an aspiring web developer passionate about
                learning modern web technologies. I enjoy turning
                ideas into simple and useful web experiences.
            </p>
        </section>

        <section id="skills" class="section">
            <h2>My Skills</h2>
            <div class="skills">
                <span>HTML5</span>
                <span>CSS3</span>
                <span>Responsive Design</span>
                <span>Git Basics</span>
            </div>
        </section>

        <section id="projects" class="section">
            <h2>My Projects</h2>

            <div class="project">
                <h3>Project One: Personal Portfolio</h3>
                <p>
                    A personal website created using HTML and CSS
                    to showcase my skills and projects.
                </p>
            </div>

            <div class="project">
                <h3>Project Two: Landing Page</h3>
                <p>
                    A simple landing page with a clean layout,
                    navigation menu, and call-to-action button.
                </p>
            </div>

            <div class="project">
                <h3>Project Three: Product Page</h3>
                <p>
                    A basic product page featuring descriptions,
                    pricing information, and a responsive layout.
                </p>
            </div>
        </section>

        <section id="contact" class="section">
            <h2>Contact Me</h2>
            <p>
                Have a question or project idea? Feel free to
                get in touch.
            </p>
            <a href="mailto:[e-mail]" class="button">
                Email Me
            </a>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Alex. All rights reserved.</p>
    </footer>

</body>
</html>

You can replace "Alex" with your name and update the skills, projects, and email address with your own information.

5. Style the Website With CSS

Now open style.css and add the following styles:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #263238;
    background: #f5f7fb;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    background: #172554;
    color: white;
}

.logo {
    font-size: 24px;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.navbar a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: #93c5fd;
}

.hero {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 10px;
    color: #172554;
}

.hero h2 {
    margin-bottom: 15px;
}

.hero p {
    max-width: 600px;
    margin: 0 auto 25px;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.button:hover {
    background: #1d4ed8;
}

.section {
    max-width: 1000px;
    margin: auto;
    padding: 60px 25px;
}

.section h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #172554;
}

.section > p {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.skills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.skills span {
    padding: 10px 18px;
    background: white;
    border: 1px solid #dbeafe;
    border-radius: 20px;
}

.project {
    background: white;
    padding: 25px;
    margin: 15px 0;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.project h3 {
    margin-bottom: 10px;
    color: #1d4ed8;
}

footer {
    padding: 20px;
    text-align: center;
    background: #172554;
    color: white;
}

@media (max-width: 650px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }

    .navbar ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero {
        padding: 70px 20px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .section {
        padding: 45px 20px;
    }
}

This CSS creates a simple color scheme, a navigation bar, a centered introduction, skill tags, project sections, and a footer. The media query adjusts the layout for smaller screens.

6. How to Run Your Portfolio Website

After adding both files, follow these steps:

1. Save index.html and style.css in the same folder.
2. Open the folder on your computer.
3. Double-click index.html.
4. Your portfolio website will open in your browser.
5. Resize the browser window to test how the layout behaves on mobile-sized screens.

If your styles do not appear, check that the CSS file is named exactly style.css and that the link in your HTML matches the filename.

7. Important HTML and CSS Concepts Used

Let's review some concepts from this project.

Semantic HTML: Elements such as <header>, <nav>, <main>, <section>, and <footer> help organize content meaningfully.

Flexbox: The display: flex property makes it easier to align navigation links and skill tags.

CSS hover effects: The :hover selector changes the appearance of links and buttons when a user moves the pointer over them.

Responsive design: The @media rule changes styles based on screen width, helping the website work better on mobile devices.

CSS transitions: The transition property makes hover changes smoother.

Understanding these concepts will help you build more complex websites as you gain experience.

8. Tips to Make Your Portfolio Better

Once the basic version is working, consider making these improvements:

• Add a professional photograph or personal logo.
• Include real projects with screenshots and working demo links.
• Add links to your GitHub and LinkedIn profiles.
• Use consistent colors, typography, and spacing.
• Write an original introduction that describes your interests and goals.
• Test the website on different devices and browsers.
• Compress images and use descriptive alternative text.
• Check keyboard navigation and color contrast for accessibility.
• Publish the website using a static hosting service such as GitHub Pages.

Remember to include only skills and projects that accurately represent your experience.

## 9. Common Mistakes Beginners Should Avoid
**
**Forgetting the CSS link: If the HTML file cannot find the stylesheet, the website will appear mostly unstyled.

Using placeholder content permanently: Replace sample names, email addresses, and project descriptions before publishing your portfolio.

Ignoring mobile users: A layout that works on a desktop may not work well on a small screen.

Adding too many effects: Excessive animations, colors, and shadows can make a portfolio harder to use.

Showing unfinished projects without explanation: If a project is still in progress, clearly describe what works and what you plan to improve... Read More

10. Conclusion

Building a portfolio website with HTML and CSS is an excellent beginner project because it combines several essential web development skills in one practical exercise.

You have learned how to structure a webpage, style navigation links, create project sections, display skills, add contact links, and make the layout more responsive.

The next step is to customize this example with your own information and projects. After mastering HTML and CSS, you can explore JavaScript to add interactive features such as a mobile menu, theme switcher, or contact form with backend support... Read More

Have you built your first portfolio website yet? Share your experience, challenges, or suggestions in the comments. I'd love to hear what you are building!