Mentor Léo: Week 1/Day 3: idea to UI
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 ♥ https://mentorleo.co
Day 3: From idea to visual component
It’s time for you to start activating your thinking process.
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.
- grab a pen and paper
- imagine the design of your desired labels by drawing
- think of the HTML structure you could use to represent your labels
- should you nest multiple blocks ? which HTML tags should you use ?
- 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)
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 ♥ https://mentorleo.co