Mastering HTML: Building a Simple Website with a Basic Portfolio

Written by

webdevelopmentdebugged

in

In today’s digital landscape, a personal portfolio website is more than just a nice-to-have; it’s a necessity. It’s your online resume, a showcase of your skills, and a direct line to potential clients or employers. But the thought of building one can seem daunting, especially if you’re new to web development. Fear not! This tutorial will guide you, step-by-step, through creating a simple, yet effective, portfolio website using HTML – the backbone of the web.

Why Build a Portfolio Website with HTML?

HTML (HyperText Markup Language) is the foundation of every website. It provides the structure and content. While you could use website builders or content management systems (CMS) like WordPress, learning HTML offers several advantages:

  • Full Control: You have complete control over the design and functionality.
  • Fast Loading: HTML-based websites are typically faster than those built with complex frameworks.
  • SEO Friendly: HTML allows for clean, well-structured code, which is beneficial for search engine optimization (SEO).
  • Fundamental Skill: Understanding HTML is crucial for any web developer.

This tutorial is designed for beginners and intermediate developers. We’ll focus on creating a portfolio that:

  • Displays your name and a brief introduction.
  • Showcases your projects with images and descriptions.
  • Provides contact information.
  • Is easy to navigate.

Setting Up Your Project

Before diving into the code, let’s set up our project directory. This helps keep your files organized.

  1. Create a Project Folder: Create a new folder on your computer. Name it something descriptive, like “my-portfolio.”
  2. Create an HTML File: Inside the “my-portfolio” folder, create a new file named “index.html.” This is the main file of your website.
  3. Create an Images Folder (Optional): Create a folder named “images” to store your project images.

Your directory structure should look something like this:

my-portfolio/
 |    index.html
 |    images/
 |        project1.jpg
 |        project2.jpg

The Basic HTML Structure

Open “index.html” in a text editor (like VS Code, Sublime Text, or even Notepad). Let’s start with the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name - Portfolio</title>
</head>
<body>

</body>
</html>

Let’s break down this code:

  • <!DOCTYPE html>: This declaration tells the browser that this is an HTML5 document.
  • <html lang="en">: The root element of the page. The lang attribute specifies the language (English in this case).
  • <head>: Contains meta-information about the HTML document (not displayed on the page itself).
  • <meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is a common standard.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This is crucial for responsive design. It tells the browser how to scale the page on different devices.
  • <title>Your Name - Portfolio</title>: Sets the title that appears in the browser tab.
  • <body>: Contains the visible page content.

Adding Content: Your Introduction

Inside the <body> tags, we’ll add the content for your portfolio. Let’s start with your introduction. We’ll use headings (<h1>, <h2>, etc.) for titles and paragraphs (<p>) for text.

<body>
  <header>
    <h1>Your Name</h1>
    <p>A brief introduction about yourself and your skills. What do you do? What are you passionate about?</p>
  </header>
</body>

In this code:

  • We’ve added a <header> element to semantically group the introduction.
  • <h1> is the main heading, usually your name.
  • <p> contains a short description of yourself. Replace the placeholder text with your actual introduction.

Showcasing Your Projects

Next, let’s add a section to showcase your projects. We’ll use the <section> element to group the projects and <article> elements for each project.

<body>
  <header>
    <h1>Your Name</h1>
    <p>A brief introduction about yourself and your skills.</p>
  </header>

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

    <article>
      <img src="images/project1.jpg" alt="Project 1">
      <h3>Project Title 1</h3>
      <p>A short description of Project 1.  What was the project? What technologies did you use?</p>
    </article>

    <article>
      <img src="images/project2.jpg" alt="Project 2">
      <h3>Project Title 2</h3>
      <p>A short description of Project 2.</p>
    </article>
  </section>
</body>

