Design Definition of CSS Property

What are css properties, and how to you use them.

  • Parts of a CSS Rule

CSS Property Basics

Some css properties, properties need values.

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

A website's visual style and layout are dictated by CSS or Cascading Style Sheets . These are documents that shape a webpage's HTML markup, providing web browsers with instructions on how to display the pages that result from that markup. CSS handles a page's layout, as well as color, background images, typography, and so much more.

If you look at a CSS file, you will see that, like any markup or coding language, these files have a specific syntax to them. Each style sheet is made up of a number of CSS rules. These rules, when taken in full, are what styles the site.

The Parts of a CSS Rule

A CSS rule is made up of two distinct parts — the selector and the declaration. The selector determines what is being styled on a page, and the declaration is how it should be styled. For example:

This is a CSS rule. The selector part is the p , which is an element selector for "paragraphs." It would, therefore, select ALL paragraphs in a site and provide them with this style (unless there are paragraphs that are targeted by more specific styles elsewhere in your CSS document). 

The part of the rule that says, " color: #000; " is what is known as the declaration. That declaration is made up of two pieces — the property and the value . 

The property is the color piece of this declaration. It dictates which aspect of the selector will be changed visually. 

The value is what the chosen CSS property will be changed to. In our example, we are using the hex value of #000 , which is CSS shorthand for "black."

So using this CSS rule, our page would have paragraphs displayed in a font-color of black.

When you write CSS properties, you cannot simply make them up as you see fit. For instance, "color" is an actual CSS property, so you can use it. This property is what determines the text color of an element. If you tried to use "text-color" or "font-color" as CSS properties, these would fail because they are not actual parts of the CSS language.

Another example is the property "background-image." This property sets an image that can be used for a background, like this:

If you tried to use "background-picture" or "background-graphic" as a property, they would fail because, once again, these are not actual CSS properties.

There are a number of CSS properties that you can use to style a site. Some examples are:

These CSS properties are great ones to use as examples, because they are all very straightforward and, even if you do not know CSS, you can probably guess what they do based on their names. 

There are other CSS properties that you will encounter as well which may not be as obvious how they work based on their names:

As you get deeper into web design, you will encounter (and use) all these properties and more!

Every time you use a property, you must give it a value — and certain properties can only accept certain values.

In our first example of the "color" property, we need to use a color value. This could be a hex value, RGBA value, or even color keywords . Any of those values would work, however, if you used the word "gloomy" with this property, it would do nothing because, as descriptive as that word may be, it is not a recognized value in CSS.

Our second example of "background-image" requires an image path to be used to fetch an actual image from your site's files. This is the value/syntax that is required.

All CSS properties have values that they expect. For example:

If you go through the list of CSS properties, you will discover that each of them has specific values that they will use to create the styles they are intended for.

portfolio design html css

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

CSS for print designers

Don't be scared of CSS - as Michael Dambold explains, it's a bit like setting up an InDesign document!

A Cascading Style Sheet is essentially a control mechanism. Anything that you write in CSS code – within proper guidelines – can be used to control the presentation of elements on an individual page or an entire website. I graduated with a degree in print design and worked as a media director and layout editor before I became a web designer. The Eureka moment for me, which I had early on, was finding the similarities between CSS and setting page parameters, character styles and paragraph styles in InDesign. HTML controls the structure of the document, while CSS is used to control the presentation of elements within the document. The word ‘cascading’ simply refers to the way in which the CSS rules are applied to HTML pages, while ‘style sheet’ is just that:a list of rules for the way a designer wants elements on a page to be styled, including font colour, font size, font height, padding, margins, text decoration and so on. Anything that is used as a CSS rule will need to be referenced within the area in which the designer wants it to be applied. For example, if we create a rule for maroon text that’s going to appear over an entire section on multiple pages of a website, the first step will be to write the rule itself:

