Building Your First Portfolio Website

Introduction

Creating a personal portfolio website is an excellent way to showcase your skills, projects, and achievements as a web developer. In this in-depth tutorial, we'll guide you through the entire process of building a responsive, visually appealing portfolio website using HTML and CSS.

By the end of this tutorial, you'll have a fully functional portfolio website that you can customize and expand upon. We'll make sure to explain each step in detail, using simple and beginner-friendly language, so that even if you're new to web development, you'll be able to follow along and create your own portfolio.

Setting Up Your Workspace

Installing a Text Editor

For this tutorial, we'll be using Visual Studio Code (VS Code), a free and popular code editor. Here's how you can install it:

Go to the Visual Studio Code website and click the "Download" button.
Choose the version for your operating system (Windows, Mac, or Linux) and follow the installation instructions.

Visual Studio Code is a powerful text editor that provides features like syntax highlighting, code completion, and integrated debugging, which will make your coding experience much more efficient.

Creating Your Project Folder

Next, let's create a dedicated folder to keep all your website files organized:

Open your file explorer (Windows) or Finder (Mac).
Navigate to your Documents folder (or any other location you prefer).
Right-click in an empty space and select "New > Folder".
Name the folder "my-portfolio" and press Enter.

Having a separate folder for your portfolio project will help you stay organized and make it easier to manage your files.

Opening Your Project in VS Code

Now, let's open your project folder in VS Code:

Open VS Code.
Click on "File" in the top menu, then select "Open Folder" (Windows) or "Open..." (Mac).
Find and select your "my-portfolio" folder, then click "Open".

This will load your project folder in VS Code, allowing you to work on your portfolio files.

Creating Your Project Files

Within your "my-portfolio" folder, we need to create two files: index.html and styles.css.

In the VS Code file explorer, click the "New File" icon (it looks like a page with a + sign).
Name the file "index.html" and press Enter. This will be your main HTML file.
Click the "New File" icon again and name the file "styles.css". This will be your CSS file.

The index.html file will contain the structure and content of your website, while the styles.css file will hold the styling rules.

Building the HTML Structure

Step 1: Open Your HTML File

In the VS Code file explorer, double-click the index.html file to open it in the editor.

Step 2: Add the Basic HTML Structure

Copy and paste the following code into your index.html file:

<!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="styles.css">
</head>
<body>
    <!-- We'll add content here in the next step -->
</body>
</html>

Let's break down the code:

<!DOCTYPE html>: Declares the document type as HTML5.
<html lang="en">: The root element of the HTML page, specifying the language as English.
<head>: Contains meta information about the document.
<meta charset="UTF-8">: Sets the character encoding to UTF-8, which ensures that your website can display a wide range of characters correctly.
<meta name="viewport" ...>: Ensures the page is responsive and adapts to different screen sizes.
<title>My Portfolio</title>: Sets the title of the webpage, which will be displayed in the browser's tab or window.
<link rel="stylesheet" href="styles.css">: Links the CSS file (styles.css) to the HTML, allowing you to apply styles to your website.
<body>: Contains the visible content of the webpage.

Step 3: Save Your HTML File

Press Ctrl + S (Windows) or Command + S (Mac) to save the index.html file.

This basic HTML structure provides the foundation for your portfolio website. Now, let's start adding content to it.

Adding Content to Your Portfolio

Step 1: Add the Header Section

Inside the <body> tags, add the following code:

<header>
    <h1>Your Name</h1>
    <p class="subtitle">Web Developer</p>
    <p class="bio">A passionate developer focused on creating interactive websites</p>
</header>

This section will include your name, job title (e.g., "Web Developer"), and a brief bio about yourself.

The <h1> tag is used for the main heading, which is typically your name.
The <p> tags with the class="subtitle" and class="bio" attributes are used for the job title and bio, respectively. The class attribute allows us to apply specific styles to these elements later.

Step 2: Add the Skills Section

Below the header section, add the following code:

<section class="skills">
    <h2>My Skills</h2>
    <ul class="skills-list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Web Design</li>
    </ul>
