Creating a Stunning Portfolio Website from Scratch using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a professional portfolio website from scratch using HTML, CSS, and JavaScript. Get tips for planning, designing, and optimizing your website for user experience, cross-browser compatibility, SEO, and web performance.

Join us on Telegram
creating a stunning portfolio website from scratch using html, css, and javascript.jpg
Read Alsothe ultimate collection of css loaders and spinners for your website.jpgThe Ultimate Collection of CSS Loaders and Spinners for Your Website (Source code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In today's digital age, having a professional online portfolio is essential for anyone looking to showcase their skills and work. Whether you're a designer, developer, or artist, a well-designed portfolio website can help you stand out from the crowd and attract new clients or job opportunities. In this tutorial, we'll show you how to create a stunning portfolio website from scratch using HTML, CSS, and JavaScript. We'll cover everything from planning and designing your website to coding and publishing it online. By the end of this guide, you'll have a beautiful, fully-functional portfolio website that you can be proud of.

Let's start making a stunning portfolio website Using HTML, CSS, and JavaScript step by step.

Created by: Yasin

Join My Telegram Channel to Download the Project: Click Here

Source Code

Step 1 (HTML Code):

The first step in creating your portfolio website is to set up the basic HTML structure. HTML (Hypertext Markup Language) is the foundation of all websites and is used to create the structure and layout of a webpage. To begin, create a new HTML document and add the basic structure, including the doctype declaration, head, and body elements.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of your portfolio website using HTML, and now we can move on to styling it using CSS.

Read Alsocreate your own 2048 game online with html, css and javascript (source code).jpgCreate Your Own 2048 Game Online with HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Once you have the basic HTML structure in place, the next step is to add CSS (Cascading Style Sheets) to give your portfolio website a polished and professional look. CSS is used to control the visual presentation of elements on a webpage, such as colors, fonts, layouts, and spacing.

To add CSS to your portfolio website, you can either link to an external CSS file or include the CSS code directly in the head of your HTML document. If you choose to use an external CSS file, make sure to link to it in the head of your HTML document using the <link> tag.

When it comes to styling your portfolio website, you can use CSS selectors to target specific HTML elements and apply styles to them. You can also use CSS classes and IDs to give elements unique styles.

It's also a good idea to use a CSS framework like Bootstrap, which provides pre-built styles and layout options that you can easily customize. This can save a lot of time and effort and make your website responsive on different devices.

Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension and make sure it's linked properly to your HTML document, so that the styles are applied to your webpage.

@import url('https://fonts.googleapis.com/css2?family=Cairo+Play:wght@700&family=Share+Tech+Mono&family=Vazirmatn:wght@200&display=swap');
:root{
    --dark-color:#223322;
    --font-light:#ffffff;
    --font-dark:#9d9d9d;
    --light-color:rgba(161,180,150,0.55);
}

*{

    padding: 0;
    margin: 0;
    font-family: 'Share Tech Mono', monospace;
}
body{
    background-color: black;
    height: 1500px;
}
h1 {
    font-size: 50px;
}
#Navbar{
    background-color: var(--dark-color);
    border-radius: 5px;
    z-index: 99;
}
#Navbar a {
    color :var(--font-dark);
    font-size: 25px;
    margin-left: 38px;
}
#Navbar a:hover {
    transform: scale(101%);
    color: var(--font-light);
}
#Profile {
    background-color: var(--light-color);
    color: var(--font-light);
    border-radius: 5px;
    transition: 666ms;
}
#Profile img {
    height: 250px;
    margin: auto;
    display: block;
    border: 1px solid black;
    border-radius: 5px;
}
#Profile h1 {
    color: var(--font-dark);
}
@media only screen and (max-width: 575px) {
    .skill button {
        display:  block;
        width: 200px;
        margin: auto;
    }
    .skill a {
        text-decoration: none;
    }
}

canvas {
    display:block;
    position: fixed;
    z-index: -100;
    background-repeat: repeat-y;

}

.section-box{
    background-color: var(--light-color);
    color: var(--font-light) ;
    border-radius: 5px;
    transition: 666ms;
}
.section-box p {
    font-size: 25px;
}
.section-box h1 {
    color: var(--font-dark);
}
.val{
    float: right;
}
.section-box:hover{
    background-color: var(--dark-color);
    color: var(--font-light) ;
    border-radius: 5px;
}
#Profile:hover{
    background-color: var(--dark-color);
}