Key points:

  • <section id="projects">: This creates a section for your projects. The id attribute allows you to link to this section later.
  • <h2>Projects</h2>: A heading for the projects section.
  • <article>: Each <article> represents a single project.
  • <img src="images/project1.jpg" alt="Project 1">: This is an image tag. The src attribute specifies the image path (relative to your “index.html” file). The alt attribute provides alternative text for the image (important for accessibility and SEO). Make sure you have the images in your images folder.
  • <h3>: A heading for each project’s title.
  • <p>: A description of the project.

Important: Replace “project1.jpg” and “project2.jpg” with the actual filenames of your project images. Add more <article> elements for each project you want to showcase.

Adding Contact Information

Finally, let’s add a contact section. This is crucial for people to reach you.

<body>
  <header>
    <h1>Your Name</h1>
    <p>A brief introduction about yourself and your skills.</p>
  </header>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <img src="images/project1.jpg" alt="Project 1">
      <h3>Project Title 1</h3>
      <p>A short description of Project 1.</p>
    </article>
    <article>
      <img src="images/project2.jpg" alt="Project 2">
      <h3>Project Title 2</h3>
      <p>A short description of Project 2.</p>
    </article>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>You can reach me at:</p>
    <ul>
      <li>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></li>
      <li>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile/" target="_blank">Your LinkedIn Profile</a></li>
      <li>GitHub: <a href="https://github.com/yourusername" target="_blank">Your GitHub Profile</a></li>
    </ul>
  </section>
</body>

Here’s what’s new:

  • <section id="contact">: A section for your contact information.
  • <ul> and <li>: An unordered list to organize your contact details.
  • <a href="mailto:your.email@example.com">: An email link. Clicking this will open the user’s email client. Replace “your.email@example.com” with your actual email address.
  • <a href="https://www.linkedin.com/in/yourprofile/" target="_blank"> and <a href="https://github.com/yourusername" target="_blank">: Links to your LinkedIn and GitHub profiles. Replace the placeholders with your profile URLs. The target="_blank" attribute opens the link in a new tab.

Making it Look Good with CSS (Optional, but Recommended)

While the HTML provides the structure and content, CSS (Cascading Style Sheets) is used to style your website and make it visually appealing. You can add CSS in a few ways:

  • Inline Styles: Adding styles directly to HTML elements (e.g., <h1 style="color: blue;">). Not recommended for larger projects.
  • Internal Styles: Adding a <style> block within the <head> of your HTML document. Good for small projects.
  • External Stylesheet: Creating a separate CSS file (e.g., “style.css”) and linking it to your HTML document. This is the best practice for larger projects.

Let’s create an external stylesheet. In your “my-portfolio” folder, create a new file named “style.css.” Then, link it to your HTML file within the <head>:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name - Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>

Now, let’s add some basic CSS to “style.css”:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  margin-top: 30px;
}

img {
  max-width: 100%; /* Make images responsive */
  height: auto;
  margin-bottom: 10px;
}

