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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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

To attach your link to the menu items, click on the hyperlink 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.

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

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

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.

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

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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