Building Your First Website with HTML & CSS

What We're Building

In this tutorial, we'll build a simple personal portfolio website using just HTML and CSS — no frameworks, no libraries, no build tools. Just you and a text editor.

Step 1: Set Up Your Files

Create a folder called my-website and add two files:

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

Step 2: Write the HTML

Open index.html and add the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <p>Student at St. Joseph's University</p>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>Write a short bio about yourself here.</p>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>Project 1</h3>
                    <p>Description of your project.</p>
                </div>
                <div class="project-card">
                    <h3>Project 2</h3>
                    <p>Description of your project.</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>Built with HTML & CSS</p>
    </footer>
</body>
</html>

Step 3: Add CSS Styling

Open style.css and add some styles to make it look good. Start with resets and typography, then style each section.

The key CSS concepts you'll use:

Flexbox for layouts
Grid for the project cards
Media queries for responsive design
Custom properties for consistent colors

Step 4: Make It Responsive

Add a media query to adjust the layout for mobile screens. The project grid should switch from two columns to one on smaller screens.

Step 5: Deploy It

The easiest way to get your site online for free:

Push your code to a GitHub repository
Go to Settings → Pages
Set the source to your main branch
Your site will be live at username.github.io/my-website

What's Next?

Once you have the basics down, try:

Adding a navigation bar
Including real projects with screenshots
Adding a contact form
Learning JavaScript to add interactivity

Building a personal website is one of the most rewarding beginner projects. It's yours, it's live on the internet, and you can keep improving it over time.

Happy building!