Create a Personal Portfolio Website from Scratch with HTML, CSS, and JavaScript 🔥

Posted by

Alfalfa

–

September 6, 2024

Creating a personal portfolio website is a great way to showcase your skills, projects, and experience to potential employers or clients. In this tutorial, I will guide you through building a personal portfolio website from scratch using HTML, CSS, and JavaScript.

Step 1: Set Up Your Project

Before we start coding, let’s set up our project folder. Create a new folder on your computer where you will store all your files for this project. Inside this folder, create three new files: index.html, style.css, and script.js.

Step 2: Design Your Portfolio Layout

In the index.html file, we will start by creating the basic structure of our portfolio website. Here is a simple template to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>This is where you can introduce yourself to visitors of your portfolio website.</p>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <div class="project">
                <h3>Project Title</h3>
                <p>Description of the project goes here.</p>
            </div>
        </section>
    </main>

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

Step 3: Style Your Portfolio

Now let’s move on to styling our portfolio website. In the style.css file, you can add custom styles to make your portfolio look unique and visually appealing. Here is an example of some basic styling you can start with:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

h2 {
    margin-bottom: 1rem;
}

.project {
    margin-bottom: 1.5rem;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
}

@media (max-width: 768px) {
    main {
        padding: 1rem;
    }
}

Step 4: Add Interactive Features with JavaScript

Finally, let’s add some interactive features to our portfolio website using JavaScript. In the script.js file, you can add functionality such as smooth scrolling, filtering projects, or creating a lightbox for images.

Here is an example of adding smooth scrolling to anchor links in our website:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Step 5: Deploy Your Portfolio

Once you have completed your portfolio website, you can deploy it to a web hosting service or share it through a code hosting platform like GitHub. Make sure to update the necessary files and configurations to ensure your portfolio is live and accessible to others.

Congratulations! You have successfully created a personal portfolio website using HTML, CSS, and JavaScript from scratch. Feel free to customize and expand your portfolio with more projects, sections, or features to showcase your skills and experience. Good luck with your portfolio!🚀

and, Angular, Angular.js, create, css, Express.js, from, Gatsby.js, html, javascript, Next.js, node.js, personal, portfolio, react.js, scratch, vite, vite.js, vue, Vue.js, website, with, 🔥

Alfalfa

0 0 votes

Article Rating

39 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

@CodeWithHarry

2 months ago

As pointed out by many in the comments, the website is not responsive. Who wants a part 2 of the video with added features and responsiveness?
If you are looking for the best Offer for buying hosting, check out this offer from Hostinger : https://hostinger.in/codewithharry

Use Coupon Code : CODEWITHHARRY (extra flat 10% OFF)