Create an Awesome Responsive Portfolio Website Using HTML, CSS, & JS

Learn how to create a fully responsive portfolio website using HTML, CSS, and JavaScript. Follow this step-by-step guide to build and customize your own professional portfolio.

Saturday, August 24, 2024
Create an Awesome Responsive Portfolio Website Using HTML, CSS, & JS

Create an Awesome Responsive Portfolio Website Using HTML, CSS, & JS

Post Description:

In this detailed guide, you'll learn how to build a fully responsive and visually appealing portfolio website from scratch using HTML, CSS, and JavaScript. This step-by-step tutorial is perfect for beginners and experienced developers who want to create a professional website to showcase their work.

Post Content:

Building an online portfolio is essential for any web developer, designer, or creative professional. In this guide, we'll walk you through the process of creating a modern, responsive portfolio website using just HTML, CSS, and JavaScript.




What You'll Learn:

  • Structuring the website layout with HTML.
  • Applying clean, modern styles with CSS.
  • Making the website responsive for all screen sizes.
  • Adding interactivity with JavaScript (e.g., smooth scrolling, dark/light mode toggle).

Key Features:

  1. Responsive Design: Ensure your portfolio looks great on desktops, tablets, and smartphones.
  2. Smooth Scrolling: Enhance user experience by implementing smooth scrolling for easy navigation.
  3. Skills Section: Showcase your expertise with skill bars and a modern layout.
  4. Testimonials: Build credibility with client and colleague testimonials.
  5. Dark/Light Mode Toggle: Provide your users with a dark mode option for a personalized experience.

By the end of this guide, you’ll have a fully functional portfolio website that you can customize and use to showcase your work to potential clients or employers.

Sharing the Source Code:

Feel free to Copy the complete source code for this portfolio project from the link below. You can customize it to fit your personal style and needs.


HTML Code

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfoliotitle>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
head>
<body>
    <header>
        <nav>
            <div class="logo">My Portfoliodiv>
            <ul>
                <li><a href="#about">Abouta>li>
                <li><a href="#skills">Skillsa>li>
                <li><a href="#projects">Projectsa>li>
                <li><a href="#testimonials">Testimonialsa>li>
                <li><a href="#contact">Contacta>li>
            ul>
            <div class="theme-toggle">
                <button id="theme-button">Toggle Dark Modebutton>
            div>
        nav>
        <div class="hero">
            <h1>Crafting Modern Web Experiencesh1>
            <p>Bringing creative ideas to life through design and code.p>
            <a href="#projects" class="cta-btn">View My Worka>
        div>
    header>

    <section id="about">
        <div class="container">
            <h2>About Meh2>
            <p>Hello! I'm [Your Name], a passionate web developer specializing in creating responsive and visually appealing websites. With a focus on clean design and efficient code, I strive to build web applications that are not only functional but also a joy to use.p>
        div>
    section>

    
    <section id="skills">
        <div class="container">
            <h2>Skillsh2>
            <div class="skills-grid">
                <div class="skill">
                    <h3>HTMLh3>
                    <div class="progress-bar">
                        <div class="progress" style="width: 90%;">div>
                    div>
                div>
                <div class="skill">
                    <h3>CSSh3>
                    <div class="progress-bar">
                        <div class="progress" style="width: 85%;">div>
                    div>
                div>
                <div class="skill">
                    <h3>JavaScripth3>
                    <div class="progress-bar">
                        <div class="progress" style="width: 80%;">div>
                    div>
                div>
                <div class="skill">
                    <h3>Reacth3>
                    <div class="progress-bar">
                        <div class="progress" style="width: 75%;">div>
                    div>
                div>
            div>
        div>
    section>

    <section id="projects">
        <div class="container">
            <h2>Projectsh2>
            <div class="projects-grid">
                <div class="project-card">
                    <div class="project-image" style="background-image: url('https://via.placeholder.com/600x400');">div>
                    <div class="project-info">
                        <h3>Project 1h3>
                        <p>A modern web application built with React and Node.js.p>
                        <a href="#" class="btn">View Projecta>
                    div>
                div>
                <div class="project-card">
                    <div class="project-image" style="background-image: url('https://via.placeholder.com/600x400');">div>
                    <div class="project-info">
                        <h3>Project 2h3>
                        <p>An e-commerce platform designed with a focus on user experience.p>
                        <a href="#" class="btn">View Projecta>
                    div>
                div>
                <div class="project-card">
                    <div class="project-image" style="background-image: url('https://via.placeholder.com/600x400');">div>
                    <div class="project-info">
                        <h3>Project 3h3>
                        <p>A personal blog built with Gatsby and GraphQL.p>
                        <a href="#" class="btn">View Projecta>
                    div>
                div>
            div>
        div>
    section>

    
    <section id="testimonials">
        <div class="container">
            <h2>Testimonialsh2>
            <div class="testimonials-grid">
                <div class="testimonial">
                    <p>"Working with [Your Name] was a pleasure. They delivered the project on time and exceeded my expectations!"p>
                    <h4>– Client Ah4>
                div>
                <div class="testimonial">
                    <p>"The website design is fantastic! I'm thrilled with the results and would highly recommend [Your Name]."p>
                    <h4>– Client Bh4>
                div>
                <div class="testimonial">
                    <p>"Professional, creative, and easy to work with. Couldn't ask for a better experience."p>
                    <h4>– Client Ch4>
                div>
            div>
        div>
    section>

    <section id="contact">
        <div class="container">
            <h2>Contact Meh2>
            <form id="contact-form">
                <div class="form-group">
                    <label for="name">Name:label>
                    <input type="text" id="name" name="name" required>
                div>
                <div class="form-group">
                    <label for="email">Email:label>
                    <input type="email" id="email" name="email" required>
                div>
                <div class="form-group">
                    <label for="message">Message:label>
                    <textarea id="message" name="message" rows="5" required>textarea>
                div>
                <button type="submit" class="btn">Send Messagebutton>
            form>
        div>
    section>

    <footer>
        <p>© 2024 [Your Name]. All Rights Reserved.p>
    footer>

    <script src="scripts.js">script>