</section>

This section will showcase the skills you have as a web developer.

The <section> tag is used to group related content together.
The <h2> tag is used for the section heading.
The <ul> (unordered list) and <li> (list item) tags are used to display the list of skills.
The class="skills" and class="skills-list" attributes allow us to target these elements for styling later.

Step 3: Add a Projects Section

Below the skills section, add the following code:

<section class="projects">
    <h2>My Projects</h2>
    <div class="project-grid">
        <article class="project">
            <h3>Project 1</h3>
            <p>Description of your first project</p>
        </article>
        <article class="project">
            <h3>Project 2</h3>
            <p>Description of your second project</p>
        </article>
    </div>
</section>

This section will display your portfolio projects.

The <section> tag is used to group the project-related content.
The <h2> tag is used for the section heading.
The <div> with the class="project-grid" is a container that will hold the individual project items.
The <article> tags are used to represent each project, with an <h3> tag for the project title and a <p> tag for the project description.
The class="projects", class="project-grid", and class="project" attributes will help us style these elements later.

Step 4: Add a Contact Section

Finally, add a footer section for your contact information:

<footer>
    <h2>Contact Me</h2>
    <p>Email: your.email@example.com</p>
    <p>LinkedIn: your-linkedin-profile</p>
</footer>

This section will provide a way for people to get in touch with you.

The <footer> tag is used to group the contact-related content at the bottom of the page.
The <h2> tag is used for the section heading.
The <p> tags are used to display your email and LinkedIn profile information.

Customizing Your Content

Now that you have the basic structure in place, feel free to customize the content to match your personal information:

Replace "Your Name" with your actual name.
Update the bio to describe yourself and your background.
Add or remove skills based on your expertise.
Add your own project descriptions and details.
Update the contact information with your email and LinkedIn profile.

Remember, this is your portfolio, so make sure the content reflects who you are and what you can offer.

Adding CSS Styling

Step 1: Open Your CSS File

In the VS Code file explorer, double-click the styles.css file to open it in the editor.

Step 2: Add Basic Page Styles

Copy and paste the following code into your styles.css file:

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

This CSS code resets the default styles and sets some basic styles for the page:

* { ... } is a universal selector that targets all elements on the page.
margin and padding are set to 0 to remove the default margins and padding.
box-sizing: border-box; ensures that the width and height of an element include the padding and border.
font-family, line-height, and color are set for the body element, which will apply these styles to the entire page.
max-width and margin: 0 auto; center the content horizontally on the page.
padding adds some space around the content.

Step 3: Style the Header Section

Add the following CSS rules to your styles.css file:

header {
    text-align: center;
    padding: 40px 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 30px;
}

header h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

header .subtitle {
    font-size: 1.2rem;
    color: #7f8c8d; 
    margin-bottom: 15px;
}

header .bio {
    max-width: 600px;
    margin: 0 auto;
}

These styles will make your header section look more polished and professional:

text-align: center; centers the content within the header.
padding adds some spacing around the content.
background-color and border-radius give the header a subtle background and rounded corners.
margin-bottom adds some spacing below the header.
h1, .subtitle, and .bio styles target the specific elements within the header.

Step 4: Style the Skills Section

Add the following CSS rules to your styles.css file:

