Simple Portfolio Website using HTML CSS | Portfolio Website Source code
Welcome to the kitchen! What’s cooking? Well today I’ll be making a visually delicious portfolio website. What is a portfolio website, you ask?
Well, everyone needs websites and web applications nowadays. So there are many opportunities for you if you work as a web developer. But if you want to get a web developer job, you’ll need a good portfolio website to showcase your skills and experience. A developer portfolio website provides relevant information to potential employers about your skills, experience, and projects you’ve worked on. You can consider your it to be your online résumé.
So, our ingredients for this cuisine will be HTML and CSS. I’m assuming you have a basic knowledge of both. When you actually want to deploy this portfolio website, you’ll need to work on the backend so that viewers can click and navigate to the desired pages. But today is all about looks, i.e., the frontend! Even JavaScript remains out of the scope, because I want you to know how HTML and CSS alone can shine as great website makers (and also cause I want to keep this beginner friendly).
Note: I love using the VS Code IDE for building my projects and I’ll recommend it to you as well. It comes with a number of extensions to ease your code writing and formatting. It’s not related to this blog but hey, a free advice is no harm right? Download it from here.
So, without further ado, let’s hop right into our recipe!
First and foremost, we need to make the backbone of our website, an HTML file. I made the HTML file and named it ‘index.html’. Since we’ll be using CSS as well, in the same folder I made a CSS file, named ‘styles.css’. In the index.html, we need to give the following lines of code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&family=Poppins:wght@200&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
</body>
</html>
If you’re using VS Code and have an HTML extension installed, you just need to type ‘!’ and press enter. If you’re not, feel free to copy paste these lines. Discussing about them is not necessary, just know that they let the browser know you’re trying to run a webpage. Also, they are importing all the CSS you’ll be writing in ‘styles.css’.
Now take a look at what we’re building.
I know, I know, it’s a masterpiece, isn’t it? And no, I am not the handsome guy in the picture… I look a lot better. Anyway now look only at the top.
This is the navigation bar. It’s like a must have in all your websites. So, we’ll make this first. Make sure to write the code between the opening and closing body tag (<body></body>).
<body>
<header>
<div class="container">
<nav class="flex items-centre justify-between">
<div class="left flex justfiy-right">
<div class="logo">
<img src="./images/logo.png" width="50px" alt="logo">
</div>
<div>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Blog</a></li>
<a href="#">More</a>
</div>
</div>
<div class="right">
<button class="btn btn-primary">Contact</button>
</div>
</nav></div>
</header>The logo I used was downloaded from a website. Relax, it’s royalty free. In fact all the icons and images in this blog are downloaded. While there’s no denying that these icons and pictures play a huge part in your website’s appearance, my goal was to tell you how to incorporate these pictures in your site and not to spend hours in Photoshop designing my own beautiful and ‘original’ icons. But whenever you make a website, it’s your duty to include visually appealing images, that too original ones. If you’re following this tutorial, try to take out some time and get your own logo. You can make one here or simply download from here. You’re welcome.
So this is what our nav bar looks for now:
Don’t worry. You’ll get exactly what was advertised, just follow along. Let’s put in that model’s image and the text we want to display.
<div class="hero flex items-centre justify-between">
<div class="left flex-1 justify-center">
<img src="./images/main-img.png" alt="Profile">
</div>
<div class="right flex-1">
<h6>Akshat Sharma</h6>
<h1>I'm a Web<br> <span>Developer</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque illum nam nobis, minima
laudantium fugit sequi nostrum quod impedit, beatae necessitatibus praesentium optio labore
nemo!</p>
<div>
<button class="btn btn-secondary">DOWNLOAD CV</button>
</div>
</div>
</div>Unless your name is Akshat Sharma, which makes us name twins by the way, make sure to change the name you’re displaying in the <h6> tag. You should also replace the Lorem Ipsum text with something more suitable. In fact, any text that is being displayed is subject to change as per your wish.
By now, you’re probably itching to use CSS. I originally planned to keep the styling at last but it is important for the developer to know how his/her website is looking at any given time to make further changes. Let’s dive into CSS right away!
A piece of advice: Your CSS file will go on forever if you keep writing in one. That’s why I made two files, a ‘styles.css’, for styling of all our classes and elements, and a ‘utilities.css’, for defining styles we might need for more than one element. You’ll see as we continue.
@import 'utilities.css';
:root{
--primary: rgb(29, 221, 189);
--bgDark: rgb(12, 12, 12);
--white: rgb(250, 250, 250);
--secondary: rgb(0, 59, 50);
--bgLight: rgb(190, 181, 181);
}This is the beginning of ‘styles.css’ Notice we need to import ‘utilities.css’ to incorporate all the styling we’re doing in that. I decided of a colour scheme beforehand so that I don’t keep breaking my flow thinking of colours. I declared variables corresponding to the colours I’ll need using the ‘:root’. CSS understands colours only as RGB values. These values, corresponding to their respective colours, are impossible to remember. The HTML CSS Support extension for VS Code helped me select my colours easily. See? Cool IDEs always help. In case you’re not able to use that, you can get your colour’s RGB, HSV or hexadecimal value from here.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
header{
background-color: var(--bgDark);
clip-path: polygon(0 0, 100% 0, 100% 100%, 73% 94%, 0 100%);
}
header nav .left a{
color: var(--white);
text-decoration: none;
margin-right: 2rem;
text-transform: uppercase;
transition: all .2s ease;
}
header nav .left a:hover{
color: var(--primary);
}
header nav {
padding: 2rem 0;
}
header nav .logo{
margin-right: 3rem;
}This is the CSS for the header and navigation bar and the code goes in ‘styles.css’. And this, is the product:
Black is my favorite color! It’s a real life saver when you have no clue how you want your background to be. Take a look at the CSS for the ‘hero’ class now.
body{
font-family: 'Poppins', sans-serif;
}
.container{
max-width: 1152px;
padding: 0 15px;
margin: 0 auto;
}
.hero{
padding-top: 2rem;
padding-bottom: 3rem;
}
.hero .left img{
width: 400px;
}
.hero .right {
color: var(--white);
margin-top: -7rem;
}
.hero .right h6{
font-size: 1.6rem;
color: var(--primary);
margin-bottom: 0.5rem;
}
.hero .right h1{
font-size: 4rem;
font-weight: 100;
line-height: 1.2;
margin-bottom: 2rem;
}
.hero .right h1 span{
color: var(--primary);
}
.hero .right p{
line-height: 1.9;
margin-bottom: 2rem;
}Did you notice how I avoid using pixel values as much as possible. Thing is, pixels are absolute units. Changing other values have no affect on px values and this makes it pretty antiquated. ’em’ and ‘rem’, however, change their values with respect to the change in parent or root elements. It makes them responsive. Read more about the differences here. The explanation’s pretty good.
Now to work on those buttons and the overall alignment we’ll type our magic spell, the one you call CSS. This one goes in our ‘utilities.css’. Open the file and type the following:.flex{
display: flex;
}
.items-centre{
align-items: center;
}
.justify-between{
justify-content: space-between;
}
.justify-center{
justify-content: center;
}
.justify-right{
justify-content: right;
}
.btn{
padding: 0.6rem 2rem;
font-size: 1rem;
font-weight: 600;
border: 2px solid transparent;
outline: none;
cursor: pointer;
text-transform: uppercase;
transition: all .2s ease;
}
.btn-primary{
background-color: var(--primary);
color: var(--secondary);
margin-top: -15rem;
}
.btn-primary:hover{
background: transparent;
border-color: var(--primary);
color: var(--primary);
}
.flex-1{
flex: 1;
}
.btn-secondary{
background: transparent;
color: var(--primary);
border-color: var(--primary);
}
.btn-secondary:hover{
background: var(--primary);
color: var(--secondary);
}The end product? Here it is!
“Truly a piece of art”. Not my words!
A lot of our job here was done by the flexbox property. If you’re unaware of flexbox, you should really learn about it. It’s one of the most important and useful layout properties in all of CSS, and is luckily quite easy to understand. In a hurry? Then Learn Flexbox in 15 Minutes, and continue to build your cool website. Obviously going through some documentation sounds fun too, doesn’t it? Find the complete guide here.Alright, now let’s work on a little description part of our site. You can use it to tell the cool things about yourself.TIP: Don’t overdo it.<section class="about">
<div class="container flex items-centre">
<div class="left flex-1 justify-right">
<img src="./images/man2.png" height="400px" alt="profile pic">
</div>
<div class="right flex-1">
<h1>About <span>Me</span></h1>
<h3>Hello! I'm Akshat Sharma.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque adipisci distinctio obcaecati aliquid,
quia tempora quis optio repudiandae officia earum?
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</p>
<div class="socials">
<a href="#"><img src="./images/website.png" width="40px"></a>
<a href="#"><img src="./images/facebook.png" width="40px"></a>
<a href="#"><img src="./images/instagram.png" width="40px"></a>
<a href="#"><img src="./images/media-player.png" width="40px"></a>
</div>
</div>
</div>
</section>It is imperative for you to understand how ‘px’, ’em’ and ‘rem’ works. And what’s a better way of learning than to try it out yourself? Play with these values and understand the difference. Change them according to the look you desire and don’t even worry about messing up the code. You can come back here again and again. Whether you want to copy paste the code or understand how it works, we’ve got you covered.
Again, the icons and the images used were downloaded from free-to-use websites. You can choose any images you like. Just make sure to give the full path in ‘img src=” “‘ part. We used the classes defined in the ‘utilities.css’ file to ease our layout work and will continue to do so. So now you get why we made two CSS files.Though not extraordinary, this design resonates with the formal vibe you’d want to give to your website.
section{
padding: 6rem;
}
section.about h1{
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: 600;
}
section.about h1 span{
color: var(--primary);
}
section.about h3{
font-size: 1rem;
margin-bottom: 1rem;
font-weight: 600;
}
section.about p{
font-family: 'Lato', sans-serif;
color: var(--secondary);
line-height: 1.9rem;
margin-bottom: 2rem;
}
section.about .socials{
display: flex;
}
section.about .socials a{
display: flex;
align-items: center;
justify-content: center;
width: 35px;
margin-right: 0.8rem;
border-radius: 50%;
}
section.about .socials a:hover{
background: var(--primary);
}This CSS code goes in the ‘styles.css’. It handles the margins and paddings individually, but we don’t have to do much as our previously defined classes already handled most of the layout process. To make our website look a little responsive, I use the ‘:hover’ selector a lot. I’ve used it on all our buttons and the social media icons. Basically, it defines what happens when the cursor points to or ‘hovers’ over the specified element. A little colour transition is enough to breathe life into our webpage.Well, this does smell nice! We’ll now be working on the last part, though certainly not the least. Although your CV is a more true record of your skills and achievements, we need your services to be visible to the viewer at a glance.Define another section in the ‘index.html’ and type in the code as follows:<section class="services">
<div class="container">
<h1 class="services-head">Services</h1>
<p>All your digital needs... covered.</p>
<div class="card-grid">
<div class="card">
<img src="./images/graphic-design.png">
<h2>Graphic Desgin</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
</div>
<div class="card">
<img src="./images/world-wide-web.png">
<h2>Web Development</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
</div>
<div class="card">
<img src="./images/blogger.png">
<h2>Content Writing</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
</div>
</div>
</div>
</section>
Bold is beautiful, sure. But this is too loud, and, in fact, a disgrace to our development skills. Let’s do the aligning and styling and make it look a little subtle. Now even though flexbox is an awesome tool to help us with layouts, we have one more trick up our sleeve. This, my friends, is called the CSS Grid Layout, or simply, the Grid. Simply put, grid is our trump card in handling layouts and designs. In fact, it has the responsive touch we need for our sites. I know how much you love reading long documentations, so here you go! There are a number of YouTube tutorials to learn from as well, so go explore!
Our ‘styles.css’ just needs the following block of code now.section.services{
background: rgb(17, 17, 17)
}
.services-head{
color: rgb(10, 9, 9);
text-align: center;
margin-bottom: 1rem;
line-height: 0.5rem;
color: var(--primary);
}
.services-head + p{
color: var(--white);
font-family: 'Lato', sans-serif;
margin-bottom: 1rem;
text-align: center;
margin-bottom: 6rem;
font-weight: 400;
}
.card img{
width: 50px;
background:white;
}
section.services .card-grid{
display: grid;
grid-template-columns: repeat(3,1fr);
column-gap: 2rem;
}
section.services .card-grid .card{
background: var(--white);
padding: 3rem 2rem;
position: relative;
text-align: center;
transition: all .2s ease;
}
section.services .card-grid .card img{
position: absolute;
top: -1.5rem;
left: 50%;
transform: translateX(-50%);
color: var();
}
section.services .card-grid .card h2{
font-weight: 600;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
section.services .card-grid .card p{
font-family: 'Lato', sans-serif;
color: var(--seconday);
line-height: 1.6;
}
section.services .card-grid .card:hover{
background: var(--primary);
}
section.services .card-grid .card:hover h2{
color: var(--white);
}
section.services .card-grid .card:hover p{
color: var(--white);
}And my dear friends, we did it! No really. That’s all. Our beautiful Portfolio Website is ready to be shown off to the world.
These cards have the hover property as well. So when u take the cursor on them, the background colour and the text colour, both change.
Our cuisine is finally prepared! This was fun, was it not? The entire code and it’s end product are all yours now. Change the colours, the properties and feel free to mess it up as much as you want. I mean that’s the best way to learn anything, trust me.
Feel free to ask me as many doubts as you want in the comments below. Alternatively, you could reach out to me on Instagram. I like my DMs filled.So, with a heavy heart, I’ll be taking your leave. But hey, I’ll be back with more blogs, so you don’t go anywhere! Thanks for visiting CodeWithRandom, goodbye!-Akshat Sharma
Check out more…
Wwwwooo