If you've never deployed a website before, it can be quite confusing figuring out how to get your website online. Things like getting a domain name, uploading the necessary files and choosing where to host your site can be overwhelming.

I remembered how difficult I found it to setup my website the first time and I wanted to help other people avoid the mistakes I made, so I sent out this tweet:

I got more responses than I expected, so I ended up scheduling 9 sessions of 2 hours each for every weekend in February.

The idea was, at the end of February, I should have completed my portfolio design since I assumed helping other people would ensure I stayed on track with my plan. That plan didn't work out, but I did learn a lot in the process.

At the end of February, I successfully helped 6 developers (ranging from entry to mid level, and a 1:2 female-to-male ratio from 3 different countries) set up their portfolio website in one form or the other. I'll be documenting the main lessons from each session here.

In this article, we'll cover everything you need to know about setting up your portfolio site – from buying a domain name to deploying the site online. So let's get started.

1) How to Get a Domain Name

A domain name is the location of your site online. It's like having a username for the world wide web which visitors type into the URL bar to go to your site.

A domain name consists of a name (like google) and an extension (like .com) and it points to a specific IP address for the site you're deploying.

Purchasing a domain name from a registry allows you determine what location that domain points to. There are multiple registries where you can purchase a domain from, so you should do your research and decide which one works for you.

Here are some domain registries I'd recommend based on their features:

1. NameCheap – This is one of the more popular platforms, so it comes with a lot of customer support and hassle-free setup. They also offer free domain privacy. I'd recommend using this if you want to purchase a domain quickly.
2. Bluehost – Bluehost offers great hosting choices and comes with an inbuilt WordPress platform. I've personally used Bluehost for some client sites in the past and I really like the clean interface and onboarding guide it provides. I'd recommend using Bluehost for hosting WordPress sites.
3. NameSilo – A major benefit of NameSilo is that they offer free add-ons such as WHOIS Privacy (keeping your registration details safe) and Email Forwarding (sending emails from me@mysite.com to your actual email address). I'd recommend using this if you need a lot of extra add-ons on your domain.
4. Netim – I'd recommend using Netim for purchasing geographical domains such as .eu or .me. A fun option is to purchase a domain that ends with the last characters in your name e.g. www.jemi.ma.

Watch out for hidden fees when purchasing a domain. Lots of registries tend to offer very cheap or even free domain names but there are usually extra charges in the renewal method. Look out for the add-ons which you might not need.

A couple of the developers in the pair programming sessions had paid for .com domain names but the majority didn't own a domain name and weren't interested in purchasing one, at least for the time being.

The benefits of having a custom domain name are:

• it improves your SEO rankings
• it looks more professional when you're sending a link to a prospective employer or client.

Domain providers charge for domain names annually, and a .com domain might cost you $10 to $30 dollars per year, depending on any extra additions.

If you aren't comfortable with paying for a domain name yet, you can opt for a free domain option. We'll explore free domain options in the next section.

2) How to Choose a Hosting Platform

When you build a website, you can access it on your machine by going to localhost or index.html. However, if you want other people to be able to access your website on the internet, you need to upload it to a hosting platform.

A hosting platform is the localhost of the internet – it's a server that can be accessed by everyone.

Most domain registries also offer hosting options but it's not necessary to have your domain and hosting from the same place, as most registries charge an extra fee for hosting. Once you've purchased a domain name, you can use any hosting platform you'd like.

There's a number of hosting platforms that offer free hosting and domain names (with the platform domain attached) and you can choose any platform depending on how you'd like to structure your portfolio.

Let's explore the following options.

How to host a portfolio site without writing code

Platform: webflow.com

Webflow is a drag-and-drop site that allows you create great looking websites by writing little to no code.

With Webflow, you can create amazing layouts and animations by using the HTML and CSS functions on their dashboard, and it comes with an inbuilt CMS so you don't have to worry about updating content or storing images.

Webflow offers a free domain option with a webflow.io extension, for example myportfolio.webflow.io. With this option, you can create a static site with 2 pages. They also have a showcase of projects you can clone from and an online forum where you can get most of your questions answered.

I'd recommend Webflow to designers and developers who have knowledge of CSS layouts and animations and want to quickly setup their site.

How to host a static portfolio built with HTML and CSS

Platform: GitHub Pages

GitHub Pages is a feature from the GitHub platform that allows you display the code from your repository on a github.io site – so the URL would look like my-portfolio.github.io

GitHub pages are best suited for static websites (that is, a site built with HTML and CSS with fixed content and no server interaction or build process needed). It's also very simple to set up and can take as little as 10 minutes to get your site up and running.

To create a GitHub Page, your repository should include an index.html file in the root folder. Then, go to the Settings page of your repository and select your master branch as the source in the Github Pages section.

This was the method most of the developers used during the pair programming sessions as it took the least amount of time and had little to no complications. I'd recommend Github Pages for beginner developers who want to deploy their static sites quickly.

