How to Make a Web Design Portfolio Online

How to Make a Web Design Portfolio Online

Being a web designer, you take pride in the projects you have so diligently worked on in your career. This can only mean one thing — it’s time to collect your finest works and put them on display. How you present your works speaks of your professionalism. It’s in your best interest to showcase your designs in a neat and organized way. This is where web design portfolios step in. 

Your customers or employers would much rather see than hear about your works and projects. A good portfolio gives them that opportunity and helps you win their trust. If you’re interested in how exactly to create a web design portfolio, keep reading. This article will guide you through the process step by step. 

We are going to use one of Renderforest’s website templates to create a portfolio. So, let’s go to “Build Website” in the navigation menu and start creating.

Renderforest website builder

Once you’re on the Website Builder page, you’ll find several categories and subcategories for website templates. Choose one that meets your needs. For a web design portfolio, you can select “Portfolio” under the Personal category or “Design” under the Art category.

website template categories

Alternatively, you can click on “All” to open all the available templates and use the search bar to look for the one you need.

use the search bar to find a template

When you pick a category, you’ll be presented with a number of various website templates to choose from. The picture below shows you the options for a portfolio.

portfolio website templates

After you choose one, click on it for a full-screen preview of the template. We have picked the “Web Designer CV.”

Preview a template

On the Preview page, you can scroll down to view the template, as well as see what it looks like on desktop, tablet, and phone screens.

preview on desktop, tablet, phone

If you’d like to browse more templates, click “Back to Templates” on the left-hand corner. Once you’re satisfied with the chosen template, hit “Apply” on the upper right corner.

apply template

The “Apply” button takes you to the Website Maker Editor, where you can edit and fully customize the template. So, let’s see how it’s done.

start customizing the template

Every single element in the template is customizable. This is what makes it so flexible to work with. First, let’s start with adjusting the header.

customize the header

On the left side, there’s an option for you to attach your logo. On the right, you can change the background color. If you want to replace the entire header with something else, click on “Replace” right next to the background color.

replace the header

Once you click on it, you’ll be presented with numerous other options for the header section. When you find the suitable one, hit the “Replace” button.

header replacements

Now that you’ve decided what the header will look like, you can start composing your navigation menu. Delete the menu items you don’t want or add new ones by clicking on “add link.”

menu items - add link

To attach your link to the menu items, click on the hyperlink icon.

anchor link icon

It will open a new window, where you can edit the menu item name and insert an external link or a jump link to a specific section on your page.

link adding window

Lastly, you’ll notice a “Component” button. It allows you to add any other text or visual components to your website.

add component

You will find any component you can think of, starting from CTA’s and pricing to FAQ and social media links.

components window

Once the header section is complete, move further down and keep customizing the other sections in the same way. You can modify, replace, delete, or add any block you see on the page.

To edit a text in the template, all you have to do is click on it and start typing.

edit the textbox

To change the icons, click the edit button and a new window will pop up.

edit the icons

Here, you can use the search bar to look for what you need. Pick your icon and hit “Save” to see it replaced.

icon window

This template has a separate section dedicated to photos of your works and designs. Choose how many images you want to display and click on the image icon to add your image.

upload your images

You can upload your file, insert the image URL, choose a photo from our Media Library, or browse stock images.

image uploading options

At the very bottom of your page, you have an option to attach your social media links. Choose the icons, then insert your social links to share your accounts with your visitors.

add your social media links

Moving along, you might have noticed the sidebar menu on the left side of the page. The sidebar provides you with additional editing tools for your design portfolio. Let’s have a quick look at the tools and their functionalities.

sidebar menu

The first tool lets you adjust the text font and size. Experiment with the fonts until you find the perfect one that compliments your style.

Text tool

Right under, you’ll notice the “Styles” tool, which controls the shape of the buttons and elements on your page. You have three options: rounded, cornered, and sharp-edged.

Styles tool

Next up, we have the “Color” tool. Pretty self-explanatory; it lets you choose the colors. You can either try out the color palettes suggested by our design team or add your brand colors.

Colors tool

Our next tool is called “Pages.” If you want to add a new page, you do it with this tool. Click on “Add new,” then type in the name of your page to create it. Afterward, you can go ahead and customize it as well.

Pages tool

With the “Widgets” tool, you can add extra tools and functionalities to your portfolio. For now, the only widget available is a live chat. You’ll find several live chat service providers. Pick one, then follow the provided link to learn how to set it up.

Widgets tool

Last but not least, we have the “Settings” tool. With this, you can tweak the more technical settings of your page. There are three categories for settings: general, page, and domain. The general settings are responsible for showing the cookie bar, editing your favicon, choosing your social image, and so on.

General settings

The “Page” settings help you set up the page title, meta description, and keywords. Lastly, the “Domain” deals with your website domain name. You can either opt for your custom domain or a free Renderforest subdomain.

domain settings

Once you’ve adjusted the final settings, you’ve pretty much finished creating your portfolio. Congrats! But before we conclude this tutorial, let’s briefly talk about the top bar as well. 

Here, you’ll find two tiny arrows that allow you to undo and redo your changes. If you accidentally make a wrong move, don’t worry, you can always undo the damage.

undo and redo changes

Next, you have an option to share the editing link to your portfolio with a contributor who can additionally review, proofread, and edit your project. You decide how long the editing link stays active.

share your project

The Preview button allows you to see what your page looks like before you publish it. Again, you can preview your portfolio on desktop, tablet, and phone.

Finally, once you’ve made sure everything is perfect, and your portfolio looks fabulous, you can press that much-anticipated “Publish” button! Your project will automatically be saved in “My Websites.” You can access and edit it any time you wish.

publish your website


Looks like you have successfully created your project. Now go ahead and conquer the world with your outstanding web design portfolio!

Click the button below and build your own website today.

Create Now

User Avatar

Article by

Dive into our Forestblog of exclusive interviews, handy tutorials and interesting articles published every week!

Read all posts by Renderforest Staff
Related Articles
Close icon
Search icon