"Create A Personal Portfolio Website Pt1 | HTML, CSS, & JavaScript" marks the beginning of an exciting journey into the world of web development and personal branding. This multipart series is designed to guide you through the process of building a personal portfolio website from scratch, using the foundational technologies of HTML, CSS, and JavaScript.
Your personal portfolio is more than just a collection of work; it's an opportunity to tell your story, connect with your audience, and leave a lasting impression. With this series, you'll learn how to craft a stunning and functional portfolio that not only highlights your talents but also reflects your unique style and vision.
This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.
If interested in watching the video before running the code below, you can click the play button to get started.
First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a personal portfolio</title>
</head>
<body>
<!-- <div class="whitebg"></div> -->
<div class="yellowbg"></div>
<nav>
<div><h1>Uptodate <span>Academy</span></h1></div>
<div>
<img src="bars.png" alt="" class="opennv">
<div class="items">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Experiences</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="page_desc">
<div>
<span>ui/ux designer & developer</span>
<h1>i'm john <br> Schmidt</h1>
<a href="#" class="about">more about me →</a>
<a href="#" class="hire">hire me →</a>
<footer>
<p>Copyright ©2023 All rights reserved | This template is made by <a href="#">Uptodate Academy</a></p>
</footer>
</div>
<div class="web_img">
<div>
<img src="img1.webp" alt="" class="userImg">
</div>
</div>
</div>
<div class="select_image">
<div><img src="img1.webp" alt="" class="img1"></div>
<div><img src="img2.webp" alt="" class="img2"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
overflow: hidden;
background: #f2f2f2;
}
.yellowbg {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #D5C455;
}
nav {
width: 80%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
top: 40px;
margin: 0 auto;
}
nav div {
position: relative;
z-index: 1;
}
nav div h1 {
color: #222222;
line-height: 1.1;
font-weight: 900;
font-size: 24px;
font-family: Poppins, Arial, sans-serif;
}
nav div h1 span {
color: #0d6efd;
}
nav div img {
cursor: pointer;
width: 35px;
}
nav div .items {
position: absolute;
left: -103px;
height: 0;
overflow: hidden;
background: #fff;
}
nav div .items ul {
list-style: none;
}
nav div .items ul li {
padding: 8px 25px;
}
nav div .items ul li a {
text-decoration: none;
font-size: 13px;
font-family: Poppins, Arial, sans-serif;
color: #000000B3;
font-weight: 550;
padding-right: 25px;
}
nav div .items ul li a.active {
color: #D5C455;
}
.open nav div .items {
height: auto;
}
.page_desc {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
width: 80%;
height: 100vh;
font-family: Poppins, Arial, sans-serif;
}
.page_desc div {
width: 50%;
}
.page_desc div span {
text-transform: uppercase;
font-weight: 600;
color: #D5C455;
font-size: 16px;
}
.page_desc div h1 {
font-size: 80px;
font-weight: 700;
color: #222222;
text-transform: capitalize;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.page_desc div a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
padding: 16px 24px;
}
.page_desc div a.about {
background: #D5C455;
color: #fff;
}
.page_desc div a.hire {
background: #fff;
color: #000000;
}
.page_desc div footer {
position: absolute;
left: 0;
bottom: 40px;
font-size: 14px;
color: #00000066;
font-family: Poppins,Arial,sans-serif;
}
.page_desc div footer a {
padding: 0;
text-transform: capitalize;
color: #D5C455;
}
.web_img div {
width: 100%;
}
.web_img div img {
width: 90%;
height: 100vh;
object-fit: cover;
object-position: center;
}
.select_image {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
align-items: center;
width: 100px;
}
.select_image div img {
width: 40px;
cursor: pointer;
}
<script> const openNav = document.querySelector(".opennv"); const body = document.querySelector("body"); openNav.addEventListener("click", e => { body.classList.toggle("open"); if(body.classList.contains("open")) { openNav.src = "exit.png"; }else { openNav.src = "bars.png"; } }) const selectImage = document.querySelector(".select_image"); const img = selectImage.querySelectorAll("img"); img.forEach(img => { img.addEventListener("click", e => { if(e.currentTarget.classList.contains("img1")) { const userImg = document.querySelector(".userImg"); userImg.src = "img1.webp"; }else if(e.currentTarget.classList.contains("img2")) { const userImg = document.querySelector(".userImg"); userImg.src = "img2.webp"; } }) }) </script>
0 Comments
We are happy to hear from you.