How to host a site that uses a framework like React or Vue

Platform: Netlify

If you're building your website with a front-end framework which requires a build process, Netlify is your best bet. It's perfect for dynamic sites (that is, a site that generates content from a server or has functionality that requires scripting – like sending messages through a contact form) and it also works with static sites.

Netlify has great documentation that provides information on any questions you might have related to using the site. It also has key features for improving your site like Netlify Forms which allow you set up a contact form on your site with no server-side code needed.

I currently use Netlify for hosting my site and it's been my favorite platform so far. I'd recommend it for developers who want to get their site (static or dynamic) up and running without any hassle in setting up a build process.

How to host a site with a backend server

Platform: Heroku

If your portfolio site requires data from a backend server (like getting a list of your projects from a RESTful app), then you'll also need to deploy that server so the frontend can access it.

Heroku is a platform that lets you deploy backend apps from eight supported languages (including Node.js and Python). It also allows you deploy static and dynamic front end sites so you can create two projects – one for your frontend code and the other for the backend app.

You can visit the Heroku Dev Center for more information on getting started with Heroku.

I haven't personally used the Heroku platform for deploying backend apps before, but one of the programmers in the pair programming session did so I thought I'd include it as well. I'd recommend it for full-stack developers who want to display their frontend and backend skills on their portfolio.

3) How to Deploy Your Site

Deploying a site means placing the code you've written on the hosting platform. In older platforms, you'd have to upload the code and all resources to a cPanel (which is basically File Explorer for hosting platforms).

Source: What Is cPanel Used For And Why Do I Need It? - A2Hosting

Nowadays, websites have become a lot more complicated than just .html files so they require different deployment methods.

If you have a React app, for example, the project will need to be built (like how you run npm start on your laptop to view the app) every time it's deployed to the domain.

Depending on the hosting platform you've chosen, the method of deployment is different. You can set up continuous deployment from a Github repository on Netlify (documentation here) and Heroku (documentation here). This means every time you push a new change to your repository, the change is reflected in your site.

If you're choosing to use a custom domain name, you'll need to link that domain name to your site. For example, on Netlify, your app is created with a netlify.app extension by default so it looks like myportfolio.netlify.app, but you can set a custom domain name. You can also set a custom domain name on Heroku.

Linking a custom domain on these platforms means you'll need to update the DNS (Domain Name System) records from your domain provider. DNS is what allows users access your site with your domain name, for example portfolio.com instead of an IP address like 127.0.0.1. You can read more on DNS here.

Source: Add an A record - GoDaddy

4. How to Choose a Design for Your Site

Another topic we covered during the sessions was choosing a design. Some of the developers already had their sites built, but some had no idea what sort of layout to go for.

When it comes to choosing a portfolio design, I recommend viewing other developers' portfolios for inspiration and ideas on how to structure your site. This articles shows 15 Web Developer Portfolios or, if you need some more inspiration, try 63 Examples.

You can also read this article on 5 Projects To Include in Your Front End Portfolio for project ideas.

It's important to determine the purpose of your portfolio and make sure that purpose is evident in every part of your site.

For example, if you're trying to use your portfolio to get a job, make sure you highlight your skills and experience on the main page and include call-to-actions to allow people view your résumé or send you a message.

If your portfolio is meant to get you clients for freelance purposes, then focus on previous projects you've built and reviews from other clients.

Source: https://www.bmediagroup.com/news/employ-adam/

Conclusion

Let's summarise what we've covered in this article. To deploy your site online, you'll have to:

1. Purchase a domain from a domain provider.
2. Choose a hosting platform, depending on how you want to build your site.
3. Link your domain to your hosting platform by updating your DNS records on your domain provider.
4. Set up deployment of your site from your hosting platform according to their documentation.