.skills {
    padding: 30px 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.skills h2 {
    color: #2c3e50;
    margin-bottom: 20px;
}

.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skills-list li {
    background-color: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
}

These styles will make your skills section look clean and organized:

.skills styles target the entire skills section.
padding, background-color, border-radius, and box-shadow give the section a clean, modern appearance.
.skills h2 styles the section heading.
.skills-list styles the list of skills, removing the default list style and displaying the items in a flexible, wrapping layout.
.skills-list li styles the individual skill items, giving them a blue background, rounded corners, and proper spacing.

Step 5: Style the Projects Section

Add the following CSS rules to your styles.css file:

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

.project {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.project h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.project p {
    color: #666;
}

These styles will create a responsive grid layout for your project section:

.project-grid uses the CSS grid layout to display the project items in a grid.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); creates a responsive grid where the number of columns adapts to the available space, with a minimum width of 250px for each project item.
gap adds spacing between the grid items.
padding adds some space around the entire grid.
.project styles the individual project items, giving them a white background, rounded corners, and a subtle shadow.
.project h3 and .project p style the project title and description, respectively.

Step 6: Style the Footer

Add the following CSS rules to your styles.css file:

footer {
    margin-top: 50px;
    padding: 30px 20px;
    background-color: #2c3e50;
    color: white;
    border-radius: 8px;
    text-align: center;
}

footer h2 {
    margin-bottom: 20px;
}

footer p {
    margin-bottom: 10px;
}

These styles will make your contact section stand out at the bottom of the page:

margin-top adds some spacing above the footer.
padding adds space around the footer content.
background-color and color give the footer a dark blue background and white text.
border-radius rounds the corners of the footer.
text-align: center; centers the content within the footer.
footer h2 and footer p style the section heading and contact information, respectively.

Understanding the CSS

Let's quickly review the CSS concepts we've used so far:

margin creates space outside elements.
padding creates space inside elements.
box-sizing: border-box; ensures that the width and height of an element include the padding and border.
border-radius rounds the corners of elements.
box-shadow adds a subtle shadow to elements.
display: grid/flex creates modern, responsive layouts.
color sets the text color of an element.
background-color sets the background color of an element.

Testing Your Responsive Design

To ensure your portfolio looks great on different devices, follow these steps:

Open your `index.html` file in a web browser (e.g., Google Chrome).
Press F12 (or right-click and select "Inspect") to open the browser's Developer Tools.
Click the "Toggle device toolbar" icon (it looks like a phone/tablet).
Try different device sizes to see how your site responds and adjust your CSS accordingly.

This will allow you to test your portfolio on various screen sizes and make any necessary adjustments to the CSS to ensure it looks great on both desktop and mobile devices.

Final Code

Here is the final code for your portfolio website:

index.html

<!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="styles.css">
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <p class="subtitle">Web Developer</p>
        <p class="bio">A passionate developer focused on creating interactive websites</p>
    </header>

    <section class="skills">
        <h2>My Skills</h2>
        <ul class="skills-list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Web Design</li>
        </ul>
    </section>

    <section class="projects">
        <h2>My Projects</h2>
        <div class="project-grid">
            <article class="project">
                <h3>Project 1</h3>
                <p>Description of your first project</p>
            </article>
            <article class="project">
                <h3>Project 2</h3>
                <p>Description of your second project</p>
            </article>
        </div>
    </section>

    <footer>
        <h2>Contact Me</h2>
        <p>Email: your.email@example.com</p>
        <p>LinkedIn: your-linkedin-profile</p>
    </footer>
</body>
</html>

styles.css

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header styles */
header {
    text-align: center;
    padding: 40px 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 30px;
}

header h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

header .subtitle {
    font-size: 1.2rem;
    color: #7f8c8d; 
    margin-bottom: 15px;
}

header .bio {
    max-width: 600px;
    margin: 0 auto;
}

/* Skills section styles */
.skills {
    padding: 30px 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.skills h2 {
    color: #2c3e50;
    margin-bottom: 20px;
}

.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skills-list li {
    background-color: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* Projects section styles */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.project {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.project h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.project p {
    color: #666;
}

/* Footer styles */
footer {
    margin-top: 50px;
    padding: 30px 20px;
    background-color: #2c3e50;
    color: white;
    border-radius: 8px;
    text-align: center;
}

footer h2 {
    margin-bottom: 20px;
}

footer p {
    margin-bottom: 10px;
}

Conclusion

Congratulations! You've now created a basic portfolio website using HTML and CSS. This tutorial has provided you with a solid foundation to build upon. Remember, this is just the beginning - you can continue to customize and expand your portfolio as you learn more.

Feel free to experiment with different styles, add more sections, and make your portfolio truly unique. Happy coding!