article {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

a {
  color: #007bff; /* Example link color */
  text-decoration: none; /* Remove underlines from links */
}

a:hover {
  text-decoration: underline;
}

Explanation of the CSS:

  • body: Sets the font and adds some margin around the page.
  • header: Centers the introduction.
  • h2: Adds some space above the headings.
  • img: Makes images responsive (they won’t overflow their containers) and adds some space below them.
  • article: Adds a border and padding to each project article.
  • a: Styles the links (email, LinkedIn, GitHub).

Important: The CSS above is a starting point. Feel free to customize it to your liking. Experiment with different colors, fonts, and layouts. Consider using a CSS framework like Bootstrap or Tailwind CSS for more advanced styling. These frameworks provide pre-built components and utilities that can significantly speed up your development process.

Adding Navigation (Optional, but Recommended)

For a better user experience, especially if you have many projects, consider adding a navigation menu. This allows users to jump to different sections of your portfolio quickly.

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">About</a></li>  <!--  Link to About section -->
        <li><a href="#projects">Projects</a></li>  <!-- Link to Projects section -->
        <li><a href="#contact">Contact</a></li>  <!-- Link to Contact section -->
      </ul>
    </nav>
    <h1>Your Name</h1>
    <p>A brief introduction about yourself and your skills.</p>
  </header>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <img src="images/project1.jpg" alt="Project 1">
      <h3>Project Title 1</h3>
      <p>A short description of Project 1.</p>
    </article>
    <article>
      <img src="images/project2.jpg" alt="Project 2">
      <h3>Project Title 2</h3>
      <p>A short description of Project 2.</p>
    </article>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>You can reach me at:</p>
    <ul>
      <li>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></li>
      <li>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile/" target="_blank">Your LinkedIn Profile</a></li>
      <li>GitHub: <a href="https://github.com/yourusername" target="_blank">Your GitHub Profile</a></li>
    </ul>
  </section>
</body>

Here’s what’s new:

  • <nav>: A navigation element to contain the links.
  • <ul> and <li>: An unordered list for the navigation links.
  • <a href="#">: Links to different sections on the same page. The href attribute uses the ID of the section to link to it. For the “About” section, we’ll use “#” as a placeholder and can replace it later.

To make the navigation work, you need to add the correct id attributes to the sections you want to link to. In this example, we already have id="projects" and id="contact". We’ll also need to add an id to the header to link to the “About” section (which is the header itself).

<body>
  <header id="about">  <!-- Added id="about" -->
    <nav>
      <ul>
        <li><a href="#about">About</a></li>  <!--  Link to About section -->
        <li><a href="#projects">Projects</a></li>  <!-- Link to Projects section -->
        <li><a href="#contact">Contact</a></li>  <!-- Link to Contact section -->
      </ul>
    </nav>
    <h1>Your Name</h1>
    <p>A brief introduction about yourself and your skills.</p>
  </header>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <img src="images/project1.jpg" alt="Project 1">
      <h3>Project Title 1</h3>
      <p>A short description of Project 1.</p>
    </article>
    <article>
      <img src="images/project2.jpg" alt="Project 2">
      <h3>Project Title 2</h3>
      <p>A short description of Project 2.</p>
    </article>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>You can reach me at:</p>
    <ul>
      <li>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></li>
      <li>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile/" target="_blank">Your LinkedIn Profile</a></li>
      <li>GitHub: <a href="https://github.com/yourusername" target="_blank">Your GitHub Profile</a></li>
    </ul>
  </section>
</body>

You can also style the navigation in your “style.css” file. Here’s some basic styling to get you started:

nav ul {
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 0;
  text-align: center; /* Center the navigation links */
}

nav li {
  display: inline; /* Display links horizontally */
  margin: 0 10px; /* Add space between links */
}

Testing and Deployment

After you’ve created your portfolio, it’s essential to test it thoroughly. Open “index.html” in different browsers (Chrome, Firefox, Safari, etc.) and on different devices (desktop, tablet, mobile) to ensure it displays correctly. Check for any broken links, image issues, or responsiveness problems.

Once you’re satisfied with your portfolio, you’ll want to deploy it so others can see it. Here are a few options:

  • GitHub Pages: A free and easy way to host static websites directly from your GitHub repository. This is an excellent option for beginners.
  • Netlify or Vercel: Popular platforms for deploying static websites with features like continuous deployment and custom domains.
  • Web Hosting: If you want more control and features, you can sign up for web hosting from a provider like Bluehost, SiteGround, or GoDaddy. You’ll then upload your “index.html” file and any other assets (images, CSS) to the server.

For GitHub Pages, you’ll need a GitHub account. Create a new repository, upload your “index.html” file, and enable GitHub Pages in the repository settings. GitHub will then provide you with a URL where your portfolio will be accessible.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building HTML portfolios and how to avoid them:

  • Incorrect File Paths: Make sure the paths to your images and other assets are correct. Use relative paths (e.g., “images/project1.jpg”) relative to your “index.html” file. Double-check your spelling and capitalization.
  • Missing or Incorrect Closing Tags: HTML requires opening and closing tags for most elements (e.g., <p></p>). Missing or incorrect tags can cause your website to break. Use a code editor with syntax highlighting to catch these errors.
  • Forgetting the <meta name="viewport"...> Tag: This is crucial for responsive design. Without it, your website might not display correctly on mobile devices.
  • Ignoring Accessibility: Always include alt attributes for your images. Use semantic HTML elements (<header>, <nav>, <article>, <section>, <footer>) to structure your content logically. Ensure your website is keyboard navigable.
  • Not Testing on Different Devices and Browsers: Your website might look different on different devices and browsers. Test your website on multiple devices and browsers to ensure it looks and functions correctly.
  • Overcomplicating the Code: Keep it simple, especially when you’re starting. Focus on getting the content and structure right first, then add styling and advanced features.

SEO Best Practices

Even a simple portfolio can benefit from SEO (Search Engine Optimization) to help it rank higher in search results. Here are some key SEO tips:

  • Use Relevant Keywords: Include relevant keywords in your title tag (<title>), headings (<h1>, <h2>, etc.), and content. Think about what people might search for to find your portfolio (e.g., “web developer,” “portfolio,” “[your skill]”).
  • Write a Compelling Meta Description: The meta description is a short summary of your page that appears in search results. Write a clear and concise description that encourages people to click on your link. Keep it under 160 characters. Add this within the <head> section of your HTML. For example: <meta name="description" content="[Your Name]'s portfolio showcasing web development projects and skills.">
  • Optimize Image Alt Attributes: As mentioned earlier, use descriptive alt attributes for your images. This helps search engines understand what your images are about.
  • Use Semantic HTML: Using semantic HTML elements (<header>, <nav>, <article>, <section>, <footer>) helps search engines understand the structure and content of your page.
  • Ensure Mobile-Friendliness: Your website should be responsive and look good on all devices. The <meta name="viewport"...> tag is essential for this.
  • Build Internal Links: If you have multiple pages on your portfolio, link between them.
  • Submit Your Sitemap (Optional): If you have a sitemap (a file that lists all the pages on your website), you can submit it to search engines like Google to help them crawl your site more efficiently. This is more relevant for larger websites.

Key Takeaways

You’ve now learned how to create a basic portfolio website using HTML. Remember the core principles: structure your content with HTML, style it with CSS (even simple styling makes a big difference!), and make sure it’s accessible and responsive. Don’t be afraid to experiment and customize your portfolio to reflect your unique style and skills. As you gain more experience, you can explore more advanced HTML features, CSS frameworks, and even JavaScript to add interactivity and dynamic content. This is just the beginning of your journey in web development. Keep practicing, keep learning, and your online presence will continue to grow.

FAQ

Here are some frequently asked questions about building an HTML portfolio:

  1. Can I use a website builder instead of HTML? Yes, you can. Website builders like Wix, Squarespace, and WordPress.com offer easy-to-use interfaces. However, learning HTML gives you more control and flexibility.
  2. Do I need to know CSS and JavaScript? CSS is highly recommended for styling your portfolio. JavaScript is not strictly required for a basic portfolio, but it can enhance interactivity (e.g., image sliders, contact forms).
  3. How do I get a domain name? You can register a domain name (e.g., yourname.com) through a domain registrar like GoDaddy or Namecheap. Then, point your domain to your web hosting or GitHub Pages URL.
  4. How do I make my portfolio mobile-friendly? Use the <meta name="viewport"...> tag in your HTML. Write your CSS to be responsive (using media queries).
  5. Where can I find free images for my portfolio? Websites like Unsplash, Pexels, and Pixabay offer free, high-quality images that you can use for your projects. Always check the license terms before using an image.

The beauty of HTML is its simplicity and power. With a little bit of code, you can create a professional-looking portfolio that showcases your skills and opens doors to new opportunities. Embrace the learning process, be patient with yourself, and enjoy the journey of building your online presence. Your portfolio is a living document, so keep it updated with your latest projects and skills. As you grow as a developer, your portfolio will evolve, reflecting your progress and achievements. Remember that the best portfolios are those that truly represent you and your unique talents. So, let your creativity shine, and build a portfolio that you are proud to share with the world.

More posts