Tutorial on Creating Responsive Web Portfolio With HTML5, CSS3

This tutorial will explain how to create a simple portfolio website using HTML5, CSS3, Jquery. In this case we are trying to create a web portfolio design for a cartoonist, illustrator, or artist. If previously we had created a one page website with a flat design style, now we will again create a one page website, it can even be called just a landing page.

Free Portfolio Templates Layout

Web Portfolio doesn’t need to be too complicated, what is needed is information about who owns the portfolio, examples of work, and contacts who can be contacted, so it’s not too complicated actually creating a portfolio website.

Web Portfolio doesn’t need to be too fancy, it’s quite simple but the contents of the portfolio shouldn’t be simple ~ TWD

Simple tips to make your portfolio more crowded, one of which is to create a blog that is associated with the portfolio, so a blog as a visitor attraction. Hm .. we will not discuss in detail the problem of marketing here 🙂 , back to focus on the tutorial.

Before starting we should know in advance what we are going to make. The following is an example of a portfolio that we will create – DEMO


Just like cooking, making a website also needs ingredients, here are the ingredients we need, because here the author only makes examples, so the examples of his portfolio are taken from several websites, not personal ones.

CSS Reset from Meyer web
Google Fonts Montez & Sofadi One
Magnific Popup
Critters – Ohh Deer (Image for header)
Q2. What do you do in your spare time? (Image for the How I Work section)
Logan Evolution (Image For Gallary, just for demo)
File Structure

The following file structure has been prepared, the css files are placed in the css folder, the images are placed in the img, the images for the gallery are placed in the images folder, while the popup plugin is in the popup folder.

File Structure
File Structure

HTML Structure
Next we immediately create the HTML structure used. The HTML structure of the template created is already valid based on the W3 Validator.

Creating headers