.huzzah {color:#5E2525}

Formatting or style rules are placed inside curly brackets and are in two parts, divided by a colon:the property (such as ‘colour’) and the value (in this case the colour hex code). If a second rule is added – to underline the text, for instance – a semi-colon is used to tell the browser it’s moving on to another rule:

.huzzah {color:#5E2525; text-decoration:underline;}

The full stop before the name – . huzzah – signifies that this is a ‘class’ selector and the style will be used more than once. If we put a hash (#) before the name instead – #huzzah – it would be an ID. IDs are used for a specific purpose and are generally used once per a page. The ‘. huzzah’ part itself is the selector, which tells the web page which element to style. Then we need to link the name with the element that we want to style on the page:

<p class="huzzah">

This is for a connected external stylesheet. For inline styles – where CSS rules are simply written within the code for one individual page – you would use the word ‘style’ instead of ‘class’. This tells the paragraph to look at this particular CSS rule in the stylesheet. The most common mistakes that I see are mixing up classes and IDs. I’ve had to fix multiple problems where designers have made a class rule for an individual element, and an ID for multiple elements, which confuses the code and gives other designers a headache. Another error is when people misunderstand the absolute versus relative positions of elements on a page. If you position an element absolutely, it simply appears at the exact pixel that you specify. You might want a graphic to appear 40 pixels from the top of the page and 60 pixels from the right: img {position: absolute;top:40px;right:80px} Relative positioning, on the other hand, is used to move an element from where it would normally appear, rather than specifying an exact position. I’ve also seen beginners place a ton of CSS rules in an individual HTML page and copy that to other pages on the same site. It would have saved them hours of work to just put all of the code on one external style sheet and be done with it. By Michael Dambold , print and web designer

Want to learn more about CSS and JavaScript? Check out the top CSS and JavaScript (opens in new tab) tutorials and examples of CSS (opens in new tab) from our sister site Creative Bloq (opens in new tab) .

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Get Weekly Tips and Inspiration

Sign up below to get the latest from Creative Bloq, plus exclusive special offers, direct to your inbox!

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes , Deputy Editor Rosie Hilder , Deals Editor Beren Neale , Senior News Editor Daniel Piper , Digital Arts and Design Editor Ian Dean , and Staff Writer Amelia Bamsey , as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Related articles

How to Create a Portfolio Website Using HTML, CSS, JavaScript, and Bootstrap 5

If you are a web developer or a web designer, it is essential for you to have a portfolio website. It lets you provide information about yourself and showcase your best work with your relevant skills and experience.

In this blog post, I will discuss some of the benefits of creating a portfolio website. Then I'll show you how to create a beautiful responsive portfolio website for yourself using HTML, CSS, JavaScript and Bootstrap version 5.

Table Of Contents

Folder Structure

How to add a navigation menu to your portfolio, how to add a hero header to the portfolio, how to make the about section, how to make the services section, how to add dark background color to navbar on page scroll, how to build the portfolio section, how to build the contact section, how to build the footer section.

Benefits of having a Portfolio Website

Having a portfolio website has several benefits, including:

What is Bootstrap?

Bootstrap is a popular front-end CSS framework which is used to develop responsive and mobile friendly websites. The latest release of Bootstrap is version 5. You can find the official documentation of Bootstrap 5 here .

We will now start working on creating the portfolio website.

First, let's create the folder structure. You can get the project starter files on GitHub . Also, you can visit here to see the live demo of this project.


The folder structure consists of index.html, style.css, and script.js files and an images folder. We'll write all CSS in the style.css file and the JavaScript in the script.js file .

In the index.html file, you can see the HTML boilerplate code with the Bootstrap CDN, font awesome kit , and a link to the external style sheet and JavaScript.

Here, the script.js file is loaded after loading all the HTML code.

Now, let's work on adding a navigation menu in our project. It will help visitors find the relevant info they're looking for.

We will use Bootstrap's fixed-top class in nav element to keep the navbar at the top of the page. The navbar also has a navbar-brand class where we keep the name of the person as a brand.

The navbar has the following features:

You can find more details regarding Bootstrap 5 navbar features here .

However, the navbar has a problem while scrolling. It's fully transparent throughout the page which causes readability issues.  We will fix this issue after we complete the Services section to make you understand the issue properly.

Now, we will be adding a hero image with some text in the center. A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a representative image, photo, or other eye-catching elements. It helps attract users to your site.

 Also, let's add the CSS for the above code in the style.css file:

Here we can see that the section has an id named bgimage which is responsible for displaying the background hero image with full width. It also displays some text in the center above the background image with the help of the above CSS.

This is how the site looks so far with the navbar and the hero section:


The About page contains important information about you and your background. Visitors to your portfolio site can get to know you through the information you provide in this page.

We will be adding an image to the left side of the row, and on the right side we will add our quick introduction in this section. Let's demonstrate it using the code below:

Let's add some CSS for the left side image:

This will create an about section. You can modify the content based on your use cases. We have added classes named mt-4 and pt-4 with container class which will set the margin top and padding top to 1.5 rem.

The row has two columns. One has the col-lg-4 class for displaying the image which will occupy the left column with a 4-part grid for large screens.

The next column is assigned a class of col-lg-8 which will occupy the right column with an 8-part grid for larger screens. For medium and small screens they will overlap with each other which we can see in the below GIF file:

This section helps convert website visitors into potential clients. This is where you explain what specific services you offer, and where you niche down your offered services.

Let's add the code for this section and describe it below:

Since this website is targeted towards web developers and designers, I've included some of the services which a web developer or designer might offer.

We have used bootstrap cards to display services. Our services section has 2 rows and 3 columns each. For large screens with a width greater than or equal to 992px, three cards are displayed in a row. For screens less than 992px wide, only a single card is displayed in a row.

You can find more about bootstrap breakpoints here .

Also, there are fonts added in each card to make them look better.

Without CSS, the services section would look like this :


So, let's add some CSS to increase the font icon font size and card height and add some extra color when a user hovers over a card.

This is how our services section looks now:

If you look into the above gif properly you will see that the navbar is transparent throughout the page which causes readability issues. So let's work on fixing this issue.

We will write some JavaScript and CSS in order to resolve this problem. We will add a navbarDark class in order to show a dark background color for the navbar on page scroll.

For that we need to go to the script.js file and add the following code:

Now, let's break down the above code:

Let's quickly add CSS for the navbarDark class. For that, go to your style.css file and add the following code:

This is how the navbar will look now:

This section includes your best work. People can see what you are capable of doing, and showcasing strong past work will definitely attract more potential clients or recruiters. So only add your best work in this section.

We will use Bootstrap cards to display the portfolio projects. There will be 2 rows and each row will have 3 columns of cards.

This will be the code for portfolio section:

Each card has an image, title, description, and link to the projects. Three cards are displayed in a row for large screens which have breakpoints of ≥ 992px wide, but for screens < 992px wide only a single card is displayed in a row.

The GIF below shows how the portfolio section looks now:

You should include your contact information in this section so that visitors can contact you if they want to hire you.

Our contact section will include 2 columns in a single row: Google maps for location and a contact form.

In order to embed the Google map, you need to follow these steps:

Our code will look like this with the contact form included:

The first column will display the Google map and the next one will display the contact form.

The form has four different form fields: name, email, subject and project details. The form doesn't submit the request itself. You will need to connect it with any back-end language. Or, you can simply use Netlify Form or Formspree form for this.

This is how the contact section will appear:


Now we have come to the last section of this post, which is the footer section. We have already added a link to the font awesome CDN in the index.html file.

In the Footer, we will add links to our social media through font awesome icons.

Without the CSS, our footer will look like this:


So let's add some styling to the footer with this code:

The icons are now displayed in the center with a hover effect which we can see in the below GIF file.

Final Touches

In order to add some spacing between all the sections, let's add some more styling:

Now we're done making our complete portfolio website.

You can find the full source code of this project here .

This is how you can create a complete responsive portfolio website using HTML, CSS, JavaScript, and Bootstrap 5 .

In this blog post we saw some of the benefits of creating a portfolio website for web developers and designers. We divided the whole website into different sections and discussed each one individually as we built it.

You can customize this website based on your own use cases.

I hope you found this post useful.

Happy Coding!

You can find me on Twitter for daily content regarding Web development.

Software Engineer with a passion for writing articles.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

How to create a portfolio

The portfolio is essential to get noticed.

Creating a portfolio is a good way of growing your online presence.

The portfolio is used to showcase your skills and projects.

It can help you to get a job, freelancer gig, or, internship.

What is a portfolio

The portfolio can have the same purpose as a CV. Most CVs are written with text, while the portfolio is for showcasing, so it is visual with images and often more detailed than the CV.

It is a place where you can show your work experience and showcase the projects that you are most proud of.

Your online portfolio can be shared with its link to companies, hiring managers, and recruiters, so that they can notice you.

It is about showing and giving others an understanding of who you are as a professional.

Why create a portfolio

It is a great way of growing your online presence and get noticed.

It can be used to get a job or to attract clients to your services.

Having it online as a website. Makes it possible for people all over the world to find you.

The design of the porfolio will give the reader an impression of who you are. Make sure that it appears in a good and presentable way!

Who is a portfolio for

Creating a portfolio can be important for your career.

It can be helpful when searching for a job, a freelancing gig, or showcasing your skills towards a new client.

Ever heard about W3Schools Spaces ? Here you can create your portfolio from scratch or use a template.

* no credit card required

What are the most important sections in a portfolio

There are many different ways of creating a portfolio.

How to create it depends on what type of professional you are, who you are building it for, and why you are creating it.

You have to test, fail and learn to find out which type of portfolio that is right for you!

There are some sections which is essential for all types of portfolios, summarized below:

1. Hero section.

The hero section is the first thing people see when they enter your portfolio.

It is displayed under your logo and menu.

The hero section helps the reader to understand what you offer, why someone should work with you, and the value that you provide with your services.

It often contains a call to action button like "contact me", "book a meeting" or similar.

hero section

2. About me section.

Give the reader a short summary about yourself.

Include subjects such as your education, work experience, projects and interests.

Help the reader to understand what you are passionate about and your superpowers (the things that you are really good at).

Remember to keep it short and simple.

about section

3. Projects section.

List the projects that you have worked on. The most used way is to order the list by date, but in some cases it can make sense to order them in another logical way.

Add details to each project, which includes your role, what you did, and, how the project turned out.

Adding pictures to showcase what you built is a plus! Showcase the things that you are proud of.

work experience section

4. Contact me section.

Let the reader know how and where they can get in touch with you.

Add your contact details and other contact channels such as your GitHub profile, LinkedIn, Youtube and so on.

contact me section

Portfolio examples

Check out some portfolio examples.

You can load the portfolio templates in W3Schools Spaces . Get started with publishing your portfolio in a few clicks.

Black & White Portfolio Template

Black and White Portfolio Template

Dark Portfolio Template

Dark Icon Bar Template

People Portfolio

Dark Icon Bar Template

My Portfolio Template

Dark Icon Bar Template

What do I need to know to create my own portfolio?

HTML, CSS and JavaScript are the foundational languages to create a website.

You can come a long way just using these three!


How to create a portfolio step-by-step

Follow the steps to create your portfolio from the ground up.


Decide which code editor to use and set up your environment.

W3Schools has created an easy to use code editor called W3Schools Spaces . Sign up and get started in a few clicks.

Create your index.html file. So that you are ready to enter the code.

All set up. Lets go!

Step One: Add HTML Skeleton

Type an HTML skeleton code, which is the starting point for your website. It is the structure which holds the code and ensures that it is properly displayed on the internet.

Read here for how to create a basic HTML Skeleton: How to create a HTML Skeleton

Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.

It is one of the first things that a visitor will see.

It helps the visitors to find and navigate through the content on website. It is important to create well-structured navigation. So that your visitors can find what they are looking for.

Here is an example of how to create a top navigation bar: How to create a Top Navigation Bar

Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people will see.

It should contain short information about several things such as:

Write in first-person and keep it short and simple .

Additional things preferred in the hero section are:

Here is an example on how to create a Hero section: How to create a Hero image

Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.

Here you can personalize the content and write about yourself more in-depth.

The content you can include in this section is:

In a way, you can consider the "About me" section as a short summary of your CV.

Feel free to write about yourself in first person.

Personalization and making people understand you as a person might bring you more attention.

Here is an example on how to create an about me section: How to create an About Me section

Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have made along your way.

Here you can add:

Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.

You should always include a way for visitors to contact you, either through a contact form or by writing down your contact information such as:

Here is an example on how to create a basic contact section: How to create a Contact section

Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.

It is about showing critical information based on your website goals and the needs of your visitors.

Often it contains technical information about copyright, but it can hold other information, such as:

Here is an example on how to build a footer section: How to create a Footer section

W3Schools Spaces

Build and publish your own portfolio with w3schools spaces..

portfolio design html css



Get your certification today!

portfolio design html css

Get certified by completing a course today!


Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Your Suggestion:

Thank you for helping us.

Your message has been sent to W3Schools.

Top Tutorials

Top references, top examples, web certificates, get certified.

40 Free HTML CSS Portfolio Web Design Templates

A portfolio is arguably the most crucial asset for any designer. Having an online portfolio should be one of your main priorities. Even though your resume is absolutely important and will be the first thing that employers will look at, your portfolio will be your secret weapon to stand out and show the complexity of the projects you have worked on. Using a template is smart! Too many designers overthink their portfolio and it creates unnecessary stress. Your portfolio is the true value of your job, so make it look fantastic with these free portfolio website design templates!

Unleash The Power of WordPress Ad

Awesome collection of 11,000+ wordpress themes, including bootstrap templates & design assets, blog & magazine, creative portfolio, landing page, portfolioproject.


With a minimalist style, light and dark theme, If you want to highlight more projects in your portfolio, this responsible template is for you. It contains multiple subsections to write your professional experience. Recommended if you want to make a good impression and get out of the ordinary.



For web developers, a personal portfolio page is like a resume. Instead of listing your skills on a resume in the traditional way, you can prove your competence with a personal portfolio.


Kards is a modern and clean personal vCard website template . It has many cool features found in premium templates. It has timeline items, stats section, skillbars, working ajax form, frontend form validation, a portfolio section to showcase your works and many more. It looks great on all devices from mobile to desktop. It’s also retina ready so your site will look crisp and sharp on any device. Kards is the ideal template for creating digital personal resume and portfolio website.


Energy offers you severals layouts in order to present yourself and your experiences with simplicity and power thanks the one page template. This template is fully customizable and responsive design for any device.


It is a simple black and white portfolio website built with Bootstrap. It has a clean, minimal design; supports a slider with animated text effect for featured posts; and has awesome portfolio layout to showcase your works in minimal way. It is fully responsive and easy to set up. Whether you are a web developer who want to create professional portfolios or creative professional who wants to build a portfolio on its own you can be greatly benefited by this design templates.


Simple designs to showcase your photos, art, graphics, and other visual content in fully functional, lightbox-style image galleries.


Format is a creative, clean and modern, free website template that you can use for your next portfolio project. If you need a template as a designer, freelancer, agency, web studio, Format is perfect for you! It features pop up video, smooth overlay for portfolio, and animation upon scrolling.


Epitome is a beautifully crafted free resume and personal portfolio website template. It is modern, trendy and features a visually attractive design. An ideal website template for creative professionals and freelancers who want to create an online presence that would stand out from the average. Epitome has all the important elements of an effective resume personal portfolio website template: an awesome fullscreen hero banner, about and qualification section, services, portfolio, testimonial and contact section. Epitome is also mobile and retina ready. It will look great on any devices from mobile to desktop and on any screen resolutions.


Sublime is a Creative HTML5 one-page template designed for creative agencies, studios, digital design, and media agencies or other similar business. The template is a dark theme design with features like fullscreen header/hero section, responsive video lightbox, a nice portfolio section and much more. The template is primarily designed for creative agencies but it is versatile enough to be used for other purposes like a landing page for your startup or business website.


This is a modern and elegant single page HTML5 portfolio template, with a bold feel. Every single detail is carefully designed, in order to enhance user experience. It has a versatile design, which makes it the perfect choice for any kind of projects.


It comes with a very simple and minimalistic concept to make your pictures stand out. This is a clean and creative free responsive portfolio website for photographers who wish to share their incredible stories on stunning gallery style layout. It is fully compatible with mobile phones, desktop computers and tablets such as iPads.


Venus is a bright and dynamic landing page template for startups. This HTML template is a perfect solution to quickly present your mobile application or to start collecting early interest for an upcoming product launch.


Draco, a free PSD & HTML/CSS resume template. This is perfect for you who are building your resume online. If you’re looking to showcase your portfolio, this is a great template to consider. With its simplistic layout allows visitors to focus on the most important thing — your work. Showcasing your name, picture and bio, the author profile can be displayed on the homepage, which is perfect for telling readers more about yourself, especially if they’re new to your website.


The template is a great solution for photographers, designers and visual artists who need a simple portfolio for showcasing their own work elegantly. Nevada is build on the top of Bootstrap framework and comes with a lightbox gallery feature to make you navigate through the images at full resolution.


Alexis is clean, minimalist, simple and mobile friendly one page Bootstrap portfolio template. It’s lightweight and loads like lightning blot. Alexis is crafted with unmatched possibilities to fit with portfolio site for business firm, freelancers, artists, designers, photographers, creative professionals, and anyone looking for showcasing his high quality work. Alexis Bootstrap portfolio template is an excellent creation, can impress visitors in their first visit. Its interface is fabulous and polished, packed with sequential features which give answer each subconscious questions of potential customers and boost conversion exponentially.


This free html5 portfolio template has meaningful interaction with beautiful design flow. So it will help you to impress your user with your portfolio and add more feeling to your works. The serif and sans-serif typography combination with great readability will help the user to understand the contents very well. We used google fonts so you can change these fonts easily anytime. You can customize this template very easily. The HTML, CSS and JavaScript codes are well structured and comment so you can easily modify them.


Howdy is a modern & material design vCard / Personal Portfolio template, you can use it to show off yourself to the world in a better way. This template is fully customizable, responsive and bootstrap based. All files and code has been well organized and nicely commented for easy to customize.


MyJourney is a light, fast, responsive HTML/CSS template that can be used for both your personal and client webpage. The clean structure and minimalist design makes it a great choice for your next project. This resource has been created by Pixel Buddha exclusively for GraphicBurger.


The freebie of the day is a bootstrap template that would be a great choice for a startup landing page or any other projects you might consider. This template features a wide/boxed layout toggle and 8 color styles to chose from.


Memphis Design is often found in user interfaces. In fact, it is probably the best way to go with your next project. You could not know the name, you don’t even have to, but I’m sure you’ve seen it before — most likely in modern mobile, web or magazine designs. Discover Roxy, a stylish multi-purpose free Bootstrap template featuring an amazing animated hero section. It has a colorful style and menphis design for digital, business or agency content. The template is multipurpose, so if you like the style, you can use it to represent your art, business, an event, show your portfolio, start a blog, etc.


If you need to showcase your awesome works with elegance and professionalism, then you need to get Architect right away! Architect Free HTML5 Bootstrap Template for Architects and Portfolio Websites. The clean and minimal design along with beautiful typography , big images and smooth animation is ready to entice potential clients. Architect has sticky elements on project details, drop-down menu and off canvas on mobile. Bring your architect business to the next level with Architect!


Today we have for you a developer friendly HTML template with an organized structure that will make a great choice for a portfolio website. Personal is a grid based, ready to use template packed with animations and transitions for a smooth scrolling.


Studorlio is a template for your own personal site. You can have yours running on the cloud in exactly 10 seconds. But first, make sure you have a GitHub account. Ready, set, go!

Segment Effect

Segment Effect

Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes all this look quite interesting. Furthermore, we’re employing anime.js, the easy-to-use JavaScript animation library by Julian Garnier.


Drifolio stands for Dribbble Portfolio. There are many designers around me don’t have enough time to setup and manage their own website. For them it could be a great template that needs one time setup. You just need to set your info and dribbble username, that’s all. And after that, whenever you post something on dribbble, it’ll come automatically to your website as well. There’s nothing to do there again. Exclusively crafted for the super lazy designers like me who designed thousand of websites till today but never got a chance to build one himself.


This is a free html code for portfolio layout. It has a beautiful, cool and modern design crafted with elegance in mind. This bootstrap 4 template is ready to give your portfolio website a cool, new look that will surely stand out.

Portfolio one page template

Portfolio one page template

Flat and responsive website template, designed and coded by Maxim Orlov.


An HTML5 minimalistic super-responsive portfolio and blog template. CSS-only hexagon hive gallery!

CV, Resume and Portfolio website template

CV, Resume and Portfolio website template

CVs include information on one’s academic background, including teaching experience, degrees, research, awards, publications, presentations, and other achievements. CVs are thus much longer than resumes, and include more information, particularly related to academic background. Post a link to your CV on sites where you need your personal profile page should be discovered by other users and that provide a lots of information about your professional skills and experience.


Expert is a free one page website template using bootstrap perfect for portfolio, freelancer, agency websites but you can tweak this to suit your needs. This template is responsive and it will look good in all devices. The features are smooth animation upon scrolling, lightbox for video and images, advance owl carousel sliders and many more. Built with the latest technology such as HTML5, CSS3, jQuery, Bootstrap 4 and SCSS.

Elit Onepage Free Template

Elit Onepage Free Template

Elit is an awesome looking onepage free template with a unique portfolio grid layout that is suitable for photographers, freelancers and visual editors that would like to showcase their portfolio online. It has a smooth animation upon the scrolling the page, testimonial slider and an awesome image popup using fancybox.


Create is a free one-page template for portfolio, agency, and freelancers alike of course you can use this to any type of website by tweaking it to suit your needs. The feature includes are lightbox using fancybox, modal video, smooth animation, and testimonial carousel. Build using HTML5, CSS3, jQuery and Bootstrap 4.


This minimalist website design style that the designer is trying to simplify his web interfaces and interactions by deleting unnecessary elements. Minimalism has become an overwhelming trend in current website design. And increasing number of designers have accepted this influential design style and widely used it in their designs. However, as an art of less, designing such minimalist websites does not mean to delete the elements of a website without any restriction. This is best simple, clean and intuitive style of minimalist portfolio website design template for developer and designer .


Clean and minimal design along with necessary content, navigation bar, social media icons, and other important elements make a website more efficient. Here’s another uiCookies free html5 template that is ideal for your next online business, Aside! Aside is a free HTML5 Bootstrap 4 website template perfect for all photography, restaurant, company, individual or agencies portfolios. This template makes it different from previous templates because of the site navigation places on the left side. It features owl carousel and smooth animation on images upon scrolling, mobile off-canvas menu and along with its clean and minimal design.


This is minimalistic, clean and modern template specially designed for all kinds of creators. Made with attention to details, it’s an excellent choice for the presentation of your beautiful portfolio.

Box portfolio

Box portfolio

Allium is a clean and minimalist porfolio website that allows your reader to focus on your content . It is a beautifully designed, intuitive and attractive, engaging and dynamic, powerful and accessible, gorgeous and flexible free portfolio website. It is specifically developed for creating all types of portfolio websites. Everything you need to build your personal portfolio you can get it through Box.

Free Single Page Minimal Portfolio

Free Single Page Minimal Portfolio

It is a simple, easy to use, modern and creative portfolio with awesome typography and layout. It is a unique website that delivers amazing imagery for your personal portfolio sites, with a standard two column grid supported by masonry , you’ll always expect a perfect design no matter which device you are on, be it your iPhone, android phone or desktop.


Starting a portfolio page is easy with this modern HTML template due to the features and flat easy going design, large header and clean design. It is responsive, cross-browser compatible. It has a welcoming header on the homepage to impress visitors at the very first sight. Its design is well thought to keep readers focus on content. It has been designed for everybody with or without previous coding experience to effectively and helps to speedily put together polished, professional quality websites without having to so much as peek at a single line of code.

Stylish Portfolio

Stylish Portfolio

Stylish Portfolio is a one page Bootstrap portfolio theme with off canvas navigation and smooth scrolling through content sections.

Portfolio Template PSD HTML

Portfolio Template PSD HTML

It provides a powerful way to showcase your work. It is built with the HTML5 and CSS3 latest technologies, but at the same time make it compatible with older browser versions.


Avana is a free minimal portfolio HTML template ideal for creative agencies that want to better showcase their own portfolio. The template is built on Bootstrap and takes advantage of Google Fonts and nice appearing animations on scroll. Designed and released by the creative team at Designstub.

Related Posts :

' src=

Thannks ffor sharing youir tһoughts оn portfolio. Regards

Leave a comment Cancel reply

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed .

Unsupported browser

This site was designed for modern browsers and tested with Internet Explorer version 10 and later.

It may not look or work correctly on your browser.

14 Best Portfolio HTML Templates to Show Off Your Work

Franc Lucas

In a competitive freelancer marketplace filled with stunning creative portfolios, you need a template that will make your portfolio stand out. 

A personal online portfolio shows your skills, unique style, experience, and markets your services. It also makes it easy for clients looking for freelancers to find you online. 

ProKit - Creative Personal Portfolio HTML Template

Professional HTML portfolio templates offer:

On ThemeForest, you will find hundreds of premium that will help you build your portfolio. 

Best HTML Templates for Your Portfolio

Grab one of these portfolio HTML templates, on ThemeForest, and start building your online portfolio to show your incredible skills and gain clients. 

personal portfolio HTML templates

Here are the best HTML templates for your personal portfolio on ThemeForest available for you to download right now.

1. Waxon - Personal Portfolio Template

Waxon - Personal Portfolio Template

Waxon offers an elegant and beautifully organized porfolio with all features of an SEO optimized business website that displays perfectly on all devices and browsers. It includes menus, navigation, HTML and CSS files.

2. Tokyo - Personal Portfolio Template

Tokyo - Personal Portfolio Template

Tokyo has a clean, minimal, and creative design that gives distinct flavors to your personal portfolio. The portfolio is SEO optimized, loads fast, and comes with both sticky and mobile navigation. 

3. Simone - Personal Portfolio Template

Simone - Personal Portfolio Template

Simone offers great design that gives customers a sense of who you are. This one page Bootstrap 5 HTML template, with light and dark versions, can be used for portfolios, resume, CV, and vCard.

It comes with ten color schemes, carousel, portfolio with AJAX filters, AJAX contact form, parallax background, YouTube video background, and well-commented code.  

4. Shane - Personal Portfolio Template

Shane - Personal Portfolio Template

Shane offers a clean and minimal template that leaves out all distractions and focuses your clients’ eyes on your portfolio. It’s ideal for freelances, startups, and all kinds of businesses.

5. Callum - Personal Portfolio Template

Callum - Personal Portfolio Template

To build a portfolio that pops, Callum provides a variety of header and menu styles, color schemes, AJAX details, light box, YouTube video backgrounds, typing animation, icons, fonts and HTML, CSS, and JS files with well commented code. 

6. Ukko - Personal Portfolio HTML Template

Ukko - Personal Portfolio HTML Template

Ukko helps you build one page portfolios that can offer the 360º degrees snapshot that busy recruiters and clients need to make a decision. The layout pages have animations, smooth scrolls, sleek color combination, image slider lighbox gallery and AJAX elements. There is also a PHP contact form to make it easy for any to reach out. 

7. Prema - Personal Portfolio HTML One Page Template

Prema - Personal Portfolio HTML One Page Template.

Prema is a robust and simple gives lots of features to make a vibrant portfolio. You can choose from eight  different HTML files with seven different hero sections, sixteen color schemes, s tatic background, parallax background, static slider, parallax slider, typed text and typed text with fade slider.

8. Bako - Personal Portfolio & Resume HTML Template

Bako - Personal Portfolio & Resume HTML Template

With Bako you can make clean and simple responsive portfolios that are easy to navigate with one page scroll and infinite scroll. Features this multipurpose template include icons, Google fonts, working PHP/jQuery contact form, and well commented HTML/CSS3

Eremia - Creative Ajax Portfolio Multi-Purpose & personal HTML Template

10. Icard Personal Portfolio

Personal Portfolio - Icard

Icard is a multi-purpose theme. You can use it for resumes, vCards, and portfolios. It’s organized into sections: home, about, service, testimonial, resume, portfolio, blog, and contact. It also has popup images, typing animation and more. You can choose between light and dark themes.

11. Kreton - Personal Portfolio HTML Template

Kreton - Personal Portfolio HTML Template

Kreton is a lightweight, fast, and powerful template for your creative portfolio website that displays beautifully on all devices and works seamlessly on all browsers. The template is built with Bootstrap and Sass and it supports RTL oriented languages and MailChimp. 

12. Maslin - Personal Portfolio HTML Template

Maslin - Personal Portfolio HTML Template

Maslin gives you an SEO-friendly portfolio that can be easily customized by adding images and changing texts. You can choose to display your portfolio in light or dark version. You also have the particle or glitch option. 

13. Savin - One Page Personal Portfolio HTML5 Template

Savin - One Page Personal Portfolio HTML5 Template

Savin is a clean, minimal, and beautifully organized one page portfolio template built with HTML5 and CSS3. It’s loaded with features like animation, popups, navigation, parallax etc, that make for a standout online presence.

14. Readora - Portfolio HTML template

Readora - Portfolio HTML template

Readora portfolio template comes with sleek home page layouts, carousel slider, smooth transition effects, and commented HTML, CSS3 files to build an online presence. 

Tips For Creating a Portfolio

Discover More HTML Templates and Resources

If you’re just starting to work with HTML or you’re looking for more inspiration, here are some useful resources.

portfolio design html css

Start Building Your Portfolio Today!

In 2021, building your HTML portfolio website has never been easier. You have many HTML portfolio templates to choose from on ThemeForest. We hope you will find the one that suits you best. 

Franc Lucas

portfolio design html css

📚 LAST CHANCE TO REGISTER FOR THE JOB GUARANTEED 8-WEEK Product Design Career Preparation course! Sign up now!

Portfolio Html

Inspirational designs, illustrations, and graphic elements from the world’s best designers. want more inspiration browse our search results ....

Meet Arte HTML templates 🔥 application craftwork css design figma html landing new photography portfolio release templates typography ui vector web website

You are currently viewing Create Simple Portfolio Website Using HTML and CSS

Create Simple Portfolio Website Using HTML and CSS

Telegram Group Join Now

Create a simple portfolio website using html and css.

Create Simple Portfolio Website Using HTML and CSS

 Well, today I’ll be making a visually delicious portfolio website Using Html and CSS coding. In this article, you get completed code and an explanation about the portfolio website using Html and CSS. What is a portfolio website, you ask?

Well, e veryone 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 it to be your online résumé.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

a portfolio website with source code


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 front end! 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).

Video Tutorial Of Simple Portfolio Website Using Html And CSS

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, free advice is no harm right? Download it from here.

So, without further ado, let’s hop right into our recipe!

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

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 index.html, we need to give the following lines of code.

HTML Code For Portfolio Website

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 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’.

50+ Html, Css & Javascript Projects With Source Code

Now take a look at what we’re building.

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

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 n ow look only at the top.

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

This is the navigation bar. It’s like a must-have on all your websites. So, we’ll make this first. Make sure to write the code between the opening and closing body tags (<body></body>).

Ecommerce Website Using Html Css And Javascript Source Code

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 the se 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 it from  here . You’re welcome.

So this is what our nav bar looks for now:

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

  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.

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.

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

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 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.

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 on a color scheme beforehand so that I don’t keep breaking my flow thinking of colors.

Weather App Using Html, Css, And JavaScript 

I declared variables corresponding to the colors I’ll need using the ‘: root’. CSS understands colors only as RGB values. These values, corresponding to their respective colors, are impossible to remember.

The HTML CSS Support extension for VS Code helped me select my colors easily. See? Cool IDEs always help. In case you’re not able to use that, you can get your color’s RGB, HSV, or hexadecimal value from here.

CSS Code For Portfolio Website

This is the CSS for the header and navigation bar and the code goes in ‘styles.css’. And this is the product:

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

Black is my favorite color! It’s a real lifesaver when you have no clue how you want your background to be. Take a look at the CSS for the ‘hero’ class now.

5+ HTML CSS Project With Source Code

Did you notice how I avoid using pixel values as much as possible? Thing is, pixels are absolute units. Changing other values have no effect 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:

The end product? Here it is!

How to make Heartbeat Animation using HTML and CSS Code?

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

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.

10+ Javascript Project Ideas For Beginners( Project Source Code)

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

Though not extraordinary, this design resonates with the formal vibe you’d want to give to your website.

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 social media icons. Basically, it defines what happens when the cursor points to or ‘hovers’ over the specified element. A little color 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 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:

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

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, the 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 documents, 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.

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.

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

These cards have the hover property as well. So when u take the cursor on them, the background color and the text color, both change.

Simple Portfolio Website using HTML CSS | Portfolio Website Source code

Our cuisine is finally prepared! This was fun, was it not? The entire code and its end product are all yours now. Change the colors, and 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.

Quiz app source code

-Akshat Sharma

 FAQ For Portfolio Website Using Html and Css

Which code editor do you use for Card Glow Effects On Hover coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

You might also like.

Read more about the article Calculator Using HTML,CSS & JavaScript With Source Code

Calculator Using HTML,CSS & JavaScript With Source Code

Read more about the article Create Tic Tac Toe using HTML ,CSS & JavaScript

Create Tic Tac Toe using HTML ,CSS & JavaScript

Profile card using html & tailwind (tailwind cards codepen available), this post has 2 comments.

' src=

how to dowload source code

Leave a Reply Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Quick Intro!!

Thanks 🙏 for visiting Codewithrandom! Join telegram (link available -Scroll Up) for source code files , pdf and ANY Promotion queries 👇

Subscribe Now

Don’t miss our future updates! Get Subscribed Today!

Designed & Maintained By Sahitya Porwal 🔥

Thanks for visiting codewithrandom.

DEV Community

DEV Community

Cover image for 🔥🤯 Amazing Portfolio website using HTML, CSS and JS.

Posted on Dec 16, 2021

🔥🤯 Amazing Portfolio website using HTML, CSS and JS.

If you are a beginner or a pro. This blog is for everyone who want to make his/her portfolio an outstanding one. In this tutorial, you’ll learn to create your own modern looking portfolio website using HTML, CSS and JS. In the article, you’ll learn to create smooth transition on navigations, you’ll create CSS timeline to showcase your education and experience, you’ll make a separate section for your project with a cool hover effect. You must make this portfolio to impress your recruiter.

So, without wasting more time, let's start. To see project demo or for better understanding of code, you can watch the tutorial below.

Video Tutorial

I appreciate if you can support me by subscribing my youtube channel.

Source Code

So, let's start by making navbar for the site. But before that you should know our files and folders.

Portfolio Website - Folder Structure

You can download the images here .

So let's start, to create navbar first write the HTML basic template and link style.css and app.js file to index.html file. After done with all of this. Create navbar.

Okay we are done with HTMl, so add some style to it also.

After done with this, you'll probably see something like this.

Portfolio Website - Navbar

Okay, so with that we are done with navbar. So let's move on to our home section

home section

To create home section code this HTML structure after navbar element.

And give it some styles.

If you see the above code, you'll see position: relative and top: 0 under .home-section . These properties are important while navigation, cause how will our navigation work is little complex. All of our sections (home, project, about, contact) all of these will have position: fixed because of this, all sections will be on top of each other. And we'll use active class to indicate the active section. Using active class we'll set section's position's to relative along with its opacity to 1. This is how our navigation will work. Isn't is complicated ??


So, once you are done with home section make sure you change its position to fixed from relative.

Then make active class styles.

You can see I have added each and every section here in order to make smooth navigation.

Project section

Now, let's make project section. For that code this HTML.

Also style it.

In the above code, I have already added fixed position to project-section and defined its opacity to 0. But for you in order to see the output. make sure you add active class in project-section like this.

Output [ With hover effect ]

Project section

Before going forward, let's make the navigation system first. For that code this inside app.js file.

In the above code, first I am selecting all the links and sections. After that, I defined activeLink this variable will track the current active section or link. After that, I used forEach method to loop through all the links. Inside that I am access individual link and its index.

Inside it first, I am adding click event to link using addEventListener . Then I used a simple condition to make sure user is not clicking on the active link. After that, I am removing the active class from the current active link using classList.remove and adding active class to the clicked link using classList.add . I am doing the same to remove the active class from the active section.

Once done with that, I am using setTimeout to add a 1s delay in executing the below codes. Inside the timeout, it is just simply adding the active class again.

You might see the navigation as a very easy one, but it was the second hardest thing to make in this project😅

About section.

Now, let's create the about section. Honestly, my favourite section in this entire website is this about section. Our about section has everything, it has skills section, and also a education timeline.

To create about section, code this after project section .

And style it.

Again you might not see anything, make sure to add active class to about-section and remove it from all other sections.

about section

So, now shall we create the skills section ? Well in our skills section I do not have any skill progress bar which is I think is most used thing in the portfolio. But I think its the worst thing to have. I somewhere read on internet that the progress bar might look awesome to you, but let say it know python 90% and you add it to your website saying, you know 90% of python. There is a change that your client think you know 90% python so maybe you don't know the advance topic although you know the advance topics too. So its create a confusion. Well its just a preference. Anyway, let's make the skills section.

Code the above code under about-section element and style them.

Skill section

And now the hardest thing, CSS timeline. It was little hard for me to make at first, but I tried my best not to use lot of code to achieve the goal.

Make sure to add these codes inside about-section also.


Contact section

Anddddddd, the last part contact section. Let's create this also.

By the way, the above iframe code is the google map embed link. You can get it using google map.

Contact section

So, that's it. Great work guys. We are done with the portfolio.

I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Articles you may find Useful

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

portfolio design html css

Source Code Thanks for reading

Top comments (37)


Templates let you quickly answer FAQs or store snippets for re-use.

ravavyr profile image

As with any tutorial, i feel the focus here is on "pretty" and "components". Where is the part about the DOCTYPE? The viewport tag? The Meta tags for SEO? What about responsiveness? What about accessibility?

I see none of that in the above.

themodernweb profile image

Oh! Sry. I'll make sure to add that from onwards. Thanks for suggession.

xr0master profile image

I can suggest that you use EmailJS for your contact form, so that your site is not only beautiful but also really works.

trulyprogrammer profile image

Truly, none of his projects are responsive. They're only good looking and functional.

goldfinger profile image

Also, please add, semantic HTML to the list. The tutorial doesn't properly use HTML and heading tags.

cmuralisree profile image

Can you try showing the live demo using codepen for general html, css, js, and codesandbox for react or angular ...., Because everyone won't have enough time to go through with the videos or with the source code,

And if you have a live demo then it will be easy for others to understand how the page works, and the styling and stuff,

These were up to my perspective, i might be wrong.

organizedfellow profile image

I think the Author has done "enough" by providing the source code above! You also want them to create a codepen AND codesandbox?

whats wrong in sharing a live demo mr.aleman ?

Everyone can't understand the functionality or styling of a page by just looking at the source code or photos, until unless they experience it,

And I have already mentioned those were upto my perspective, so i guess we are clear about this.

All the code is there, so, easily, You can copy & Paste into Codepen - shouldn't be a problem. I already made a Codepen of my own, using the above code. Looks nice.


(if the code doesn't make sense to you - perhaps you are in the wrong community)

Perhaps, you should learn English first and then you can comment on others, i have already mentioned it twice it's upto my perspective,

Yeah i know this isn't a stack overflow to just keep looking at the code, so stop giving funny comments,

i guess you have enough time to create pens or keep arguing for pointless statements, then congrats,

But i don't have enough time to keep arguing about this, so i will end here, if you want you can prolong

😉 Okay, Buddy.

It's not enough, the page has to be responsive.

vinaymayavanshi13 profile image

Amazing🔥🔥🔥,but in skill sections remove those percentages😅.Many recruiters have suggested not to put such percentages as how can a candidate knows that he has X% of knowledge with a particular language.Many recruiters gets annoyed by this.

Yeah Sure Its a common mistake. I made that in design but also mentioned in my video tutorial that why is this bad idea to put percentage in skill section. Thanks 👍

jerrykay profile image

You have reason.

geekygaurab profile image

Yup! And because of that, I have replaced the percentage number with a ✔ (to mark checked/completed).

ricobrase profile image

Well, isn't that some kind of redundant information then?

You (hopefully) wouldn't list skills, you don't have in your CV, would you? Therefore everything you mention should have a checkmark. And if everything has it, it's somewhat redundant. 😄

Yes, you are right!

That's why, I have just put the logos (coloured ones looked better than black and white ones) in the skills section and removed the percent scores and checks as well.

ashleyjsheridan profile image

One thing I do on mine is to list my skill level in a thing as either Great, Good, Fair, or Basic. That way, it gives across what I want to convey, but is less rigid than something like a percent score in a skill.

A score of 100% in a skill is effectively impossible, and if 100% is impossible to achive, it means that the other values have no meaning, because they can never be accurate.

abdullmng profile image

Great one, please create another tutorial to add responsiveness. Looking forward to it

michaelrodr profile image

Hello, thanks for sharing, I see the design theme very well focused, it is true that for those who are starting it is a good base, the adaptability to different devices (responsive design) must also be taken into account.

averysinar profile image

I made an account here just to be able to say how much of a lifesaver this guide is. Can't manage to get the links to work but that's fine by me, this gave me an incredibly professional looking template that I could adapt to my own portfolio. Thank you so much, and keep up the great work.

sofiirodriguezc profile image

Excelent! Thank you for this tutorial, it helped me to understand better HTML, css and js

I am glad you liked it ❤️

robsonmuniz16 profile image

Great Article, thanks for sharing it!

leeuw profile image

ten_code_10 profile image

I recently made a basic portfolio, it is clear that it has nothing to do with yours in terms of design. But you help me to improve it. Thanks!

Great! I hope you make it more amazing than mine. 👍

felix715 profile image

Pretty job ...but try to ensure the site is functional

I'll make sure of that. Thanks

joset98 profile image

hey dude thanks, you're crack

I know the images can be fetched from the google drive link. But say I want a C language logo in the same format to be used in the website, where and how can I get that?

you can download the C logo from google and then turn it into black and white with any photo editor

cosminp9 profile image

Navigation system for navbar? Really? Stop!

Hmm! Its just made for fun and UX practice

The projects section and about section is visible only when I make a change in the code and fades away after a second. Please 🙏🏻 help.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

Read the whole post now!

vincod profile image

How to Run Emulator Outside Android Studio

Odipo Otieno - Feb 4

rasaf_ibrahim profile image

Ditching useState and useReducer: Why useImmer is the better option

Rasaf Ibrahim - Feb 25

stakedesigner profile image

6 CSS Features to Make a Responsive Website

StakeDesigner - Mar 1

vulcanwm profile image

Skill section or not?

Medea - Feb 24

Once suspended, themodernweb will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, themodernweb will be able to comment and publish posts again.

Once unpublished, all posts by themodernweb will become hidden and only accessible to themselves.

If themodernweb is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Modern Web.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag themodernweb:

themodernweb consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging themodernweb will restore default visibility to their posts.

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Free CSS Templates, CSS Layouts & More!

Free and Premium Website Templates

617 Portfolio Website Templates

Ben Resume Free Website Template

Viewing 1 - 12 of 617 Portfolio Templates

Portfolio website design with HTML CSS [source code]

portfolio website design html css

A portfolio is a great way to showcase your expertise. It also increases the chance of getting hired. I will show you a step-by-step guideline on how to design a portfolio website using only HTML, CSS & a few lines of simple JavaScript.

It’s completely mobile responsive , fast loading, and easy to customize the template . It shows a portfolio for a freelance graphic designer. But you can make changes according to your niche . Such as website designers, freelance writers, SEO experts, and anyone who needs a portfolio website in the tech industry.

What you will get

So your website will load quickly & you’ll understand the source code very easily.


Let’s build your portfolio website step-by-step.

But it’s very important to understand the code. So it will be easier for you to make necessary edits and add new things .

File structure

So if you want to follow me along the way, I encourage you to create the same folder structure. First, create a project folder named “ portfolio ” and then, create other folders & files as you see above.

Boilerplate (general code)

Here is the code I have written in the startup:

Build the Header & navigation menu

Here is the HTML for the entire header:

The link for the Logo & Home is the “index.html” file itself. For the rest of the links, these are the CSS ID for each section .

You see that I also included some media queries and vendor prefixes . This is just to make sure that your website looks good on every screen size. And it works well on all browsers.

Banner and promo section

I have some background (gradient) color and font styling. Below is the CSS for it.

About section

After having both HTML & CSS in place, the “About” section will look like the below screenshot .

Skill section

We have a heading & paragraph on the left, and three cards on the right side. Follow the HTML & CSS below to achieve this same layout.

Service section

I don’t know about you but I will not create a list of every service that I offer (on the landing page). So I created only three cards . So you can replace the cards with your top 3 services that you’re best at.

You see that these services are graphic design related. But don’t feel shy or hesitant to use the same structure and code for other sectors . I just picked a random niche but I had all the tech sectors in mind while creating this template. So it has been written for you as well.

Portfolio section

I have 6 items in the portfolio but you can add more just by copy-pasting the “item” block in the HTML. These items are mainly project images . Each item will show the project title once you hover your mouse. It also has a niche & smooth overlay color .

Testimonial section

It does not need to be super fancy. Rather, we should make it easy to read for your prospects & clients.

If you want a separate page for the testimonial , see another post where I created a testimonial template . You’ll also find the live preview and code (just like this one).

Pricing section

Below is the HTML & CSS for the pricing section.

Contact section

Cool! If you made it this far then you’re nearly there. We only need some finishing touches which are the footer and the social sharing buttons.

Download the source code

Together we went through the process and created a portfolio website step by step. Thus, it’s obvious to make mistakes or skip any part. So I have the entire template available for download. I could give you a downloadable zip file but I consistently make improvements on this template. So I want to make sure that you’re going to get the latest code at the current time. And that is why I have created a Git repository for this portfolio template. I also have included instructions on the repo. Feel free to make changes and use the template the way you want. But don’t use it for selling or commercial intent or do not make it available for download on other websites. Content creation takes huge time, effort, and thinking. And I expect my reader will also honor the copyright & use case.

If you’re new to GitHub, see the download option in the screenshot below.

Social sharing buttons

You can write this code anywhere in the index.html file. Because I used CSS positioning (fixed) for them. It always stays on the left-middle side.

For the favicon, use any online tools or photoshop. After you create it, make sure to place it in the root directory. And name it exactly “favicon.ico.”

So it’s always better to have a Favicon that is overlooked in most tutorials and guidelines.

Take this portfolio template to the next level. Adding a slight animation to this template will enhance the design, look & feel. So if you’re interested, see another guideline that will walk you through the process.

Now you know how to create a portfolio website using HTML, CSS & a little JavaScript. However, this is a one-page website. If you want to learn how to split them into multiple pages & how to interlink those pages, please see another post on how to create a multipage website using only HTML CSS .

Shihab Ul Haque

You can call me Shihab. I am a web developer and have been working with PHP & WordPress a lot. I have a master's degree and left my regular job to fully engage with the field that I love working in. I live in Bangladesh and help business owners to create a stunning online presence.

Related Posts

Easily create a breadcrumb navigation with html & css, create a beautiful accordion with html, css, and javascript, how to create an alert box without bootstrap (html, css & js), leave a reply cancel reply.


  1. HTML, Bootstrap Website templates

    portfolio design html css

  2. #1 Personal Portfolio Complete Website using only Html Css Javascript

    portfolio design html css

  3. Animated PORTFOLIO Website Template In Html CSS And JS

    portfolio design html css

  4. Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript

    portfolio design html css

  5. Create a Responsive Personal Portfolio Website using HTML and CSS

    portfolio design html css

  6. 40 Free HTML CSS Portfolio Web Design Templates 2020

    portfolio design html css


  1. Portfolio website html css

  2. Responsive Personal Portfolio Website In Html & Css Only

  3. How To Make A Responsive PERSONAL PORTFOLIO Website Design Using HTML

  4. Create A Personal Portfolio Website Using HTML And CSS

  5. Personal Portfolio Website Design using Html CSS & JavaScript. Creative Website Design Idea 2022

  6. CSS JS Neumorphic Load Animation #shorts #short #shortvideo #shortsfeed #javascript #js #css3 #css


  1. What Are the Advantages and Disadvantages of HTML?

    There are many advantages and disadvantages of HTML, including compatibility and difficulty of use. All Web browsers can read HTML files and webpages, but the language can be difficult to decipher, especially since one small typo could lead...

  2. Design Definition of CSS Property

    Definition of the word "property" as it pertains to CSS, including some examples of CSS properties and how to use it in web design Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML...

  3. CSS for print designers

    A Cascading Style Sheet is essentially a control mechanism. Anything that you write in CSS code – within proper guidelines – can be used to control the presentation of elements on an individual page or an entire website. I gradu...

  4. How to Create a Portfolio Website Using HTML, CSS, JavaScript

    A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a

  5. How To Make A Portfolio Website Using HTML CSS JS

    Learn How To Make A Portfolio Website Using HTML CSS JavaScript | Complete Responsive Website Design | Make Personal portfolio website❤️

  6. How to create a portfolio

    Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java

  7. 40 Free HTML CSS Portfolio Web Design Templates 2020

    Avana is a free minimal portfolio HTML template ideal for creative agencies that want to better showcase their own portfolio. The template is

  8. 15 Best Portfolio HTML Templates to Show Off Your Work

    Tokyo has a clean, minimal, and creative design that gives distinct flavors to your personal portfolio. The portfolio is SEO optimized, loads

  9. Portfolio Html Template

    Stable EV Website: html css bootstrap template javascript jquery admin dashboard admin template

  10. Portfolio Html designs, themes, templates and ...

    Meet Arte HTML templates application craftwork css design figma html landing new photography portfolio

  11. Create Simple Portfolio Website Using HTML and CSS

    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

  12. Amazing Portfolio website using HTML, CSS and JS.

    If you are a beginner or a pro. This blog is for everyone who want to make his/her portfolio an... Tagged with html, css, javascript

  13. 617 Portfolio Website Templates

    Free CSS Templates, CSS Layouts & More!

  14. Portfolio website design with HTML CSS [source code]

    Let's build your portfolio website step-by-step · File structure · Boilerplate (general code) · Build the Header & navigation menu · Banner and