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

html-css

resume-building

layouts

flexbox

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 1	Version 2	Version 3
Click to expand	Click to expand	Click to expand

🌱 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:

1$ 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 1	Strategy 2
Click to expand	Click to expand

💡Tips when building your resume:

Rely heavily on the different HTML tags available: <h1>, <h2>, <h3>, <p> (paragraph), <ul> or <ol> (bullets or ordered list), <divs>.
Start by defining your strategy, pick the tags first. Then start coding.
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.