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 .
How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript
Everyone needs websites and web applications these days. 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.
In this tutorial, I'll discuss some of the main reasons why you should make a portfolio website for yourself. Then, I'll walk you through how to build your own fully responsive portfolio website with HTML, CSS, and JavaScript.
Table of Content
What is a developer portfolio website, why you should have a portfolio website, portfolio project – how to build your own online developer portfolio, the project folder structure, the basic html boilerplate, the navbar section, how to style the navbar, how to build the hero section, how to style the hero section, how to build the more about me section, how to build the skills section, how to style the skills section, how to build the projects section, how to style the project section, how to build the contact section, how to style the contact section, how to style the social icons, how to add the scroll to top button, the html for the scroll to top button.
- H ow to Style the Scroll to Top Icon
How to Make Your Portfolio Website Responsive
How to create the media query for tablets and mobile phones (max-width 720px), how to build the hamburger menu, the javascript for the hamburger menu, how to make the hero section responsive, how to make the more about me section responsive, how to make the skills section responsive, how to make the projects section responsive, how to make the contact form responsive, how to make the website responsive on small phones.
A developer portfolio website provides relevant information to potential employers about your skills, experience, and projects you've worked on.
You can consider your portfolio website to be your online résumé.
1. A Portfolio Website Increases Your Online Presence
As a developer, you need an online presence. You can cultivate this online presence on social media platforms such as Twitter, Facebook, and Instagram. But those are not entirely your own, as the moderators of those platforms have almost full control over your account.
With your own portfolio website, it's live on your own domain online. And people can easily find you when they search for your name on a search engine like Google, provided you put the right things in place when it comes to SEO.
2. A portfolio website is your online résumé
Your portfolio website is like your online résumé. Potential clients and hiring managers can easily find you online and check out your previous projects and skills.
This also means that when anyone wants to give you an opportunity to work for them, and they ask for your previous projects, you just give them one link to your website (your portfolio). It not only has your projects but your skillset and information about your past experience as well.
3. A Portfolio Website Shows Evidence of Expertise in your Field
Having (let alone building you own) portfolio website as a developer sends out a clear message that you're putting your skills into practice and that you know what you are doing.
A portfolio can also help build trust with clients because they have direct evidence of the quality of your work.
You can make a cool portfolio website for yourself with HTML, CSS, and JavaScript. And that’s what we are going to do here.
I already did this some months ago and made it available to everyone as a free product on Gumroad, so I decided to create a tutorial on how I got it done.
This is the live demo of what we will be building.
To follow along with me, you can grab the starter files from Github .
To avoid confusion, I will be arranging the HTML, CSS, JavaScript, icons, and images of the project in their respective folders.
The HTML file goes in the root folder, and the image, icon, CSS, and JavaScript files will be in their separate subfolders in an asset folder. This is a common practice.
There is also a readme file containing all the tools I used in the project, with their respective links. It's available in the starter files.
Everyone has their preferences when coding out a whole project with HTML, CSS, and JavaScript. Some like to define the whole HTML boilerplate first and then the CSS later, but I like to do everything section by section.
So, I will be starting with the navbar section. But it’s good to show what the basic HTML boilerplate looks like first:
I have all the sections in the HTML commented out so you can follow along better. In the boilerplate there are also the CDNs for animate CSS (A CSS animation library), and Ionic icons, the icon library I chose for the project.
I have a favicon made through Favicon IO and linked it in the head section. Favicon is the little image that shows on a browser tab.
The Navbar section contains the simple logo of h1 text, and the nav menu:
If you are wondering what the button element represents, it’s the bars for toggling the nav menu on mobile (a hamburger menu). This will be hidden on desktop but shown on mobile.
I will also be linking the individual sections of the website to these nav items, so when the user clicks on any of the nav items, they are taken to the section that corresponds to the nav item they click.
That’s why I have the hyperlink reference ( href ) attributes set to #about , #skills , #projects , and #contacts , respectively. The individual section of the website will have these attributes as ids.
The navbar definitely needs some styling to make it look a bit nicer.
Before styling the navbar properly, I will be declaring some CSS variables to make things easier later. This is because, with CSS variables, it is easier to avoid redundancy and repetition in your CSS file.
The syntax for declaring CSS variables looks like this:
To use the variable, you do this:
I will also import the Roboto font from Google, and declare some CSS resets to remove some default features such as margin and padding for elements, text-decoration for anchor tags, and list-style-type for lists.
If you notice, I set a hover state for all links on the website from line 39 to 41. When the user hovers on any link, it changes to the secondary color I set in the CSS variables.
Here's a good rule of thumb for declaring CSS variables: if you find yourself using the same property and value often in the same CSS file, you should declare a variable for it to avoid repetition.
You should also make your variable names are as descriptive as possible, like I did, in order to help others who might work with your code.
To style the navbar and align the content in it, I will be using CSS Flexbox:
What's the CSS above doing?
I made the navbar sticky with the position property, so it remains at the top no matter what.
The z-index property with the value of 1 makes sure the navbar displays over any other element on the web page. That's how you make a sticky navbar.
In addition, I also applied a shadow to the bottom of the navbar with the box-shadow property.
But we're not finished yet. The nav menu items need to be side by side, not on top of each other. I will be doing that with Flexbox too.
I will also finish up the rest of the navbar styling by making the h1, nav items, and the hamburger menu button look nicer. I'll do this with some CSS variables initially declared.
The hamburger menu bar also needs to be hidden. It has a class of .burger-menu , so we can set a display of none with it and also make the button look better.
The next section we'll work on is the hero section. This won’t take quite as much work as the navbar.
The HTML boilerplate for the hero section is in the code snippet below:
The only thing that's a bit strange are the classes of animate__animated animate__shakeX attached to the div containing the About Me text. The class names are from animate CSS and they serve to animate the About Me text container.
Flexbox will come to the rescue once again! This section has two major sets of content – an image and text in a div. So we can use flexbox to display them side by side. You can see how it works in the CSS code snippet below:
Our Jane Doe image is too big, so we need to reduce its width and height. We also need to style the bio text (About Me text) for readability too. The CSS variables initially declared will be very instrumental here.
I included this section to include some more information about Jane Doe with some placeholder text.
You can take advantage of this to include information you were unable to put in the About Me section.
The HTML boilerplate for this section is quite short and simple:
The CSS is straightforward as well. All we'll do is set a background-color with the --bg-color CSS variable, make the section readable by setting the padding, margin, line-height, and aligning the h2 text to the center:
From the live demo, you'll see that the skills section contains relevant skills such as HTML, CSS, JavaScript, and so on. I was able to get the icons of those languages as SVGs from Icons8.
The HTML boilerplate for this section is in the code snippet below:
There are six icons in total. And instead of having to align them with Flexbox, I grouped them in two places (3 teach), with the classes of first-set and second-set, so they stay on top of each other. This means that the stylings we'll apply will be more readable. Easy!
Notice that I’ve been attaching the loading attribute to the individual icons and images and setting it to lazy. This will make sure that the images are loaded only when the user scrolls to the sections containing them. This will subsequently speed up load time, because only what is needed will be loaded.
We should style the section a little bit because it doesn’t look good enough yet:
In the CSS above, I defined a maximum width for the whole section to push things to the center for a better user experience.
Other stylings we applied relate to clarity and readability. For example, I increased the size of the icons to make them more visible with the width and height properties. I also applied a padding of 1rem (16 pixels) to all the icons to push them apart from each other a little bit.
Still, I think the section can be better, so I have decided to make some more tweaks with the box-shadow property.
Remember from the HTML that there is a class attribute called .icon-card attached to all the icons. I will be using the class name to put all the icons in a card:
One of the major purposes of a portfolio website is to show off your projects. So we'll need to build a section to showcase projects you've worked on in the past.
This section is probably the most tedious to style, but Flexbox won’t stop being our friend.
The HTML for this section is in the code snippet below:
Looking at the HTML, there are three projects in total, all in their individual divs with the class name of project-container and project-card. These class names will be instrumental in styling the projects consistently.
The containing section element itself has a class of projects, and an id attribute of projects as well. The class name is for styling, and the id is for linking it to the Projects link on the navbar.
The projects have their individual images with the class name of project-pic , their titles with a class of project-title , more details with the class name of project-details , and links with the class name of project-link .
The sole purpose of giving all of them unique class names is to style them.
These are a few of the projects I worked on myself when I was starting out as a developer.
The section doesn’t look good yet, though – there is even an annoying horizontal scrollbar caused by the images. So we have a lot to do with CSS.
First of all, I will give the whole section a background color by setting the greyish color (--bg-color) we declared in the CSS variables as the value.
I will also reduce the width and height of the project images by usung the project-pic class. Then I'll use Flexbox to put the projects side by side.
The images now look better, but the project title, project details, and project links need to be aligned nicely within their individual containers.
The whole project section also needs to be pushed to the center. You don’t need Flexbox to do this, though – it can be done by setting the text align property to the value of center:
Notice that I also set a width of 21.875rem (350 pixels) for the individual project containers. This will push them apart from the sides for a better user experience. In this case, the user would not need to look all the way across before they see everything.
We can still make this section better. The project titles, project details and project links look chunked together, so we should add some padding and margins.
The individual project containers also need to look more distinct. The box-shadow property will be instrumental here again, so I’m putting them in their individual cards.
If a potential employer or client finds your portfolio website attractive, they might want to contact you. So you'll want to have a contact form in this section, alongside links to your social media profiles.
The HTML for this section looks like this:
Here we've built a contact form with input fields for name and email, a textarea so people can enter the message to be sent, and a submit button for submitting the message so you can see it.
If you take a good look at the form element, you’ll see I have an action attribute set to a URL from Formspree. This is what I chose for the form submission. With Formspree, you can get the message directly in your email inbox without having to set up a server with complex PHP or JavaScript.
Note that you can't use my URL – it won't work for you. You can easily setup your own on the Formspree website for free. I also attached a resource on how to set up Formspree to the readme file of the project.
I have set some id and class attributes for the individual inputs to style them. There is also a name attribute for all the input fields. This is required by the Formspree form submission service.
To get a basic validation, I attached a required attribute, so the form refuses to submit if the user leaves any of the input fields unfilled.
All I will do in the CSS is align the whole content to the center and make the input fields look better.
With the text align and margin properties, you can align the h2 and the container for the contact form to the center.
I will also put the whole form in a card with the box-shadow property.
The input fields, textarea, labels and placeholders definitely need some styling as well to help with alignment and clarity:
But the placeholders are not consistent with the labels. So we need to give it a color and some padding. I will be giving it the primary color set in the CSS variable lists.
To select the placeholders for styling, you can use the placeholder pseudo-class:
In the contact form, the only thing left is to style the button. Buttons are quite easy to style:
In the CSS code snippet above, I made the button go all the way across in the form container by giving it a width of 100%. I also made it more visible with some padding, a margin, a border, and a bolder font weight.
The border-radius property with a value of 5px removes the sharp edges and the transition serves to slow things down a little when the button is in the hover state.
The hover state is defined in the CSS code snippet below:
Remember that having your social media links in your portfolio website is a plus for anyone who might want to contact you. That’s the next thing we are going to do, and we are going to do it in a unique way.
The HTML for the social buttons is in the code snippet below:
The social icons I chose are animated gif icons from icons8. I put all of them in a container with the class of socials , and gave them an individual class of socicon for styling.
With the CSS above, the social icons will be fixed to the right on the web page, so anyone who visits the website sees them no matter where they scroll.
Look at that!
The only thing left to do is the footer. There’s nothing complex in the footer HTML and CSS apart from the reserved character entity for copyright symbol and heart:
We need to make all the content of the individual sections display on section on top of the another (in a column layout). We can do this pretty easily with media queries and Flexbox.
Before adding the media queries for responsiveness, lets implement a scroll-to-top button with HTML, CSS, and JavaScript.
For the HTML, I got an animated icon from Icons8 and decided to put it in an i tag.
The i tag has a class of scroll-up for styling and an id of scroll-up for selecting it with JavaScript. This is because in my projects, I like to use classes for styling and ids for JavaScript functionalities.
How to Style the Scroll to Top Icon
I will make the scroll-to-top icon fixed just like the social icons. I'll also give it a cursor property of pointer, so the cursor changes when the user hovers on it.
With the class of up-arrow attached to the scroll-to-top icon, I will also increase the size of the icon for visibility:
But it doesn’t do anything yet. So we need to make it functional with a few lines of JavaScript:
What is the script above doing?
The first line selects the scroll-to-top button with the id attribute attached to it in the HTML. We used the querySelector() method here. You can also use the getElementById() method.
In the remaining lines, I used the click eventListener to get the user’s click action and exploit the scrollTo part of the windows object to make the button functional.
With this functionality, when the user clicks on the scroll-to-top button, the page scrolls to the top and left side of the website smoothly. I did this by setting top to 0 , left to 0 , and behavior to smooth .
You can learn more about the windows object by opening up your browser’s developer tools console. Type in window and hit enter, then you see everything available in the windows object, like I did below:
To make the website responsive, we will be using CSS media queries and Flexbox.
First, we'll need to make the images and text look smaller, and then we'll make the content of each section display in a vertical layout by setting the flex-direction to column.
In the media query, I will be using 2 breakpoints – 720px and 420px .
The 720px breakpoint is for tablets and mobile phones, and 420px is for small phones like an iPhone 6, and small Android phones.
Media query Breakpoints are the points at which you want the content of a website to respond according to the width of a device. So, any code put under the 720px breakpoint reflects on devices with a screen less than or more than 720px, depending on whether you specify max-width or min-width.
In the case of a max-width of 720px , the media query syntax looks like this:
We will start making the website responsive right from the navbar, because the navbar doesn’t look good on smaller devices.
First, I’m going to reduce the padding of the navbar so the h1 logo and nav menu items fit in nicely:
On small devices, the nav menu items need to be on top of one another, and they need to be hidden. So, its time to update the code so the hamburger menu is initially hidden.
To make the hamburger menu, we need to take the nav menu items out of the viewport. Then we need to set a class of show on the nav list items that will be toggled with few lines of JavaScript (remember the nav items are in an unordered list).
In the CSS code snippet above, I set a position of fixed on the unordered list ( ul ) to make it float on the screen. I also pushed it down 86px from the top with top: 86px , and 10% to the left.
I gave it a width of 80% of its parent (the nav element from the HTML), pushed it to the center with text-align: center , and finally hid it with the transform property set to translateX(120%) . This will push it to the right and force it out of the viewport.
And now, when the user clicks to show the nav items, they all slide in from the right. Awesome.
If you want the nav menu items to slide in from the left, change the transform property value to transform: translateX(-120%) (this is the direct opposite of transform: translateX(120%) ). It's as easy as that, depending on your preference.
I also assigned a margin of 8px to the nav items to give them more space.
The hamburger menu bar remains hidden. So we need to show it by giving it a display of block, setting a class of show to translate on the x-axis to 0 in order to show it, and then toggle it with JavaScript.
Our hamburger menu bars now gets shown, but the nav items remain hidden. To show it, we need to toggle the show class on and off with JavaScript.
To toggle the navbar nav menu items on and off with JavaScript, we first need to select all relevant items of the navbar and store them in some variables:
- The burger variable select the hamburger menu bars
- The ul variable selects the list items (the nav links altogether)
- The nav variable selects the container itself (the nav element)
What we need to do next is toggle the nav ul.show class when the user clicks the hamburger menu bar. We'll do this by adding a click eventListener to the hamburger menu bar, and then using the toggle method to remove and add the class of show .
Remember that we selected it and stored it in a variable called burger .
But there is a problem – the mobile nav is not hidden any time any of the nav item links are clicked. So we need to remove the class of nav ul.show when any of the nav item links are clicked.
We can do this with a few lines of JavaScript too:
Remember that the nav links have a class of nav-link from the HTML. So I selected all of them with that class and put them in a variable called navLink. We did this with the querySelectorAll( ) method.
I then looped through all the links with the forEach array method and listened for a click event on all of them. Then I used the remove() method provided by the DOM to remove the class of show any time any of the nav menu items are clicked. This will take all the list items out of the viewport.
That’s a lot of work. With what we just covered you can make a hamburger menu for any website.
All we need to do is give it a flex direction of column in the media query, reduce the width and height of Jane Doe's image, and make the About Me text (bio text) readable.
I have the following CSS to make it readable and more presentable:
All we need to do in the media query is reduce the sizes of the icons with the width and height properties:
In the projects section, we need to make the three projects stack on top of one another by setting the flex direction to column. I will also reduce the width of the individual containers a little bit.
The width of the contact form needs to be reduced to push it away from the sides and make sure that the fixed social media icons are not on top of it.
All we need to do is set a maximum width:
To fix these quirks, I will be adding some media queries at the 420px breakpoint:
I reduced the size of our Jane Doe image, and also reduced the width of the bio text (About Me text), the project container, and the contact form container as well.
That’s the end of it all. We have a fully responsive portfolio website.
You can download the finished version as a zip file from this GitHub repo .
You can also check out the live demo of the portfolio website as well. It has a readme that contains information about the tools I used, and how you can customize the website.
In this tutorial, you learned what a developer portfolio website is and why you should have one.
You also learned how to make a fully responsive portfolio website with HTML, CSS, and JavaScript.
The different parts of this tutorial are each small projects that, when combined, turn into a giant one-page website. For example, you can make card design, a responsive menu bar, a functional contact form, and a scroll-to-top button as the tutorial covers them all.
Feel free to customize the website to your taste.
If you find this tutorial useful, you can share it with your friends and family. I would really appreciate that.
Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.
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
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.
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 [email protected]
- 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 [email protected]
- 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 [email protected]
- 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 [email protected]
- 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.
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:
[email protected]
Your Suggestion:
Thank you for helping us.
Your message has been sent to W3Schools.
Top Tutorials
Top references, top examples, web certificates, get certified.
Personal Portfolio Website using HTML & CSS
Hello Viewers, today we are going to Learn How To Make Personal Website Using HTML And CSS. You Easily Create This Personal Portfolio Website Using HTML By Follow These Tutorials And Steps. You’ll Build This Awesome Personal Portfolio Website By Just Following This Video Tutorial Or These Steps Which I Given Bellow.
On this Portfolio site, there are navigation bar with a logo on the left side, some navigation links are on the middle side and right side button. Next Step, On the left side of this site, there are texts which are about the author’s name, profession, and a button labeled as “Download CV” as you can see in the image.
Video Tutorial of Personal Portfolio Website
If you like this portfolio and want to get the source codes of this tutorial, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program. You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.
Responsive Personal Portfolio Website | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
now you’ve successfully created Personal Portfolio Website using HTML and CSS. If your code does not work or faced any error/problem then bellow download the source code files from the given download button.
after after downloading source files then face any problem to comment down or contact us through the contact page.
- CSS Project
- CSS Website
- Html Website
- Portfolio Website
Related Articles
[solved] typeerror: substring is not a function in javascript, how to unfreeze venmo account, how to remove watermark from any image.
It’s perfect time to make some plans for the future and it’s time to be happy. I have read this poost and if I could I desire too suggest you few interesting things or tips. Maybe you could write next articles referring tto this article.
I desire to read even more things about it!
Thank you for posting this. I have been looking for like this kind of. Fantastic information and facts I’ll look for any info relevant to your Lentil soup Diet pinterest web design.
Hi, I do think this is an excellent website. I stumbledupon it 😉 I am going to revisit yet again since i have saved as a favorite it. Money and freedom is the best way to change, may you be rich and continue to help others.
Loving the information on this website , you have done great job on the blog posts.
LEAVE A REPLY Cancel reply
Save my name, email, and website in this browser for the next time I comment.
Most Popular
[solved] taberror: inconsistent use of tabs and spaces in indentation, jsonpath in python with examples.
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
- Data Structure & Algorithm Classes (Live)
- System Design (Live)
- DevOps(Live)
- Explore More Live Courses
- Interview Preparation Course
- Data Science (Live)
- GATE CS & IT 2024
- Data Structure & Algorithm-Self Paced(C++/JAVA)
- Data Structures & Algorithms in Python
- Explore More Self-Paced Courses
- C++ Programming - Beginner to Advanced
- Java Programming - Beginner to Advanced
- C Programming - Beginner to Advanced
- Full Stack Development with React & Node JS(Live)
- Java Backend Development(Live)
- Android App Development with Kotlin(Live)
- Python Backend Development with Django(Live)
- Complete Data Science Program(Live)
- Mastering Data Analytics
- DevOps Engineering - Planning to Production
- CBSE Class 12 Computer Science
- School Guide
- All Courses
- Linked List
- Binary Tree
- Binary Search Tree
- Advanced Data Structure
- All Data Structures
- Asymptotic Analysis
- Worst, Average and Best Cases
- Asymptotic Notations
- Little o and little omega notations
- Lower and Upper Bound Theory
- Analysis of Loops
- Solving Recurrences
- Amortized Analysis
- What does 'Space Complexity' mean ?
- Pseudo-polynomial Algorithms
- Polynomial Time Approximation Scheme
- A Time Complexity Question
- Searching Algorithms
- Sorting Algorithms
- Graph Algorithms
- Pattern Searching
- Geometric Algorithms
- Mathematical
- Bitwise Algorithms
- Randomized Algorithms
- Greedy Algorithms
- Dynamic Programming
- Divide and Conquer
- Backtracking
- Branch and Bound
- All Algorithms
- Company Preparation
- Practice Company Questions
- Interview Experiences
- Experienced Interviews
- Internship Interviews
- Competitive Programming
- Design Patterns
- System Design Tutorial
- Multiple Choice Quizzes
- Go Language
- Tailwind CSS
- Foundation CSS
- Materialize CSS
- Semantic UI
- Angular PrimeNG
- Angular ngx Bootstrap
- jQuery Mobile
- jQuery EasyUI
- React Bootstrap
- React Rebass
- React Desktop
- React Suite
- ReactJS Evergreen
- ReactJS Reactstrap
- BlueprintJS
- TensorFlow.js
- English Grammar
- School Programming
- Number System
- Trigonometry
- Probability
- Mensuration
- Class 8 Syllabus
- Class 9 Syllabus
- Class 10 Syllabus
- Class 11 Syllabus
- Class 8 Notes
- Class 9 Notes
- Class 10 Notes
- Class 11 Notes
- Class 12 Notes
- Class 8 Formulas
- Class 9 Formulas
- Class 10 Formulas
- Class 11 Formulas
- Class 8 Maths Solution
- Class 9 Maths Solution
- Class 10 Maths Solution
- Class 11 Maths Solution
- Class 12 Maths Solution
- Class 7 Notes
- History Class 7
- History Class 8
- History Class 9
- Geo. Class 7
- Geo. Class 8
- Geo. Class 9
- Civics Class 7
- Civics Class 8
- Business Studies (Class 11th)
- Microeconomics (Class 11th)
- Statistics for Economics (Class 11th)
- Business Studies (Class 12th)
- Accountancy (Class 12th)
- Macroeconomics (Class 12th)
- Machine Learning
- Data Science
- Mathematics
- Operating System
- Computer Networks
- Computer Organization and Architecture
- Theory of Computation
- Compiler Design
- Digital Logic
- Software Engineering
- GATE 2024 Live Course
- GATE Computer Science Notes
- Last Minute Notes
- GATE CS Solved Papers
- GATE CS Original Papers and Official Keys
- GATE CS 2023 Syllabus
- Important Topics for GATE CS
- GATE 2023 Important Dates
- Software Design Patterns
- HTML Cheat Sheet
- CSS Cheat Sheet
- Bootstrap Cheat Sheet
- JS Cheat Sheet
- jQuery Cheat Sheet
- Angular Cheat Sheet
- Facebook SDE Sheet
- Amazon SDE Sheet
- Apple SDE Sheet
- Netflix SDE Sheet
- Google SDE Sheet
- Wipro Coding Sheet
- Infosys Coding Sheet
- TCS Coding Sheet
- Cognizant Coding Sheet
- HCL Coding Sheet
- FAANG Coding Sheet
- Love Babbar Sheet
- Mass Recruiter Sheet
- Product-Based Coding Sheet
- Company-Wise Preparation Sheet
- Array Sheet
- String Sheet
- Graph Sheet
- ISRO CS Original Papers and Official Keys
- ISRO CS Solved Papers
- ISRO CS Syllabus for Scientist/Engineer Exam
- UGC NET CS Notes Paper II
- UGC NET CS Notes Paper III
- UGC NET CS Solved Papers
- Campus Ambassador Program
- School Ambassador Program
- Geek of the Month
- Campus Geek of the Month
- Placement Course
- Testimonials
- Student Chapter
- Geek on the Top
- Geography Notes
- History Notes
- Science & Tech. Notes
- Ethics Notes
- Polity Notes
- Economics Notes
- UPSC Previous Year Papers
- SSC CGL Syllabus
- General Studies
- Subjectwise Practice Papers
- Previous Year Papers
- SBI Clerk Syllabus
- General Awareness
- Quantitative Aptitude
- Reasoning Ability
- SBI Clerk Practice Papers
- SBI PO Syllabus
- SBI PO Practice Papers
- IBPS PO 2022 Syllabus
- English Notes
- Reasoning Notes
- Mock Question Papers
- IBPS Clerk Syllabus
- Apply for a Job
- Apply through Jobathon
- Hire through Jobathon
- All DSA Problems
- Problem of the Day
- GFG SDE Sheet
- Top 50 Array Problems
- Top 50 String Problems
- Top 50 Tree Problems
- Top 50 Graph Problems
- Top 50 DP Problems
- Solving For India-Hackthon
- GFG Weekly Coding Contest
- Job-A-Thon: Hiring Challenge
- BiWizard School Contest
- All Contests and Events
- Saved Videos
- What's New ?
- HTML-Attributes
- HTML-Audio/Video
- HTML5-MathML
- HTML-Examples
- HTML-Questions
- HTML-Quiz 1
- HTML-Quiz 2
- HTML-Tutorial
- Web Development
- Web Technology
Related Articles
- Write Articles
- Pick Topics to write
- Guidelines to Write
- Get Technical Writing Internship
- Write an Interview Experience
- Design an Event Webpage using HTML & CSS
- Create a Music Website Template using HTML, CSS & JavaScript
- How to make image Gallery using HTML CSS and JavaScript ?
Simple Portfolio Website Design using HTML
- D3.js | d3.hcl() Function
- How to create a Portfolio Gallery using HTML and CSS ?
- How to add filter with Portfolio Gallery using HTML, CSS and JavaScript ?
- PHP | array_fill_keys() Function
- What is the difference between inline-flex and inline-block in CSS?
- CSS | inline-size Property
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?
- CSS | Image Gallery
- CSS | Image Sprites
- CSS | Styling Forms
- CSS | Website Layout
- HTML | Layout
- HTML applet Tag
- HTML Tags – A to Z List
- HTML Elements
- HTML Attributes
- HTML Paragraphs
- HTML Text Formatting
- Top 10 Projects For Beginners To Practice HTML and CSS Skills
- How to insert spaces/tabs in text using HTML/CSS?
- How to set the default value for an HTML <select> element ?
- How to set input type date in dd-mm-yyyy format using HTML ?
- Hide elements in HTML using display property
- CSS to put icon inside an input element in a form
- Types of CSS (Cascading Style Sheet) Styling
- Difficulty Level : Easy
- Last Updated : 08 Aug, 2021
Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent, so in this article, we will learn how to make a simple one-page portfolio by just using HTML. This portfolio might contain some very important information of yours like:
- about us section
- your projects
- your achievements
- your contact details
You can even add other details too in your portfolio and can make it more beautiful. But this article focuses on beginners who are wanting to learn to build their portfolio using simple HTML.
Prerequisite: Basic concepts of HTML like tags, attributes ,forms, tables, rows, columns, hyperlink etc.
Code Implementation:
Note: We have used two photographs as well. One in the about table and other in the project section.
Supported Browser:
- Google Chrome
- Microsoft Edge
Please Login to comment...
- anikaseth98
- ysachin2314
- Technical Scripter 2020
- Technical Scripter
- Web Technologies
New Course Launch!
Improve your Coding Skills with Practice
Start your coding journey now.
Complete Responsive Portfolio Website Using HTML & CSS
Published by codingmaster on June 10, 2021 June 10, 2021
Hello Friends, today in this blog you’ll learn how to make Fully Responsive Portfolio Website Using only HTML & CSS.
Yes using only HTML & CSS you can create a responsive portfolio website…for responsive we use Media Queries. This is best practice to create responsive websites to improve your HTML & CSS skills. If you’re a beginner then this will be your 1st HTML & CSS project to create a responsive wesbite.
Video Tutorial of How To Make Responsive Portfolio Website Using Only HTML & CSS
In the video you’ve seen that we create a responsive portfolio website using only HTML & CSS. we’ve add 5 sections on the website..Home, About, Skills, Work, Contact…Using simple HTML & CSS we can easily create this type of amazing portfolio websites.
So, enjoy the tutorial & learn something new today 🙂
Complete Portfolio Responsive Website [ SOURCE CODE ]
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
- Recent Posts
- 7 JavaScript Tips and Tricks you must Know! - October 18, 2022
- How to Manage State with Zustand in React - October 13, 2022
- CSS Image Gradient Hover Effect - August 28, 2021
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.
Related Posts
CSS Cards HTML & CSS Projects
Neumorphic post card using bootstrap 5.
Neumorphism is the recent design trend, which uses cool shadow techniques to create a beautiful, subtle, and smooth design. Today, in this post we’ll create a beautiful Responsive Neumorphic Post Card using Bootstrap 5. You Read more…
HTML & CSS Projects Tips & Tricks
Best css courses on youtube for beginners.
CSS is an essential part of Web Development. If you are aiming to become a Front-end developer having a core understanding of CSS is a must! CSS can be easy and difficult at the same Read more…
Simple Calculator Using HTML, CSS & JavaScript
Today, in this post we’ll learn how to create a simple yet beautiful calculator using our plain old HTML, CSS & JavaScript. If you are just beginning your journey in Web Development, especially in JavaScript, Read more…
Portfolio Website in HTML CSS & JavaScript | Free Source Code
As you see on the given image of the portfolio website on the webpage, this is a real example of the personal portfolio website that we are going to build today. Basically, this is the header or home section of our portfolio website, when we scroll we can see various pages of this website like the about me section, my skills section, my services, and others.
To see the real demo of this website and all the code that I have used to make this personal portfolio website, do watch the full video tutorial that I have given below. Yeah, you can download all source codes given below but you will not get the idea, of how all codes are actually working on this portfolio website.
Responsive Portfolio Website using HTML CSS & JavaScript | Video Tutorial
You May Like This:
- Glassmorphism Website Design
- Resposnsive Navigation Menu
- Responsive Side Navigation Menu
- CSS Hover Animation On Navbar
(adsbygoogle = window.adsbygoogle || []).push({});
Complete portfolio website | source code, you might like, 26 comments.
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.
bhai apna mobile number de skte ho kya pls. or you can message me on WhatsApp 7274870904
I do not use whatsapp, you can DM me on instagram.
hey, thanks so much for inspiring me. i have love programing after reading through this
Glad to hear. Thank you for loving and supporting.
happy coding
i love this...
Hey! Thank you so much
the countdown for download is too much
Dami xa bro.
welldone you are ver inspiring
you are the best one
Very awesome stuff.... pls can u stay in contact with me ? instagram id is _crazy_freelancer_
Not Able to Download the code
You may have use Adblock
Glad you like it. Best regards!!
very nice, brother
thank you so much for the learning opportunity
This the best
hey amaizing bro im a front end developer recently i have done my course but now im start freelauncing can you help me .....????
Wow! Great work dude.
Post a Comment
Contact form.
AdBlock Detected
- No suggested jump to results
- Notifications
Portfolio website using HTML,CSS and JAVASCRIPT
Skshalu/Code-Clause_Portfolio-website
Name already in use.
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more .
- Open with GitHub Desktop
- Download ZIP
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Code-Clause_Portfolio-website
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
- Post author: harsh
- Post published: September 16, 2022
- Post category: Project / Codewithrandom / Front-end / HTML & CSS / Html & CSS Project / javascript project / portfolios / Project Ideas / Web Development project
- Post comments: 1 Comment
Telegram Group Join Now
Portfolio Website is related to your professional world. It matters your skills, contribution to projects, your achievements, testimonials, expertise, resume etc. It is basically all about yourself so that you can avoid making a long CV.
Earlier people used to create resumes and they used to easily secure the job. But, nowadays technology is growing so fast that things are updating day-by-day, you have to adapt new things and find uniqueness in yourself to get placed in your dream company.
We saw why portfolio is important to grab the attention of interviewer and to take few steps towards your dream company. Now let us see the building of a Portfolio Website I’ll be building a Photographers Portfolio Website, Later on you can edit it and make it for yourself as per the requirement of your profession.
ADVERTISEMENT
So, Hey Coders Welcome back to the new blog of codewithrandom . Today we’ll learn how to code the Portfolio Website project using the scripting language HTML5, CSS3 & JS. To start the project first we’ll code in the HTML language.
HTML Code for Portfolio Website
Here is the HTML code for the Portfolio project here we have simply added the div tag which is used to divide our window into different sections or containers. While displaying your name always use the H1 tag so that it displays large. Also always keep your social media details at the footer of the page.
100+ Front-end Projects for Web developers (Source Code)
Now we have coded the project but it’s so simple with no colors so to achieve this we’ll code in the Cascading Style Sheet Language i.e. CSS3.
CSS Code for Portfolio Website
In this code, we have designed step by step all the predefined tags which were present in the HTML code. We have imported the fonts from Google fonts. In the body section, we have coded the necessary CSS properties such as font color, background color, font weight & font size.
5+ HTML CSS project With Source Code
For the customization of the cursor, we have also styled it and mentioned the required radius and position for it. We have also used some properties to make it responsive but to make it we have code in the language of JavaScript.
JavaScript code for Portfolio Website
This is the code of JavaScript and its properties that make our portfolio attractive and grab the attention of the interviewer. Simply we have coded the jQuery. To make our customize cursor responsively. Also, we have called the functions addClass and removeClass so that when the cursor is clicked on a different link it redirects the user to a different page.
Now We have completed the Java Script Code. and Hence We came to the end of this project but before that, we make sure to preview our project in the given output section.
FINAL OUTPUT of Portfolio
We have Successfully created our Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code) | Photographers Portfolio You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.
Ecommerce Website Using Html Css And Javascript | E-commerce Website ( Source Code)
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
WRITTEN BY – Harsh Sawant
Code BY – Ivan Grozdic
You Might Also Like
Date calculator javascript | date calculator html css javascript – codewithrandom.
RGB to hex and hex to RGB Converter using JavaScript
Navbar Using Html, Css And, And Javascript ( Source Code)
This post has one comment.
Excellent for beginners
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 👇 [email protected]
- 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.
- Online Degree Explore Bachelor’s & Master’s degrees
- MasterTrack™ Earn credit towards a Master’s degree
- University Certificates Advance your career with graduate-level learning
- Top Courses
- Join for Free
Build Your Portfolio Website with HTML and CSS
1,918 ratings
34,387 already enrolled
Understand the infrastructure of hosting a website and web browsing
Understand how to create web page contents with HTML (hypertext markup language)
Understand how to customize the format of web page contents with CSS (cascading style sheets)
This 1-hour long tutorial will take you step by step to create a portfolio website. You will learn the basic components of a website, and how to create simple contents using HTML (hypertext markup language) and CSS (cascading style sheets), and how to host it on a popular developer website called “GitHub” with your own subdomain name! By the end of the tutorial, you will be hosting a website that you can use to showcase your work and your résumé to the world!
Skills you will develop
Cascading Style Sheets (CSS)
Learn step-by-step
In a video that plays in a split-screen with your work area, your instructor will walk you through these steps:
UI introduction and finished product preview
(Take 1) How web browsing works and what is HTML?
HTML - headings and paragraphs
HTML - images, small text and horizontal lines
HTML - hyperlinks
CSS - overview, margins, background colours, text colours
CSS - fonts, text alignments, hyperlink colours
Finishing Touches
How Guided Projects work
Your workspace is a cloud desktop right in your browser, no download required
In a split-screen video, your instructor guides you step-by-step
Harrison Kong
- 5 stars 64.12%
- 4 stars 28.31%
- 3 stars 5.57%
- 2 stars 1.09%
- 1 star 0.88%
TOP REVIEWS FROM BUILD YOUR PORTFOLIO WEBSITE WITH HTML AND CSS
It's little basic level but the instructor is awesome and quite knowledgeable. I enjoyed the course and one should try once.
The way in which the instructor drove the project is really good. Plus the I was able to get hands-on experience of coding my project , which is real learning experience for me.
It was a great course to learn from and how it is use for and also to build your portfolio and I had learn a lot from this course and I thank Coursera.
This is an amazing hands on course.
I am looking forward for more difficult website development guided courses, with free cost :)
Frequently Asked Questions
What will i get if i purchase a guided project.
By purchasing a Guided Project, you'll get everything you need to complete the Guided Project including access to a cloud desktop workspace through your web browser that contains the files and software you need to get started, plus step-by-step video instruction from a subject matter expert.
Are Guided Projects available on desktop and mobile?
Because your workspace contains a cloud desktop that is sized for a laptop or desktop computer, Guided Projects are not available on your mobile device.
Who are the instructors for Guided Projects?
Guided Project instructors are subject matter experts who have experience in the skill, tool or domain of their project and are passionate about sharing their knowledge to impact millions of learners around the world.
Can I download the work from my Guided Project after I complete it?
You can download and keep any of your created files from the Guided Project. To do so, you can use the “File Browser” feature while you are accessing your cloud desktop.
What is the refund policy?
Guided Projects are not eligible for refunds. See our full refund policy .
Is financial aid available?
Financial aid is not available for Guided Projects.
Can I audit a Guided Project and watch the video portion for free?
Auditing is not available for Guided Projects.
How much experience do I need to do this Guided Project?
At the top of the page, you can press on the experience level for this Guided Project to view any knowledge prerequisites. For every level of Guided Project, your instructor will walk you through step-by-step.
Can I complete this Guided Project right through my web browser, instead of installing special software?
Yes, everything you need to complete your Guided Project will be available in a cloud desktop that is available in your browser.
What is the learning experience like with Guided Projects?
You'll learn by doing through completing tasks in a split-screen environment directly in your browser. On the left side of the screen, you'll complete the task in your workspace. On the right side of the screen, you'll watch an instructor walk you through the project, step-by-step.
More questions? Visit the Learner Help Center .
Coursera Footer
Start or advance your career.
- Google Data Analyst
- Google Digital Marketing & E-commerce Professional Certificate
- Google IT Automation with Python Professional Certificate
- Google IT Support
- Google Project Management
- Google UX Design
- Preparing for Google Cloud Certification: Cloud Architect
- IBM Cybersecurity Analyst
- IBM Data Analyst
- IBM Data Engineering
- IBM Data Science
- IBM Full Stack Cloud Developer
- IBM Machine Learning
- Intuit Bookkeeping
- Meta Front-End Developer
- DeepLearning.AI TensorFlow Developer Professional Certificate
- SAS Programmer Professional Certificate
- Launch your career
- Prepare for a certification
- Advance your career
- How to Identify Python Syntax Errors
- How to Catch Python Exceptions
- See all Programming Tutorials
Popular Courses and Certifications
- Free Courses
- Artificial Intelligence Courses
- Blockchain Courses
- Computer Science Courses
- Cursos Gratis
- Cybersecurity Courses
- Data Analysis Courses
- Data Science Courses
- English Speaking Courses
- Full Stack Web Development Courses
- Google Courses
- Human Resources Courses
- Learning English Courses
- Microsoft Excel Courses
- Product Management Courses
- Project Management Courses
- Python Courses
- SQL Courses
- Agile Certifications
- CAPM Certification
- CompTIA A+ Certification
- Data Analytics Certifications
- Scrum Master Certifications
- See all courses
Popular collections and articles
- Free online courses you can finish in a day
- Popular Free Courses
- Business Jobs
- Cybersecurity Jobs
- Entry-Level IT Jobs
- Data Analyst Interview Questions
- Data Analytics Projects
- How to Become a Data Analyst
- How to Become a Project Manager
- Project Manager Interview Questions
- Python Programming Skills
- Strength and Weakness in Interview
- What Does a Data Analyst Do
- What Does a Software Engineer Do
- What Is a Data Engineer
- What Is a Data Scientist
- What Is a Product Designer
- What Is a Scrum Master
- What Is a UX Researcher
- How to Get a PMP Certification
- PMI Certifications
- Popular Cybersecurity Certifications
- Popular SQL Certifications
- Read all Coursera Articles
Earn a degree or certificate online
- Google Professional Certificates
- Professional Certificates
- See all certificates
- Bachelor's Degrees
- Master's Degrees
- Computer Science Degrees
- Data Science Degrees
- MBA & Business Degrees
- Data Analytics Degrees
- Public Health Degrees
- Social Sciences Degrees
- Management Degrees
- BA vs BS Degree
- What is a Bachelor's Degree?
- 11 Good Study Habits to Develop
- How to Write a Letter of Recommendation
- 10 In-Demand Jobs You Can Get with a Business Degree
- Is a Master's in Computer Science Worth it?
- See all degree programs
- Coursera India
- Coursera UK
- Coursera Mexico
- What We Offer
- Coursera Plus
- MasterTrack® Certificates
- For Enterprise
- For Government
- Become a Partner
- Coronavirus Response
- Beta Testers
- Translators
- Teaching Center
- Accessibility
- Modern Slavery Statement
IMAGES
VIDEO
COMMENTS
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?
The HTML, CSS and JavaScript codes are well structured and comment so you can easily modify them. Download Howdy 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.
A Portfolio Website Shows Evidence of Expertise in your Field Having (let alone building you own) portfolio website as a developer sends out a clear message that you're putting your skills into practice and that you know what you are doing.
1 to 12 of 616 Free Portfolio Website Templates Available on the Free CSS site
First, create a project folder named " portfolio " and then, create other folders & files as you see above. And we will create the "favicon.ico" later. Boilerplate (general code) As you have seen on the demo, it's a one-page website /template that contains all the sections. So we will write all our HTML in the "index.html" file.
Portfolio Website using CSS ADVERTISEMENT Step3: We will now style our navigation bar. Our navbar bar's display is set to "flex" and its position is set to "fixed" using the class selector (.nav). The navbar's height and width are both set to "auto," respectively.
How To Create a Portfolio Website Step 1) Add HTML: Example <!-- MAIN (Center website) --> <div class="main"> <h1> MYLOGO.COM </h1> <hr> <h2> PORTFOLIO </h2> <p> Resize the browser window to see the responsive effect. </p> <!-- Portfolio Gallery Grid --> <div class="row"> <div class="column"> <div class="content">
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.
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. Learn HTML Style with CSS.
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.
In this YouTube video tutorial, you'll learn how to create your very own personal portfolio website using HTML and CSS. The video will walk you through the p...
Responsive Personal Portfolio Website | Source Codes You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file. First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file.
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.
You can even add other details too in your portfolio and can make it more beautiful. But this article focuses on beginners who are wanting to learn to build their portfolio using simple HTML. Prerequisite: Basic concepts of HTML like tags, attributes ,forms, tables, rows, columns, hyperlink etc. Code Implementation: HTML <!DOCTYPE html>
In the video you've seen that we create a responsive portfolio website using only HTML & CSS. we've add 5 sections on the website..Home, About, Skills, Work, Contact...Using simple HTML & CSS we can easily create this type of amazing portfolio websites. So, enjoy the tutorial & learn something new today :) Complete Portfolio Responsive
Step1- Create an HTML file called index.html and put the provided codes inside of it. Keep in mind that the images used on this website (which you can grab from GitHub) must be placed in a file with the.html extension for them to display. Step2- We'll start with the header of our portfolio before moving on to the navbar.
Learn How To Make A Portfolio Website Using HTML CSS JavaScript | Complete Responsive Website Design | Make Personal portfolio website ️ Get Source Code: htt...
Responsive Portfolio Website using HTML CSS & JavaScript | Video Tutorial As you have seen on the given tutorial of this responsive portfolio website. I have added all the important pages for the portfolio website that continuously appears when we scroll down this website is fully responsive, which means this website can fit on any screen ...
Skshalu / Code-Clause_Portfolio-website Public. Star. main. 1 branch 0 tags. Go to file. Code. Skshalu Add files via upload. ea94682 5 days ago. 2 commits.
Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode🔔 Subscribe For More!https://www.youtube.com/c/Bedimcode Get templateh...
I can build the portfolio website from scratch, convert the PSD, XD, pdf, sketch, Figma, jpg and any other format to HTML or if you want a custom portfolio with each page according to your own choice. HTML,CSS and JavaScript based portfolio. Services: 1.Modest portfolios. 2.Responsive pages through multiple media queries. 3.Clean code. 4.Custom ...
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code) Portfolio Website is related to your professional world. It matters your skills, contribution to projects, your achievements, testimonials, expertise, resume etc. It is basically all about yourself so that you can avoid making a long CV.
The Slideshow is great with smooth transitions of texts and nice images. Main features: • Responsive Layout. • HTML, CSS, Javascript. • Bootstrap. • Free Font. • Font-Awesome. • Creative and Modern Flat Design, lots of possibilities. • Fully compatible with all major browsers such as Firefox, Safari, Chrome, Vivaldi, and Internet ...
This 1-hour long tutorial will take you step by step to create a portfolio website. You will learn the basic components of a website, and how to create simple contents using HTML (hypertext markup language) and CSS (cascading style sheets), and how to host it on a popular developer website called "GitHub" with your own subdomain name!