Mentor Léo: Week 1/Day 2: CSS

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 2: Pimp it up !

Let’s make the page look sexy using CSS ;)

Exercise 1

  • add a custom background color (or use a background image, it’s up to you, in this case google “css background image” instead of using an image)
  • use a custom color to your text and a custom color to your heading

Exercise 2

  • wrap your content (heading, description and photo) into a div that has a class “intro”. You’ll use this class to apply styling to your whole content.
  • make your “intro” class center-aligned (trick: use a display: inline-block to your image to make it behave like a text line and be aligned according to your text alignment in your intro class).

Exercise 3

  • document yourself on “margin” and “padding”: what are the differences between the two ?
  • use either padding or margin for making space between the top of the page and your intro class

Concepts to understand

  • CSS structure
  • class versus id (good practice: use classes only)
  • spacing (margin, padding)


→ click here to go to Day 3👍

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 ♥

Like what you read? Give Damien BRY a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.