body>
html>

CSS Code

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

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f9f9f9;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode {
    background-color: #333;
    color: white;
}

/* Fixed Navigation */
nav {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

nav .logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: white;
    margin-left: 20px;
}

nav ul {
    list-style: none;
    display: flex;
    margin-right: 20px;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #f39c12;
}

.theme-toggle {
    margin-right: 20px;
}

#theme-button {
    padding: 5px 10px;
    background-color: #f39c12;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#theme-button:hover {
    background-color: #e67e22;
}

/* Hero Section */
header {
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('pexels-abhilashsahoo-4346072.jpg') no-repeat center center/cover;
    padding: 0 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.cta-btn {
    padding: 10px 20px;
    background-color: #f39c12;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #e67e22;
}

/* Skills Section */
#skills {
    background-color: #fff;
    padding: 50px 20px;
}

.skills-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.skill {
    margin: 20px;
    width: 200px;
}

.progress-bar {
    background-color: #e0e0e0;
    border-radius: 25px;
    overflow: hidden;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: #f39c12;
}

/* Testimonials Section */
#testimonials {
    background-color: #f9f9f9;
    padding: 50px 20px;
}

.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.testimonial {
    background-color: white;
    padding: 20px;
    margin: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
}

.testimonial h4 {
    margin-top: 15px;
    font-weight: 500;
    color: #f39c12;
}

/* Projects Section */
#projects {
    background-color: #fff;
    padding: 50px 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.project-card {
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 10px;
}

.project-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.project-info {
    padding: 20px;
}

.project-info h3 {
    margin-bottom: 10px;
}

.project-info p {
    margin-bottom: 20px;
}

.btn {
    padding: 10px 15px;
    background-color: #f39c12;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #e67e22;
}

/* Contact Section */
#contact {
    background-color: #f9f9f9;
    padding: 50px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}


/* Form Styles */
form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

button.btn {
    width: 100%;
    padding: 12px;
    background-color: #333;
    color: white;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

button.btn:hover {
    background-color: #555;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
    margin-top: 50px;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
    nav ul {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: -100%;
        background-color: rgba(0, 0, 0, 0.8);
        width: 100%;
        transition: all 0.3s ease;
    }

    nav ul.show {
        left: 0;
    }

    nav ul li {
        margin: 10px 0;
        text-align: center;
    }

    .skills-grid {
        flex-direction: column;
        align-items: center;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }

    .skills-grid {
        flex-direction: column;
        align-items: center;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .testimonial {
        max-width: 90%;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .cta-btn {
        padding: 8px 15px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .cta-btn {
        padding: 6px 12px;
    }
}

JavaScript Code

// Smooth Scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Dark/Light Mode Toggle
const themeButton = document.getElementById('theme-button');
const body = document.body;

themeButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    themeButton.textContent = body.classList.contains('dark-mode') ? 'Toggle Light Mode' : 'Toggle Dark Mode';
});

PHP Code

No need

This project is open-source, and I encourage you to make it your own! If you find the code helpful, don't forget to give it a star on GitHub or share your customized version with me.

Tags:

Responsive Portfolio, Web Development, HTML, CSS, JavaScript, Front-End Development, Coding Tutorial, Create Portfolio, Web Design

Call to Action:

Ready to build your own responsive portfolio website? Follow the guide and get started today! Download the source code and start customizing your portfolio to showcase your work with style and professionalism.

Leave a Comment: