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.
- PHP Programming
- Java Programming
- Javascript Programming
- Delphi Programming
- C & C++ Programming
- Ruby Programming
- Visual Basic
Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.
- University of California
- University of Washington
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:
- Border (including border-style, border-color, and border-width)
- Padding (including padding-top, padding-right, padding-bottom, and padding-left)
- Margins (including margin-top, margin-right, margin-bottom, and margin-left)
- Font-family
- Background-color
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:
- Text-transform
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:
- Border-color expects a color value.
- Border-size expects a sizing value, like pixels or percentages.
- Border styles expects one of the reserved styles used for this property, like "solid."
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.
:max_bytes(150000):strip_icc():format(webp)/pexels-photo-943096-310a5003b2db4ee3a1fd455a0405211c.jpeg "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
- Benefits of having a portfolio website
- What is Bootstrap ?
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.
- Adding Final Touches
Benefits of having a Portfolio Website
Having a portfolio website has several benefits, including:
- it provides a platform to showcase your relevant skills and experience
- it shows your personality
- it lets hiring managers find you instead of you reaching out to them
- you are easily searchable on search engines like Google
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:
- It has six links: home, about, services, portfolio, contact, and footer
- It has a transparent background. We will add a dark background on page scrolling later.
- It toggles on smaller devices
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:
- The header holds the value of the nav element since the querySelector method returns the first element that matches the CSS selector (which is .navbar in this case).
- window.onscroll fires up when the scroll event happens.
- window.scrollY returns the number of pixels that the document is scrolled vertically and its value is assigned to a variable named top .
- If the value of top is greater than or equal to 100, it adds a class of navbarDark to the header.
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:
- go to https://www.embed-map.com
- enter your location
- click on the Generate HTML Code button which will provide your Google Map HTML Code
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.
- Software developers
- UX designers
- Graphic designers
- Photographers
- Marketing professionals
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.
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.
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.
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.
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
Dark Portfolio Template
People Portfolio
My Portfolio 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!
- Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
- Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
- Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
Advertisement
How to create a portfolio step-by-step
Follow the steps to create your portfolio from the ground up.
Preparations
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:
- Who are you?
- What do you offer?
- What is your profession?
- Why should people work with you?
- Which actions should you take?
Write in first-person and keep it short and simple .
Additional things preferred in the hero section are:
- Eye-catching graphics, either as a background or side-by-side with the text.
- An action button that leads to content on your portfolio or to the content of another website.
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:
- Your introduction
- Who are you as a professional
- Your education
- Your skills
- Your work experience (present and/or past)
- Your hobbies
- Your goals and ambitions
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:
- Links to your projects with the project name and/or short description of what the project is about.
- Links to blog posts that you have written with title and/or short description about what it is about.
- Your professional awards or achievements.
- Highlighting your work and your accomplishments is a way to create opportunities for yourself.
- Visual representations such as images or graphics.
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:
- Phone number
- E.g. Github profile, LinkedIn profile, Youtube profile and so on.
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:
- Link to "Privacy policy" page
- Link to "Terms of use" page
- Contact information
- Website navigation links
- Links to social networks
- Link to your shop
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..
COLOR PICKER
Get your certification today!
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:
help@w3schools.com
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.
Simplefolio
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
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
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
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 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
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
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 is a one page Bootstrap portfolio theme with off canvas navigation and smooth scrolling through content sections.
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 :
- Top Ten Free Drag & Drop HTML Website Builders
- 20 Best Personal VCard & Resume HTML Templates
- 20 Best Responsive E-Commerce Email Templates 2019
- 20 Best HTML Mobile App Landing Page Templates
- 26 Most Awesome Admin UI Dashboard Templates
- 25 Creative Monochrome Portfolio Web Designs
- 20 Spectacular Event Landing Page Templates
- 25 Best Portfolio Site Templates Built with Twitter Bootstrap
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
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.
Professional HTML portfolio templates offer:
- ready-made solutions so you don’t need to build your portfolio from scratch
- great options to customize your portfolio and reflect your style
- built-in SEO features to help bring traffic to your portfolio
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.
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 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 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 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 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
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 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 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
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
10. Icard Personal Portfolio
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 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 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 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 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
- Be clear about the object your portfolio before you start building it. What do you want it to accomplish? What clients do you want to target? Clarity will lead to a more focused portfolio.
- Focus the projects you select for your portfolio on the kind of work you want to pursue. Choose projects you are most proud of and emphasize your strengths. These will help you stand out with the clients you want to work with.
- Include your resume to show the full scope of your professional experience. Here is where you show all your skills and qualifications, show clients you’ve worked with in the past, and your interests. Make the resume downloadable.
- Make navigating your portfolio easy by creating categories and dividing your work into sections. A well organized portfolio makes it easy to evaluate your work and strengths you bring to the table.
- Tell a story through brief case studies of the projects you selected for your portfolio. For each project explain what the goals of the clients were and step by step approach you took to complete each project. Don’t leave out the challenges that came up and how you solved them. If you worked with a team, be sure to show what your role was.
- Simplicity keeps the clients eye focused on the content of your portfolio. Leave out all the flashy stuff that only serve to distract.
- Remember your portfolio is the place where you show creativity through your unique style. It is where you want to standout from all the generic portfolios that are online.
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.
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.
- Curated Design Assets
- Best Cool Fonts
- InDesign Magazine Templates
- Photoshop Actions
- InDesign Newsletter Templates
- InDesign Templates
- Curated Web Design Assets
- Responsive WordPress Themes
- WordPress Themes for Consultants
- Wireframe Templates
- Best Shopify Themes
- Masonry WordPress Themes
- Web Themes & Templates
- HTML Templates
- Shopify Themes
- Bootstrap Themes
- Free WordPress Themes
- After Effects Templates
- Apple Motion Templates
- Video Effects
- Lower Thirds
- Stock Footage
- Video Maker
- Design Templates
- Free Templates
- Curated Video Assets
- After Effects Slideshow Templates
- Premiere Pro Video Intro Templates
- Final Cut Pro Templates
- Final Cut Pro Title Templates
- Premiere Pro Video Effects
- Curated Presentation Assets
- Keynote Pitch Deck Templates
- Google Slides Business Templates
- PowerPoint Pitch Deck Templates
- Best Shopify Mobile Themes
- Best Presentation Templates
- Image Resizer
- Video Cropper
- Video To Gif Converter
- WordPress Themes
- Stock Images
- Website Templates
- Learn JavaScript
- Photoshop Tutorials
- How to Draw
- How to Use WordPress
- How to Use PowerPoint
📚 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 ....
Create Simple Portfolio Website Using HTML and CSS
- Post author: admin
- Post published: August 14, 2022
- Post category: HTML & CSS / Html & CSS Project / portfolios / Project Ideas
- Post comments: 2 Comments
Telegram Group Join Now
Create a 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
ADVERTISEMENT
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.
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.
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:
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.
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:
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?
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)
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:
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.
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.
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.
Calculator Using HTML,CSS & JavaScript With Source Code
Create Tic Tac Toe using HTML ,CSS & JavaScript
Profile card using html & tailwind (tailwind cards codepen available), this post has 2 comments.
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 👇 Codewithrandom@gmail.com
- Html Project
- CSS project
- JavaScript Project
Subscribe Now
Don’t miss our future updates! Get Subscribed Today!
Designed & Maintained By Sahitya Porwal 🔥
Thanks for visiting codewithrandom.
DEV Community
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.
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.
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 ]
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.
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.
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.
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
- Best CSS Effect
- Infinte CSS loader
- Disney+ Clone
- Youtube API - Youtube Clone
- TMDB - Netflix Clone
I really appreciate if you can subscribe my youtube channel. I create awesome web contents.
Source Code Thanks for reading
Top comments (37)
Templates let you quickly answer FAQs or store snippets for re-use.
- Location Atlanta, GA
- Education B.S. in Biochemistry 2004, M.S. in Computer Information Systems 2007
- Work Senior Web Consultant at Applied Imagination LLC
- Joined Jul 30, 2019
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.
- Email business.modernweb@gmail.com
- Location Delhi, India
- Joined May 2, 2021
Oh! Sry. I'll make sure to add that from onwards. Thanks for suggession.
- Joined Sep 23, 2019
I can suggest that you use EmailJS for your contact form, so that your site is not only beautiful but also really works.
- Work Student
- Joined Jan 12, 2022
Truly, none of his projects are responsive. They're only good looking and functional.
- Location Portland, OR
- Education Saint Martin’s University
- Work Full-stack Engineer
- Joined Jul 12, 2020
Also, please add, semantic HTML to the list. The tutorial doesn't properly use HTML and heading tags.
- Email cmkrishna97@gmail.com
- Location India
- Work Front-end developer
- Joined Jan 6, 2021
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.
- Location El Paso, Texas, USA
- Joined Sep 17, 2021
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.
- Joined Jun 29, 2021
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 👍
- Joined Mar 29, 2020
You have reason.
- Email geekygaurab@gmail.com
- Location National Institute of Technology, Silchar
- Education National Institute of Technology, Silchar.
- Work Student at National Institute of Technology, Silchar.
- Joined Nov 16, 2021
Yup! And because of that, I have replaced the percentage number with a ✔ (to mark checked/completed).
- Location Germany
- Work Software Developer
- Joined May 6, 2020
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.
- Joined Feb 25, 2017
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.
- Joined Jul 28, 2021
Great one, please create another tutorial to add responsiveness. Looking forward to it
- Education ANALYSIS AND DESIGN OF SYSTEMS
- Work FRONT-END DEVELOPER
- Joined Dec 11, 2021
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.
- Joined Mar 8, 2023
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.
- Joined Jan 5, 2022
Excelent! Thank you for this tutorial, it helped me to understand better HTML, css and js
I am glad you liked it ❤️
- Joined Dec 20, 2020
Great Article, thanks for sharing it!
- Location Morocco
- Work not yet
- Joined Nov 9, 2021
- Education Cité Jacquard à Paris.
- Work Étudiant
- Joined Dec 18, 2021
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. 👍
- Email pythonistafelo@gmail.com
- Location Kenya-Nairobi
- Education Masinde Muliro University of Science and Technology
- Work Software Engineer-mmust.ac.ke
- Joined Sep 10, 2021
Pretty job ...but try to ensure the site is functional
I'll make sure of that. Thanks
- Joined Nov 28, 2021
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
- Joined Jul 28, 2017
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
- What's a billboard?
- Manage preferences
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!
How to Run Emulator Outside Android Studio
Odipo Otieno - Feb 4
Ditching useState and useReducer: Why useImmer is the better option
Rasaf Ibrahim - Feb 25
6 CSS Features to Make a Responsive Website
StakeDesigner - Mar 1
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.
We're a place where coders share, stay up-to-date and grow their careers.
Free CSS Templates, CSS Layouts & More!
617 Portfolio Website Templates
Viewing 1 - 12 of 617 Portfolio Templates
Portfolio website design with HTML CSS [source code]
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.
Prerequisite
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.
IMAGES
VIDEO
COMMENTS
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...
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...
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...
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
Learn How To Make A Portfolio Website Using HTML CSS JavaScript | Complete Responsive Website Design | Make Personal portfolio website❤️
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
Avana is a free minimal portfolio HTML template ideal for creative agencies that want to better showcase their own portfolio. The template is
Tokyo has a clean, minimal, and creative design that gives distinct flavors to your personal portfolio. The portfolio is SEO optimized, loads
Stable EV Website: html css bootstrap template javascript jquery admin dashboard admin template
Meet Arte HTML templates application craftwork css design figma html landing new photography portfolio
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
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
Free CSS Templates, CSS Layouts & More!
Let's build your portfolio website step-by-step · File structure · Boilerplate (general code) · Build the Header & navigation menu · Banner and