The first thing you should know is that all software developers should build a portfolio website. And in this tutorial article, you’ll learn all you need to know to create an amazing portfolio website using HTML and CSS.

Why Is It Important to Build a Portfolio Website?

Your portfolio website should do two things—display your skills and demonstrate your skills. Your website will display your skills through the projects that you showcase, but it should also demonstrate your skills through the site’s design and features.

Some developers make the mistake of using a development platform (such as Wix), to create their portfolio website. You might get away with this approach if you’re a back-end developer.

Creating Your Website

By the time you start to create your website, you should already know what colors you intend to use and the different sections you want to have on your website. Then you can create your HTML and CSS files. Your HTML file will start off with the document declaration, and some other mandatory tags (such as theandtags).

The index.html File

Adhering to the separation of concerns principle, which is the idea of compartmentalizing your program into sections, the HTML file above links to the following external CSS file:

The style.css File

You can reset default property values by using the asterisk (as you can see in the file above). This practice gives you more control over the HTML elements on your page.

Using the body element, you can set the font type that you want to display throughout your website. The CSS file above also has a collection of utility classes, which are classes that you intend to use in different sections throughout your website.

Creating the Navbar

Your navbar (or header) is the menu area that helps you navigate to the different sections on your website.

Every website has a Home section, and because this is a portfolio website it should also have a Projects and Portfolio section. Two other vital sections to include are the Contact page and the About page.

Updating your HTML and CSS files will produce the following output in your browser:

You’ll need to link to Font Awesome to display the icon in the navbar.

Creating the Home Page

The Home page is the first page that a visitor to your site will see. In this section, you can quickly introduce yourself and what you do.

Home Page HTML

Home Page CSS

Adding the code above to your existing file (and replacing the background URL with an image of your choice) will produce the following output in your browser:

Creating the Portfolio Section

The best portfolio website design style is to place your projects immediately after your Home page. A user visits your portfolio website to see your projects, then if they like what they see they might want to learn about you and contact you.

Projects Section HTML

Project Section CSS

Adding the code above to the respective HTML and CSS files will produce the following output in your browser:

Your portfolio should only contain your best projects (so no to-do list or task tracker apps). The aim is to provide quality over quantity, so instead of having twelve simple projects, try using that time to develop four to six advanced projects that show you can get the job done.

Creating a Portfolio Website: About Section

Your about section shouldn’t be wordy. You can use it to talk about your achievements and skill areas, then you can link it to your CV if the user requires more information.

About Section HTML

About Section CSS

About Section Preview

How to Make a Website From Scratch: The Contact Section

You want to make the process of contacting you extremely easy for every user that accesses your portfolio website.

Contact Section HTML

Contact Section CSS

Contact Section Preview

No website is complete without a footer section, and the following HTML code will create a simple one:

The Complete Website

Hosting Your Portfolio Website

Many hosting platforms offer free hosting services, and free hosting is a great option for projects that you build solely for portfolio purposes. Hiring managers and recruiters need to see that you can write clean code, but they also need to see your projects come to life.

However, when it comes to creating your actual portfolio website, you need to display professionalism by registering a custom domain name.