Hosting-and-showcasing-your-coding-skills-1

Hosting and Showcasing Your Coding Skills

08/05/2021

As a new developer, you’ll need to build a portfolio to show businesses and recruiters that you have the skills they’re looking for. The best way to do this is through a portfolio website. Read on — or watch the video below — to learn what to include in your portfolio site, where to host it, and how to find inspiration from other developers.

What to include in a portfolio site

There are several essential elements you’ll need to include in your portfolio site. While other developers may go above and beyond, don’t feel the need to compete. Even a simple portfolio is fine — you can always update it later as your skills grow. In the meantime, let’s explore the most important elements of your portfolio site.

Contact information

The contact page is important for people to, well, contact you. Add an email dedicated exclusively to your portfolio site here. Keep in mind that it may receive a lot of spam because it will be on a public-facing website.

You also may want to add your phone number. If you’re worried about receiving spam calls, Google Voice provides a free phone number that’s perfect for this. If Google Voice is not available in your area, a messaging service like WhatsApp or Telegram will work. Adding professional social media accounts is a nice touch.

Skills

This is the section where you list your skills. List all of your technical skills and the most relevant of your soft skills. Be sure to list your strongest skills or those that are most relevant to the position you’re applying for first. Recruiters will assume you list your skills in order of proficiency.

Portfolio

This is the focus of your portfolio site. Here, you should showcase at least three projects that illustrate your skills. List the most advanced project first. If you’re a beginner, you may not have many options, but you want to show some growth.

GitHub

As a developer, it’s important to have a GitHub section with a link to your profile, as well as a notable projects list. The notable projects list should direct hiring managers to your top three projects or GitHub repos. Your GitHub section adds more depth to your portfolio, allowing recruiters to look at the code behind your projects and determine if it matches their needs.

How to create a technical portfolio

Depending on which roles you’re applying for, building your own portfolio can help showcase your skills to prospective employers. In the video below, Codecademy Senior Curriculum Developer Ben Stone walks through building a technical portfolio with HTML, CSS, and JavaScript.

And if you want to add interactive features, check out Part 2.

Finding inspiration

It also helps to look at other developers’ portfolios for inspiration while you’re creating your own.

Google

Through Google, you can find plenty of portfolios to give you inspiration for your own. Just don’t be intimidated by experienced developers. When you’re just starting out, no one expects you to have a portfolio full of skills and projects.

Dribbble

Dribbble is a community and social media network for designers. At Dribbble, you can discover cutting-edge trends in design, and you may find a few portfolios you want to emulate. Explore any designs that capture your attention, and see what ideas you can draw from it. Once you have some experience, it’s also a good place to market your skills.

Awwwards

Awwwards is a competition site where websites are reviewed. It also has a portfolio section that you can draw inspiration from. Once you have some skills, don’t be afraid to submit your site here. A high score or an award can change your career.

LinkedIn

Having a LinkedIn profile is one of the most important things you can do as a developer because LinkedIn integrates job recruitment, unlike other social media platforms. It’s a great place to market yourself, showcase your portfolio, and learn from other developers.

An essential part of your LinkedIn profile is the Contact Info section. Here you can put your email address, Twitter handle, and a link to your website. Just make sure to keep your website up to date if you add the link to LinkedIn.

Another section on LinkedIn that offers an excellent opportunity to market yourself is the introduction area, which gives you the option to include some links. When you’re starting out, this is a good place to add the projects you’ve worked on.

There’s also a section on your LinkedIn profile that shows your profile views, appearances in search, and recruitment messages. Your list of skills triggers LinkedIn search result appearances, so you should list all your skills on LinkedIn and update your profile whenever you update your resume or portfolio.

Where to host your portfolio site

Now that you know what to include in your portfolio, let’s take a look at some of the best places to host them.

GitHub pages

To use GitHub, you’ll need to know Git, and as a developer, this is an important skill to know. If you don’t know Git, check out Learn Git from our courses. Hosting a portfolio site on GitHub is as simple as creating a repo with the following name:

YOURGITHUBUSERNAME.github.io

Once you create the repo and push your portfolio site to it, GitHub will publish your site, and you can visit it at https://YOURGITHUBUSERNAME.github.io.

There’s nothing wrong with using GitHub for your portfolio site and a free email service like Gmail when you’re starting out, but there are advantages to having your own domain and hosting. It helps with branding, adds a more professional look and feel to your portfolio, and will give you branded email accounts.

Advanced hosting for complex portfolios

GitHub is great for basic sites that consist of HTML, CSS, and JavaScript. It’s also decent for single-page apps, but if your portfolio consists of more than a single page, then you may need more advanced hosting, and the free options become limited.

Front-end application hosting

Surge is a hosting platform that offers free hosting for HTML, CSS, and JavaScript. You can install the platform’s SDK to your computer with the following command:

npm install --global surge

You can then deploy your application using the Surge command-line tool, and Surge will generate a URL for your project.

Other sites similar to Surge that provide developers with free hosting include Netlify and Zeet, which have a similar experience.

Back-end application hosting

If you want hosting for one of your back-end projects, you’ll need to look elsewhere.

Many developers use Heroku to host their portfolios. Heroku will let you host up to five apps for free. The only caveat is that your apps will be suspended after they haven’t been used for 30 minutes. So, there could be a delay when someone visits your app due to spin-up time.

Another option for hosting your back-end project is Firebase, which offers not only free hosting but also a free database. Another good option is Amazon Web Services. Amazon offers a free tier, but it’s only free for one year.

If a free service is not enough for your portfolio, you may want to get your own VPS (virtual private server). Digital Ocean is a good option because it comes with templates that make setting up your VPS simple.

All of these services will require configuration, and you’ll have to learn deployment techniques to use them. This skillset will also look good on your portfolio and resume, so you may want to start by learning deployment. We offer a short course called Deploying with Netlify and Heroku to help you out.

We covered a lot in this article, and it may seem overwhelming, or you may be uncomfortable showing your work on LinkedIn or Dribbble. But you don’t have to do everything listed here, especially at the same time. Just get started.


Code Foundations Courses & Tutorials | Codecademy
Interested in learning how to code, but unsure where to start? Our Code Foundations domain provides an overview of the main applications of programming and teaches important concepts that you’ll find in every programming language. This content will prepare you to chart a course to a more technical c…

Related articles

7 articles
what-is-open-source-1.png?w=1024

What Is Open Source?

09/22/2022
8 minutes
By Codecademy Team

Learn why developers and companies love open source software and how to start contributing to open-source projects.