Mentor Léo: Week 1/Day 3: idea to UI

Work from anywhere, be a web developer
Learn by doing, become a Hero developer

This series is about teaching Léo to become a professional developer from scratch. Léo can be any of you, desiring to learn and grow. Apply here, it will always be free ♥

See the goals of the project week 1 on medium

Day 3: From idea to visual component

It’s time for you to start activating your thinking process.

I want you to build “labels” using HTML & CSS. These are meant to show your skills (HTML, CSS and later Javascript, React, Node.js, etc). Remember the project ? We will grab job offers according to those skills.

You’ll find below an exemple of labels, but you can choose to do whatever you want. They can be of any shape, they can be outlined, they can be big or small, they can have any color you want. Be creative, and don’t give up till you implemented your idea. Try to do your own design and not copying the example below.

An exemple of labels

Exercise 1

  • grab a pen and paper
  • imagine the design of your desired labels by drawing

Exercise 2

  • think of the HTML structure you could use to represent your labels
  • should you nest multiple blocks ? which HTML tags should you use ?

Exercise 3

  • define the space you need to give them (margin ? padding ?)
  • position in the page ? alignment ?
  • pimp it up with colors and any of your desires
  • write your HTML / CSS so that it’s simple to add another label, and do not require to recopy too much code (specially CSS code)

Concepts to understand

  • how to pragmatically build a component from an idea
  • learn to reuse code (you may have code in common between your labels, try not to repeat too much code)


→ click here to go to Day 4👍

Call to action

Become a Léo ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.