Programming Technology Tutorials , , , ,

Building a Portfolio Website with HTML and CSS – A Beginner’s Tutorial

Creating a portfolio website is an essential step for anyone looking to showcase their skills, projects, and experiences. Whether you’re a designer, developer, or creative professional, having a personal website gives you a platform to highlight your work. In this step-by-step guide, you’ll learn how to build a basic portfolio website using just HTML and CSS, making it an excellent starting point for beginners.

Step 1: Planning Your Portfolio Website

Before diving into the coding part, it’s crucial to plan your website’s layout and structure. Think about what sections you want to include. A simple portfolio website typically has the following sections:

  • Introduction/About Me: Who you are and what you do.
  • Projects/Work: Showcase your past work or portfolio items.
  • Skills: Highlight your key skills and expertise.
  • Contact: How visitors can get in touch with you.

This initial planning will help you define the content you need and how to organize it on the page.

Step 2: Setting Up the HTML Structure

Start by creating an HTML file. This will define the structure of your portfolio.

2.1 Creating the Basic HTML File

  1. Open a text editor (like VSCode or Sublime Text).
  2. Create a new file and name it index.html.
  3. Add the basic HTML structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>My Portfolio</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
 <h1>Welcome to My Portfolio</h1>
 </header>

 <section id="about">
 <h2>About Me</h2>
 <p>Hi, I'm [Your Name], a [Your Profession].</p>
 </section>

 <section id="projects">
 <h2>My Projects</h2>
 <!-- Project items will go here -->
 </section>

 <section id="skills">
 <h2>My Skills</h2>
 <p>Here are a few skills I'm proficient in:</p>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </section>

 <section id="contact">
 <h2>Contact Me</h2>
 <p>Feel free to <a href="mailto:your.email@example.com">email me</a>.</p>
 </section>

 <footer>
 <p>&copy; 2024 [Your Name]. All rights reserved.</p>
 </footer>
</body>
</html>

2.2 Explanation

  • HTML Structure: This sets up the different sections of your website: the header, about me, projects, skills, and contact. Each section has a heading (<h2>) and some sample content.
  • Link to CSS: The link tag in the <head> section links to a style.css file where you’ll write your CSS to style the page.

Step 3: Styling Your Website with CSS

Now that you have the HTML structure, it’s time to add some CSS to make your portfolio visually appealing.

3.1 Creating the CSS File

  1. In the same folder as your index.html, create a new file called style.css.
  2. Add some basic CSS styles:
css
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

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

header {
 background: #333;
 color: white;
 padding: 20px;
 text-align: center;
}

section {
 padding: 20px;
 margin: 20px 0;
 background-color: white;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
 color: #333;
 margin-bottom: 10px;
}

footer {
 text-align: center;
 padding: 10px;
 background: #333;
 color: white;
}

ul {
 list-style-type: square;
}

a {
 color: #007BFF;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

3.2 Explanation

  • Body Styles: This sets the font, line spacing, and basic background and text colors for the entire page.
  • Header and Footer: Both have a dark background with white text, giving the site a professional appearance.
  • Section Styling: Each section has padding, a white background, and a subtle shadow to make it stand out from the background.
  • Links and Lists: Links are styled to change color when hovered over, and the skills list uses square bullet points.

Step 4: Adding Projects to Your Portfolio

A portfolio website showcases your work. Here’s how to display your projects:

  1. Add the following HTML inside the projects section in index.html:
html
<div class="project-item">
 <h3>Project 1</h3>
 <p>Description of project 1.</p>
</div>

<div class="project-item">
 <h3>Project 2</h3>
 <p>Description of project 2.</p>
</div>
  1. Style your projects in style.css:
css
.project-item {
 margin-bottom: 20px;
 padding: 10px;
 border: 1px solid #ddd;
 background-color: #f9f9f9;
}

.project-item h3 {
 color: #007BFF;
}

.project-item p {
 font-size: 14px;
 color: #555;
}

4.1 Explanation

  • Project Item: Each project is wrapped in a div with class project-item. It has padding, a border, and a subtle background color.
  • Project Title and Description: The project title (<h3>) is styled to have a blue color, while the description has a smaller font and lighter color.

Step 5: Making Your Website Responsive

In today’s world, it’s crucial that your website works well on different screen sizes. Using CSS media queries, you can make your portfolio responsive.

5.1 Adding Media Queries for Mobile

  1. At the bottom of your style.css file, add the following:
css
@media (max-width: 768px) {
 body {
 padding: 10px;
 }

 section {
 margin: 10px 0;
 padding: 15px;
 }

 .project-item {
 padding: 10px;
 margin-bottom: 15px;
 }
}

5.2 Explanation

  • Media Query: The @media rule is used to apply styles for devices with a screen width of 768px or less, such as tablets and smartphones.
  • Adjustments: We reduce the padding and margins to ensure the layout looks good on smaller screens.

Step 6: Adding Custom Fonts and Icons

To enhance the visual appeal of your portfolio, you can add custom fonts and icons.

6.1 Adding Google Fonts

  1. Go to Google Fonts and choose a font (e.g., Poppins).
  2. Copy the provided link and paste it into the <head> section of your index.html.
html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
  1. Use the font in your style.css file:
css
body {
 font-family: 'Poppins', sans-serif;
}

6.2 Adding Icons with Font Awesome

  1. Go to Font Awesome and add the CDN link to your <head> section.
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  1. Use icons in your contact section:
html
<p>Connect with me on <a href="#"><i class="fab fa-linkedin"></i> LinkedIn</a></p>

Step 7: Publishing Your Portfolio Website

Once your website is complete, you can publish it online using platforms like GitHub Pages or Netlify.

7.1 Deploy with GitHub Pages

  1. Create a GitHub repository for your project.
  2. Upload your HTML, CSS, and any other files.
  3. In the repository settings, enable GitHub Pages under the “Pages” section.
  4. Your website will be live on https://yourusername.github.io/your-repo-name.
Tag

Related Posts

Post Comment

You May Have Missed