Build a Responsive Portfolio Website from Scratch.
Part 1: Introduction and Setting up the Project
Introduction
“Welcome to this tutorial on building a responsive portfolio website from scratch! In this series, we’ll be using HTML, CSS, JavaScript, and Bootstrap to create a modern and mobile-friendly portfolio website with essential features like a navigation bar, project showcase, and contact form.”
“Our goal is to create a responsive portfolio website that looks great on all devices and showcases your skills and projects effectively. We’ll be building the website step by step, starting with the project setup, moving on to the layout and styling, and finally adding interactivity with JavaScript.”
Set up the development environment
“First, let’s set up our development environment. You’ll need a code editor like Visual Studio Code, Sublime Text, or Atom, and a web browser to preview your work.”
Create the project folder and files
“Now, let’s create a new folder for our project, and within that folder, create the following files: index.html, styles.css, and main.js.” Include Bootstrap and jQuery
“To make our development process faster and easier, we’ll be using Bootstrap, a popular CSS framework. To include Bootstrap in our project, add the following CDN link in the <head> section of your index.html file. We’ll also include jQuery, a popular JavaScript library, before the closing </body> tag.”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Portfolio Website</title>
<!-- Add Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Add custom CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Add jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSGFpoO9Q6L+7Lg5//fW7IM3UblCjU6mAOEm6R/tb6E8Z6Ef4/6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoJtKh7z7lGz7fuP4F8nfdFvAOA6Gg/z6Y5J6XqqyGXYM2ntX5" crossorigin="anonymous"></script>
<!-- Add Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>Part 2: Building the Navigation Bar
“In this part, we’ll create a responsive navigation bar for our portfolio website using Bootstrap.”
Add the Bootstrap Navbar component
“Using the Bootstrap Navbar component, we’ll add the required HTML structure inside the <body> tag of our index.html file.”
<!-- Start of the Navigation Bar -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">Your Name/Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of the Navigation Bar -->Customize the Navbar
“Now that we have the basic structure, let’s customize our Navbar by adding a logo or your name, as well as the navigation links for different sections of our portfolio website, such as ‘Home’, ‘About’, ‘Projects’, and ‘Contact’.” “In the provided code, you can replace ‘Your Name/Logo’ with your own name or logo, and customize the navigation links as needed.”
Make the Navbar responsive
“To make our Navbar responsive, we’ll use the built-in Bootstrap classes to create a mobile-friendly menu that collapses on smaller screens. The navbar-toggler button and the data-toggle=”collapse” attribute handle the collapsing functionality for us.”
Part 2: Customizing the Navbar(continued…)
In this part, we’ll be customizing the Navbar to make it more visually appealing and match the overall theme of our website.
Let’s start by opening our styles.css file, where we’ll be adding our custom styles for the Navbar. First, let’s change the background color of the Navbar. We’ll set it to a dark shade of blue. Add the following CSS rule:
1. First, let’s change the background color of the Navbar. We’ll set it to a dark shade of blue. Add the following CSS rule:
.navbar {
background-color: #1C2331;
}2. Next, we’ll change the color of the Navbar brand and links to white for better contrast. Add the following CSS rules:
.navbar-brand,
.nav-link {
color: #ffffff;
}3. To give a visual indication of the active or hovered link, we’ll change the color of the link when it’s hovered or active. Add the following CSS rules:
.nav-link:hover,
.nav-link.active {
color: #E0A800;
}4. Lastly, let’s add some padding to the Navbar links to give them more space. Add the following CSS rule:
.nav-link {
padding: 0 1rem;
}Now, save your styles.css file and refresh the page in the browser. You should see the updated Navbar with the custom styles applied.
You can change the black background color on the burger in the mobile view of the portfolio as follows. Add the following CSS rule:
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}That’s it for Part 2! In this part, you’ve successfully created a responsive navigation bar using Bootstrap. In the next part of the tutorial, we will continue building the different sections of our portfolio website, such as the hero section, about section, project showcase, and contact form.
Part 3: Adding a Hero Section
Welcome to Part 3 of our tutorial on building a responsive portfolio website! In this part, we’ll be adding a hero section to showcase your work and create an impressive first impression for your visitors.
First, let’s add the HTML code for the hero section right below the closing </nav> tag in your HTML file:
<!-- Start of the Hero Section -->
<section class="hero-section text-center d-flex align-items-center justify-content-center">
<div>
<h1>Hello, I'm [Your Name]</h1>
<p class="lead">I'm a Web Developer</p>
<a href="#projects" class="btn btn-primary">View My Work</a>
</div>
</section>
<!-- End of the Hero Section -->Now, let’s add some custom styles to our styles.css file to style the hero section:
1. Set the height, background color, and font color of the hero section:
.hero-section {
height: 100vh;
background-color: #1C2331;
color: #ffffff;
}2. Style the hero section’s title and subtitle:
.hero-section h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero-section .lead {
font-size: 1.5rem;
margin-bottom: 2rem;
}Save your styles.css file and refresh the page in the browser. You should see the hero section with your name, title, and a “View My Work” button that links to the projects section.
In the next part of the tutorial, we’ll be adding the “About” section to share more information about yourself and your skills.
Part 4: Adding the About Section
Welcome to Part 4 of our tutorial on building a responsive portfolio website! In this part, we’ll be adding the “About” section to share more information about yourself and your skills.
First, let’s add the HTML code for the About section right below the closing </section> tag of the hero section in your HTML file:
<!-- Start of the About Section -->
<section id="about" class="about-section py-5">
<div class="container">
<h2 class="text-center">About Me</h2>
<div class="row mt-5">
<div class="col-md-6">
<img src="your-profile-image.jpg" alt="Your Name" class="img-fluid rounded-circle">
</div>
<div class="col-md-6">
<h3>[Your Name]</h3>
<p class="lead">Web Developer</p>
<p>Write a brief description of yourself and your experience as a web developer. This is a great place to showcase your passion for coding and your expertise in various programming languages and frameworks.</p>
<a href="#contact" class="btn btn-primary">Get in Touch</a>
</div>
</div>
</div>
</section>
<!-- End of the About Section -->Make sure to replace your-profile-image.jpg with the actual file name of your profile image.
Now, let’s add some custom styles to our styles.css file to style the About section:
1. Style the About section’s title:
.about-section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}2. Style the profile image:
.about-section img {
width: 100%;
max-width: 300px;
margin-bottom: 2rem;
}Save your styles.css file and refresh the page in the browser. You should see the About section with your profile image, name, title, a brief description, and a “Get in Touch” button that links to the contact section.
In the next part of the tutorial, we’ll be adding the “Projects” section to showcase your portfolio.
Part 5: Adding the Projects Section
Welcome to Part 5 of our tutorial on building a responsive portfolio website! In this part, we’ll be adding the “Projects” section to showcase your portfolio.
First, let’s add the HTML code for the Projects section right below the closing </section> tag of the About section in your HTML file:
<!-- Start of the Projects Section -->
<section id="projects" class="projects-section py-5">
<div class="container">
<h2 class="text-center">My Work</h2>
<div class="row mt-5">
<!-- Add your project cards here -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card">
<img src="project-image-1.jpg" alt="Project 1" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">A brief description of Project 1.</p>
<a href="#" class="btn btn-primary">View Details</a>
</div>
</div>
</div>
<!-- Add more project cards as needed -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card">
<img src="project-image-1.jpg" alt="Project 1" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">A brief description of Project 1.</p>
<a href="#" class="btn btn-primary">View Details</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="card">
<img src="project-image-1.jpg" alt="Project 1" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">A brief description of Project 1.</p>
<a href="#" class="btn btn-primary">View Details</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of the Projects Section -->Make sure to replace project-image-1.jpg with the actual file name of your project image. Add more project cards as needed to showcase your work.
Now, let’s add some custom styles to our styles.css file to style the Projects section:
1. Style the Projects section’s title:
.projects-section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}Save your styles.css file and refresh the page in the browser. You should see the Projects section with your project cards, including images, titles, descriptions, and “View Details” buttons.
Make Image Cards Same Size
To make the images in the project cards the same size, you can add some custom CSS to set a fixed height for the images and make them cover the entire area of the fixed height. This can be done by using the object-fit property.
First, update the img tag inside the project cards to include a class named project-image:
<img src="project-image-1.jpg" alt="Project 1" class="card-img-top project-image">Next, add the following custom CSS to your styles.css file:
.project-image {
height: 200px;
object-fit: cover;
}This CSS code sets a fixed height of 200px for the project images and makes them cover the entire area of the fixed height, maintaining their aspect ratio while being cropped if necessary. You can adjust the height value to match your desired size.
Save your styles.css file and refresh the page in the browser. The project images should now be of the same size within the cards.
Part 6: Adding the Contact Section
Welcome to Part 6 of our tutorial on building a responsive portfolio website! In this part, we’ll be adding the “Contact” section to allow visitors to get in touch with you.
First, let’s add the HTML code for the Contact section right below the closing </section> tag of the Projects section in your HTML file:
<!-- Start of the Contact Section -->
<section id="contact" class="contact-section py-5">
<div class="container">
<h2 class="text-center">Get in Touch</h2>
<div class="row mt-5">
<div class="col-md-8 offset-md-2">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your Email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Your Message"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-2">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- End of the Contact Section -->Now, let’s add some custom styles to our styles.css file to style the Contact section:
1. Style the Contact section’s title:
.contact-section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}Save your styles.css file and refresh the page in the browser. You should see the Contact section with a form to collect the visitor’s name, email, and message.
Part 7: Adding the Footer
Welcome back! In this part of the tutorial, we’ll be adding a footer to our responsive portfolio website using HTML, CSS, and Bootstrap.
First, let’s add the HTML code for the footer right below the closing </section> tag of the Contact section in your HTML file:
<!-- Start of the Footer -->
<footer class="footer py-3">
<div class="container">
<div class="row">
<div class="col text-center">
<p class="mb-0">© Your Name. All rights reserved.</p>
<p>Designed with <span class="heart">♥</span> by Your Name</p>
</div>
</div>
</div>
</footer>
<!-- End of the Footer -->Now, let’s add some custom styles to our styles.css file to style the footer:
Style the footer background color and text color:
.footer {
background-color: #222;
color: #fff;
}Style the heart icon in the footer text:
.footer .heart {
color: #f00;
}Part 8: Making the Website More Responsive on Mobile Screens
Welcome back! In this part of the tutorial, we’ll be making our responsive portfolio website even more mobile-friendly using CSS media queries.
CSS media queries allow us to apply different styles depending on the screen size, resolution, or device type. To ensure that our website looks great on mobile devices, we’ll be adding some media queries to our styles.css file.
First, let’s adjust the font size for the headings on mobile devices. Add the following media query to your styles.css file:
/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {
.about-section h2,
.projects-section h2,
.contact-section h2 {
font-size: 2rem;
}
}This media query target screens with a maximum width of 767 pixels, which typically includes most mobile devices. Inside the media query, we’ve reduced the font size for the headings in the About, Projects, and Contact sections.
Next, let’s adjust the font size for the navigation links on mobile devices. Add the following media query to your styles.css file:
/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {
.navbar-nav .nav-link {
font-size: 0.9rem;
}
}This media query targets the same screen size as before and reduces the font size for the navigation links in the navbar.
Save your styles.css file and refresh the page in the browser. You should see that the website now looks even better on mobile devices, with more appropriate font sizes for headings and navigation links.
That’s it! You’ve successfully made your responsive portfolio website more mobile-friendly using CSS media queries. You can add more media queries to further customize the design for different screen sizes or device types.
Don’t forget to subscribe for more tutorials like this one!