How to create a GoDaddy Responsive Portfolio Website with HTML, CSS & JAVASCRIPT

Last Updated on October 1st, 2021 by Codevo
portfolio website html css and javascript

Hello, and welcome to another article where am going to take you through how you can build a great-looking Responsive Portfolio Website with HTML, CSS and JAVASCRIPT.

In my preview article, I wrote about how to create a Responsive Ecommerce Website with HTML, CSS and JAVASCRIPT.

If you haven't checked it out then do so because it contains a lot of valuable information you don't want to miss.

Now you might be asking what is a Portfolio website and why do you need a Portfolio Website. Wait a minute let me make everything clear to you.

Download Images if you want to code along

What is a Portfolio Website

Let’s start by defining what a portfolio website is.

A portfolio website provides detailed information about an individual or a company and presents different works of the individual or company.

Below are two portfolio website examples:

1.

portfolio website html css and javascript

2.

portfolio website html css and javascript

From the above two examples, you noticed the similarities based on their functionality and showcase.

  • Both provide visitors information about the individual and company
  • Both show the individual's or company's work.

Purpose of a Portfolio Website

The primary purpose of a Portfolio Website is to display great content about the individual or company and also provide basic information in order to get more leads for the company.

Also, it provides enough information to potential employers about the individual.

Video Tutorial of How You Can Build a Portfolio Website

In the above video, you’ve seen how you can create your own Responsive Personal Portfolio Website and I want you to make it more attractive by adding your own ideas and designs.

I tried my best to make this video understandable for all viewers and I’ve shown every output in the video.

If this video has been helpful to you, don’t forget to subscribe, like and leave a comment.

You might Like this:

  1. Responsive Portfolio Website
  2. Responsive Ecommerce Website
  3. Website with Video Background

Things Needed:

1. Animate On Scroll https://michalsnik.github.io/aos/

2. TypeIt https://typeitjs.com/

3. SwiperJs https://swiperjs.com/

4. Boxicons https://boxicons.com/

How to Build a Portfolio Website

1. Create a new project directory on your computer with any name of your choice.

Open the project with a text editor but in my case, I’m going to use Visual Studio Code. Now the text editor you use doesn’t affect the final code.

You can use any text editor like bracket, atom and so on.

2. Create an HTML file and within the HTML file let’s create a boilerplate by pressing[Swift and the exclamation sign] simultaneously. Aright, let’s change the title of the portfolio website.

3. Let’s write down some comments on the CDN links we are going to include in the project.

What you must know is in order for the CDN links to work you must be connected to the internet.

4. It’s now time to bring in all our CDN links, so open your browser and search for cdnjs.com.

5. What we are going to do is to copy all the CDN css links at the same time and paste them one by one in our HTML using a cool little trick.

6. Let’s do likewise for the CDN scripts. So go back to the browser and in cdnjs let’s search for the following. Head back to our HTML and paste them

7. Now let’s include boxicons. In this tutorial we are going to use boxicons instead of font awesome icons. So let’s go back to our browser and search for boxicons.com.

8. Alright, in our project directory let’s create two new files with the names styles.css and index.js. Now let’s include them in our HTML.

9. Let’s go to our CSS and write down some reset css and color variables. Am going to copy and paste the colors, you can also copy and paste them from my website. Link will be in the description.

HTML

<!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" />
<!-- Boxicons -->
<link
href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
rel="stylesheet"
/>
<!-- AOS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
/>
<!-- Swiper -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.css"
/>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="styles.css" />
<title>My Portfolio Website</title>
</head>
<body>
<!-- Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.js"></script>
<!-- AOS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- Typeit -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/7.0.4/typeit.min.js"></script>
<!-- Custom Script -->
<script src="index.js"></script>
</body>
</html>
index.html

CSS

/* Reset CSS */
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: inherit;
}
:root {
--blueColor-1: #7462e1;
--blueColor-2: #3641b7;
--blueColor-3: #42caff;
--orange: #ff4600;
--purple: #ce00ff;
--greenColor: #ccffab;
--pinkColor: #ff6174;
--borderColor: #eeefff;
--black: #121713;
--grey: #232424;
--grey2: #494646;
--white: #fff;
--customColor: #42caff;
--transition-1: all 300ms ease-in-out;
--transition-2: all 500ms ease-in-out;
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-size: 62.5%; /*1.6rem = 16px*/
}
body {
font-family: "Open Sans", sans-serif;
font-size: 1.6rem;
font-weight: 400;
background-color: var(--white);
color: var(--black);
transition: var(--transition-2);
}
body.dark {
--white: #000106;
--black: #fff;
--grey: #fff;
--grey2: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
i {
transition: var(--transition-2);
}
img {
width: 100%;
}
.container {
max-width: 99.6rem;
margin: 0 auto;
}
.d-flex {
display: flex;
align-items: center;
}
styles.css

If you like this portfolio and want to get the source codes of this tutorial, I have provided all the codes of this Responsive Portfolio Website below.

Also, I've provided the download link of this program where you can easily download the source files of this program.

You can use this portfolio with your own designs and ideas.

Github link

Download Code Files

1 COMMENTS

avator
Tushar LAugust 4th, 2021

Great work ...

LEAVE A REPLY