I wrote this article and offered the pair programming sessions because I remember how complicated it was to deploy my first website. I also remember how I made a lot of mistakes I could have avoided (like paying 10 times the original fee on renewal of one of my domains thanks to a bunch of add-ons I didn't need) so I hope you found it helpful.

If you did, or you have any other questions, you can let me know on Twitter or send me a message on my website.

However, a common problem you might have when building a portfolio is knowing what to include in it.

Is the simple web page you built for a course good enough to put on your website? Do you have to only include projects you were paid for, or can you include even the smallest of things? Is there a 'right' number of projects to have?

The purpose of this article is to provide some guidelines to how to populate your frontend developer portfolio, by way of example projects.

Here's a quick summary of the projects we'll be covering in this article:

1. A portfolio website
2. A clone website
3. A CRUD web application
4. An API-connected website
5. A 'perfect score' website

Note: this doesn't mean you have to build all these projects. This list is just to provide you with ideas on the sort of projects you can build.

Also, these projects are geared towards entry-level developers who've covered the basics of frontend development and are looking for slightly more advanced projects.

1. Build a Portfolio Website

_Photo by [Unsplash](https://unsplash.com/@goshua13?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Joshua Aragon / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

So long as you've built your portfolio website by yourself, it's perfectly fine to include it in your projects list. If you tend to change your portfolio design regularly, you can also include previous versions.

When including a project in your portfolio, you're not only showing off your skills, but you're also explaining the mindset behind the design. And this is something that potential employers are usually interested in.

For frontend developers, explaining how you arrived at your chosen layout is just as important as having an aesthetically appealing design.

You can go further and describe the steps you took to ensure your website followed the best developer practices. For example, share how you focused on improving the SEO and performance of your site.

Resources and examples: This article by Laurence Bradford provides more information on the structure of a portfolio and includes examples of awesome web developer portfolios you can use as inspiration.

Recommended technology: For beginners, I'd recommend using HTML, CSS and vanilla JavaScript to build a portfolio, especially if it's the first time.

2. Build a Clone Website

Being able to accurately convert a design to a fully functional webpage is a skill every frontend developer should have.

To do this, you need to have a keen eye for layout and colours. You'll also need experienced-based knowledge such as knowing the best CSS display property to match a layout or being able to render an animation according to specification.

In most organisations, frontend developers are responsible for translating mockups and prototypes to webpages, so it's beneficial if your portfolio displays your 'design-to-code' skills. Building a clone website is a good way to do that.

There are two ways to go about building a clone website:

First, you can recreate an existing website. A common challenge for junior developers is cloning the Google homepage.

This method is particularly useful for understanding real-life applications of style choices in popular websites. You can inspect elements in the page and try to understand the methods used for the box-model, positioning, and display.

_Photo by [Unsplash](https://unsplash.com/@solenfeyissa?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Solen Feyissa / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Second, you can recreate a design from scratch. For a more challenging project, you can look up designs on Dribble or Behance and attempt to translate the design to code.

To make this method more beginner-friendly, try recreating a simple page or feature such as a login form or weather app.

Recommended technology: Cloning the design of a website doesn't require any functionality, so HTML and CSS only would work fine. You can also use this time to familiarize yourself with a CSS framework or preprocessor such as SASS.

Note: all designs uploaded to these platforms are the copyrighted property of their owners, so you're not allowed to use them for commercial purposes. However, if you send them an email or leave a comment asking for permission to recreate the design for non-commercial purposes, the designer might be open to letting you recreate their designs for free.

It's also important to specify on your portfolio that the project is a cloned work or recreation of someone else's design.

3. A CRUD web application

Carrying out CRUD (Create-Read-Update-Delete) operations is a very common feature for most websites (like blogs, e-commerce, dashboards, and so on) so it's something you need to be accustomed to building as a front-end developer.

A basic form of a CRUD application is a To-Do List or a Notes webpage. Having one of these projects on your website shows your skill with manipulating data structures. It's also a good opportunity to display your work with a frontend framework.

_Photo by [Unsplash](https://unsplash.com/@jessbaileydesigns?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Jess Bailey / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Tania Rascia's article on working with local storage is a helpful introduction to learning how to create CRUD web applications with vanilla JavaScript. Or, if you want a more framework-specific article, check out the same author's article on Building A Crud App with React Hooks

Recommended technology: CRUD apps require use of reusable components so it's a good idea to build them using a framework such as React or Vue, depending on your familiarity.

Example site: React CRUD App with Hooks

4. An API-connected website

A lot of large scale projects require some sort of communication with a backend server and displaying data fetched from that server. This requires the use of an Application Programming Interface (API) in most cases.

An API is... I like to think of it as a digital librarian. Imagine having books stored in a library and you need to use these books for a report.

So, you go to the librarian and ask to check out a book. You need to tell the librarian certain keywords (let's say the name of the book and the name of the author) and have the right authorization (in this case, a library card) to get this book.

Now replace 'library' with 'server', 'books' with 'data', 'report' with 'website' and 'librarian' with 'API'.

_Photo by [Unsplash](https://unsplash.com/@ismailenesayhan?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">İsmail Enes Ayhan / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

APIs allow frontend developers to collect, modify and delete data from a backend database. Building a site that consumes an API to display data is a great project to include on your portfolio.

Example sites: You can choose to create a data display site (for example, a website that connects to a weather API and displays the current weather) or, for a more challenging project, you can set up a RESTful API and carry out the operations on your website.

5. A 'perfect score' website

A perfect score website is a website that scores 100% across all categories on the Chrome Lighthouse audit report. Building a website that meets all the required features shows your skill at following best practices and ensuring high quality projects.

You can read up on how to optimize your website for performance and accessibility to get a perfect Lighthouse score in this article How I Built My Perfect Score Portfolio Website.

Conclusion

So there you have it: 5 projects you can include in your frontend end portfolio. Also, these don't all have to be separate projects. You could create a perfect score cloned website or a CRUD application that uses an API to call data from a JSON file.

Now you can go forth and build. Happy coding :)

If you found this article helpful or if you have any questions, you can let me know on Twitter.