---
_db_id: 220
available_flavours:
- none
content_type: project
prerequisites:
  hard:
  - topics/free-code-camp/responsive-web-design/basic-html-and-html-5
  - topics/free-code-camp/responsive-web-design/basic-css
  - topics/what-to-put-in-your-cv
  - topics/web-frontend/intro-to-web-design/
ready: true
story_points: 3
submission_type: link
tags:
- html
- css
title: Build your first personal website
---

For the learnership you will create a website with your CV and a portfolio of your work. Create the website and host it on Github. You will be expected to keep your portfolio up to date throughout the learnership.

## Instructions

Create a personal website to showcase your talents and ambitions.

The content and information you choose to display is up to you. There should be some information about your skills, interests, and previous experience, as well as information on how to get in touch with you. Think about the user experience when designing your layout and navigation.

The HTML and CSS should be developed in a logical way with good naming conventions that would allow another developer to easily understand and build upon your code.

Your web page files and folders should be organised and named in a logical manner.

Once you have finished your design and are satisfied with the style and content, upload the website to be hosted on GitHub Pages.

Requirements:

- Website can be a single page or have multiple pages (the structure is up to you), but it must contain the following information:
  - About me
  - Skills (Your tech stack: the languages and tools you use)
  - Projects/Portfolio (for now this might be a bit empty, but if you've worked on anything cool then tell us about it)
  - Contact (social media, email, phone, etc)
- Website must be responsive to different screen sizes - use a mobile-first approach!
  - Use CSS Grid (see tutorials below) to design your site and make it responsive
- Website must be developed using HTML and CSS Grid with a logical structure and naming conventions in your code
- You can also add some Javascript to make things more interactive
- Feel free to use icons, colours, pictures or organograms if you need to
- Host your site as a Github Page. In your README file include a link to your github page for easy navigation

## Some advice

Start small and simple. Get the basic structure in first. Don't sit and obsess over choosing the right shade of green, or the perfect font.

Also, we'll be looking out for good developer habits. Please make sure you push your code often and your git commit messages actually make sense!

### Links

- How to make a GitHub Page : https://pages.github.com/
- CSS Grid: https://scrimba.com/g/gR8PTE (Screencast tutorials)
- https://css-tricks.com/snippets/css/complete-guide-grid/ (more info)
- Web Developer Portfolios to inspire you (https://medium.freecodecamp.org/15-web-developer-portfolios-to-inspire-you-137fb1743cae)

* Building a Data Science Portfolio (https://www.dataquest.io/blog/build-a-data-science-portfolio/)