button {
    --green: #1BFD9C;
    font-size: 15px;
    padding: 0.7em 2.7em;
    letter-spacing: 0.08em;
    position: relative;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.4s;
    line-height: 1.4em;
    border: 2px solid var(--green);
    background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%);
    color: var(--green);
    box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
}

button:hover {
    color: #82ffc9;
    box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
}

button:before {
    content: "";
    position: absolute;
    left: -4em;
    width: 4em;
    height: 100%;
    top: 0;
    transition: transform .4s ease-in-out;
    background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%);
}

button:hover:before {
    transform: translateX(15em);
}

#Education span {
    color: black;

}
a{
    text-decoration: none;
}
#bgLinks {
    width: 100%;
    background-color: black;
    height: 300px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    background: rgba(36,39,52,0.5);
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
    border-radius: 5px;
}

#footer h3 {
    font-size: 36px;
    font-weight: 700;
    color: var(--font-light);
    position: relative;
    font-family: "Poppins", sans-serif;
    padding: 0;
    margin: 0 0 15px 0;
}

#footer p {
    font-size: 15px;
    font-style: italic;
    padding: 0;
    margin: 0 0 40px 0;
}

#footer .social-links {
    margin: 0 0 40px 0;
}

#footer .social-links a {
    font-size: 18px;
    display: inline-block;
    background: var(--light-color);
    color: #fff;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
}

#footer .social-links a:hover {
    background: var(--dark-color);
    color: #fff;
    text-decoration: none;
}

#footer .copyright {
    margin: 0 0 5px 0;
}

#footer .credits {
    font-size: 13px;
}


.Pcontainer {
    width: 80%;
    padding: 50px 0;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
}

.Pcontainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: #CCD1D9;

}

.timeline-block {
    width: -webkit-calc(50% + 8px);
    width: -moz-calc(50% + 8px);
    width: calc(50% + 8px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    clear: both;
}

.timeline-block-right {
    float: right;
}

.timeline-block-left {
    float: left;
    direction: rtl
}

.marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #F5F7FA;
    background: black;
    margin-top: 10px;
    z-index: 10;
}

.timeline-content {
    width: 95%;
    padding: 0 15px;
    color: var(--font-light);
}

.timeline-content h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 500
}

.timeline-content span {
    font-size: 15px;
    color: var(--font-dark);
}

.timeline-content p {
    font-size: 14px;
    line-height: 1.5em;
    word-spacing: 1px;
    color: var(--font-light);
}


@media screen and (max-width: 768px) {
    .Pcontainer:before {
        left: 8px;
        width: 2px;
    }
    .timeline-block {
        width: 100%;
        margin-bottom: 30px;
    }
    .timeline-block-right {
        float: none;
    }

    .timeline-block-left {
        float: none;
        direction: ltr;
    }
}

Step 3 (JavaScript Code):

With the HTML structure and CSS styling in place, the next step is to add JavaScript to your portfolio website to make it more interactive and dynamic. JavaScript is a programming language that can be used to add a wide range of interactive features to a website, such as form validation, image sliders, and animations.

To add JavaScript to your website, you can either link to an external JavaScript file or include the JavaScript code directly in the head or body of your HTML document. If you choose to use an external JavaScript file, make sure to link to it in the head or body of your HTML document using the <script> tag.

When it comes to adding JavaScript functionality to your portfolio website, you can use DOM (Document Object Model) manipulation techniques to access and manipulate HTML elements.

When adding JavaScript functionality to your portfolio website, be mindful of the user experience and overall functionality. Make sure that the interactive features you add are relevant and enhance the user's experience, not detract from it.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page.

// geting canvas by id c
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
//converting the string into an array of single characters
matrix = matrix.split("");

var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1;

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chinese character to print
        var text = matrix[Math.floor(Math.random()*matrix.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);

        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;

        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 35);

Final Output:

creating a stunning portfolio website from scratch using html, css, and javascript.gif
Read AlsoHow to Create a Search Bar using Tailwind CSS.jpgHow to Create a Search Bar using Tailwind CSS: Step-by-Step Guide

Conclusion:

In conclusion, creating a stunning portfolio website from scratch using HTML, CSS, and JavaScript is a great way to showcase your skills and talent as a creative professional. By following the steps outlined in this article, you can design and develop a website that reflects your personal brand and message, while also providing an enjoyable user experience. Remember to optimize your website for speed, accessibility, and SEO to ensure it reaches your target audience effectively. By sharing your portfolio website and asking for feedback, you can continue to improve and refine your skills as a web developer and designer. Good luck on your journey toward creating a successful portfolio website!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: portfolio website, html, css, javascript, landing page
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post