How to Create a Portfolio Website: What is it? How Can It Help You?

“What is a portfolio website?”, you may ask. Well…a portfolio website, also known as an online resume, is a personal website that highlights your skills and experience. You can use it to showcase your work for potential employers. It should include recent projects you have completed, the skills you have used in these projects, and links to any other social media sites where they can find more of your work or contact information. We’ll go through a few things here, namely:

  • How to create a portfolio website from scratch
  • Portfolio website principles and benefits
  • And we’ll demonstrate a few examples of portfolio website templates along the way

How to Create a Portfolio Website

Creating a portfolio website from scratch can be easy or difficult, just depends on your skill set and how much you want to display. If you want a simple, basic site that gets the job done, then follow these steps:

Step #1

Decide what kind of portfolio website templates you will need. For example, if your work is mostly digital art or graphic design related, then an online resume with pre-made graphics and space for samples may be all you really need to showcase your skills. But if it’s more complex projects like web development or creating mobile apps from scratch…then it might make sense to create something a bit more robust using HTML/CSS/JavaScript code directly on the page instead of through one of those template sites. That way potential employers can see how well you’ve started coding already without having to download anything onto their own computer first (which is always a hassle).

Step #2

Decide if you want to use free templates or purchase something. We’ll go into details later about what sort of features are available among the various types of website templates, but it’s important to decide this now so that your portfolio site actually looks professional and matches the work you’re trying to convey.

Step #3

Find an online portfolio site template that best fits the needs you outlined in step one and two above, download it to your computer, then upload all of the necessary images/fonts/CSS files onto a new hosting account or server space on a web service like GoDaddy (cheap), Bluehost (mid-range), or iPage (more expensive).

Step #4

Get the code for your website up and running on that hosting space. You can do this with tools like Adobe Dreamweaver, Microsoft Expression Web, Coda Studio Pro…or any other HTML editor you’re already familiar with. The key is to not use something like Microsoft Word, Open Office Writer, or Google Docs. These will work but you’ll be disappointed with the results as there are a few things those types of software can’t do that HTML editors can (and they’re important).

Step #5

Now that your portfolio website is online, make sure everything looks right. If you’re not experienced with HTML/CSS coding yet…you may want to get some help from a friend or hire someone on Fiverr (cheap) or Upwork (mid-range).

Portfolio website principles and benefits

It’s important to understand why you should have one or more portfolio websites. Outside of the obvious increase in exposure and potential clients, a great portfolio demonstrates commitment to the craft and instills confidence in the marketplace. By displaying your past work (your best projects), you will obtain new clients and business partners who have a deeper understanding of your abilities and can trust you with large projects. Those are the benefits, now let’s get into the best practices and principles of portfolio website design.

Portfolio website principles

First, it’s important to understand the difference between a personal portfolio and one that showcases work you can do for others. If your past projects are all self-initiated…then build yourself an online resume with pre-made design elements where potential clients can contact you if they’re interested in hiring someone for their own projects. If you’re a freelancer or consultant who works directly for others…then it’s best to build an online portfolio of your recent work with the goal of impressing future employers. In either case, there are some basic principles that all portfolios should follow:

Don’t reinvent the wheel

Find templates from other designers and developers if possible. Making your own portfolio is difficult and takes a lot of time. If you can find something that’s close to what you’re looking for, then go with it…otherwise hire someone on Fiverr or Upwork to customize the template for you in order to save money.

Choose quality images

Make sure all of your images are the best they can be. If you took them with your phone or webcam at the time of project completion…then go back and retake all of those images so that they match up to what potential clients will expect from a high-quality portfolio website (great resolution, no blurry areas, proper color balance).

Don’t get carried away

Keep your design simple. If you have too many elements on any given page, the visitor will become distracted and leave your website to find a simpler alternative elsewhere…which is not what we want as portfolio websites are supposed to attract people so that they’ll hire you for future work.

Use a good logo

A great logo can be worth its weight in gold. Make sure it’s placed prominently on your portfolio website and is easily recognizable by any visitors who come across it (i.e., make sure the text matches up with the logo).

Don’t be shy

Make all of your services, features, and prices available to potential clients at a quick glance from anywhere on your site. If they have to search for it or contact you…they’ll lose interest and go elsewhere.

Be fast

Make sure your website loads quickly on mobile devices as well as desktop computers so that visitors won’t become frustrated when trying to view any pages, images, videos, etc.

Portfolio website design principles (the fun stuff)

Now that we’ve gone over the basic principles of portfolio websites…let’s talk about what they should look like. There are many different ways to go with any online design, but you’ll want to choose something that fits in line with your personal style preferences AND the type of work you’re trying to showcase (i.e., use dark colors and bold font for a horror movie portfolio, but use light colors and thin font if you’re trying to show off your wedding photography). Here are some basic design principles that can be used as inspiration:

White space is key – Portfolios should have plenty of white spaces so each element has enough room to shine. When too many elements or images are crowded together, they lose their effect and appear cluttered.

Elaborate on your work – Avoid using stock photos or random designs that don’t relate to what you’re trying to show off. Instead…try finding images of the types of projects you’ve done in real life so visitors can understand better how it would look if they hired you to do something similar.

Don’t be afraid of color – Contrasting colors can help make elements stand out and grab the attention of your visitors. If you’re looking for a professional design that isn’t too flashy or loud…then go with grayscale background images and neutrals such as white, black, gray, etc.

Navigation is key – Make sure your portfolio allows users to navigate through the different sections of your website easily. Use icons or text links wherever possible so that visitors will know where they’re going before clicking on anything (i.e., if you’ve got a “work” section…then label it as such in order to avoid confusion).

Be consistent – Try and maintain a similar design throughout your entire portfolio website in order to avoid confusion or disorientation. If you’ve already built one page…then don’t change the look of it shortly after because visitors will notice and potentially become frustrated by having to relearn everything all over again (even though they should be familiarizing themselves with your work already).

Make it easy for visitors to contact you – At the very least, make sure that there’s a link on each page of your website that will take them directly to an email address where they can reach out and get in touch with you. If possible…go one step further by making this contact form interactive or even adding in a live chat box (like the one you can find on our website).


The best portfolio websites will increase site visitors over time and attract future customers, it’s that simple. The creative process is one that bears fruit over the long term, so it’s important to emphasize quality and stick to relevant information when developing your own portfolio website. Remember, showcase work and let your professional experience shine. Don’t be afraid to demonstrate that quality work through your unique style, contribute to search engines, and include contact forms so you can acquire more clients.

Good luck!

You may also like

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}