← Back to Projects

Build your resume in HTML/CSS

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

3 hrs

Technologies

Your Resume (CV) in HTML and CSS

Resume in HTML/CSS Breathecode

You are in your way to be a software developer, you are going to need to update your Resume eventually, hug? πŸ’ͺπŸ˜…

These are some examples of resumes you can build:

Version 1Version 2Version 3

[Click to expand](https://github.com/breatheco-de/exercise-build-your-resume-html-css/blob/master/.learn/assets/version1.png?raw=true)

[Click to expand](https://github.com/breatheco-de/exercise-build-your-resume-html-css/blob/master/.learn/assets/version2.png?raw=true)

[Click to expand](https://github.com/breatheco-de/exercise-build-your-resume-html-css/blob/master/.learn/assets/version3.png?raw=true)

🌱 How to start this project

This project comes with the necessary files to start working, but you have two options to start:

a) Open this link in your browser with gitpod(recommended): https://gitpod.io#https://github.com/breatheco-de/exercise-build-your-resume-html-css.git

b) You can clone this repository on your local computer:

$ git clone https://github.com/breatheco-de/exercise-build-your-resume-html-css.git

πŸ’‘ Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>), and upload the code to your new repository using add, commit and push.

πŸ“ Instructions

The ideal example is version 3 but you can build version 1 or version 2 first, and later jump into version 3.

Start by drawing your strategy!

Look at the expected result and use a marker to identify the tags, imagen what CSS styles will you be applying to them, remember to reuse styles, don't repeat yourself!

Strategy 1Strategy 2
Strategy 1 Resume Click to expandStrategy 2 resume Click to expand

πŸ’‘Tips when building your resume:

  1. Rely heavily on the different HTML tags available: <h1>, <h2>, <h3>, <p> (paragraph), <ul> or <ol> (bullets or ordered list), <divs>.

  2. Start by defining your strategy, pick the tags first. Then start coding.

  3. When building your CSS start from the most generic and general to the most specific, it will decrease the amount of work dramatically. For example:

    • You can apply a style to all of your h1 at once to make them stronger.
    • You can apply the font family to the entire website <body>.
    • You can pick the colors for everything and then only specify different colors for the few exceptions.

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

3 hrs

All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.