jeraldinnemg / conquering-responsive-layouts

Conquering Responsive Layouts Course

This is the main repository for all of the projects in the course, with different challenges and definitely awesome Responsive Tricks.

• Course Link
• Youtube Channel

Some useful lessons I've learned

1. Most of the elements are responsive by default. ✔️
2. When we don´t assign a width to anything layout is responsive. Try it!.:bulb:
3. If you specify height, the most part you'll cause more issues than solutions.:dart:
4. Em vs Rem?: Rem is more consistent, em is in relation with parents.:heavy_check_mark:
5. Use rem for specify css properties like font-size instead use em for specify css properties like margin or padding.:bulb:
6. Relative units are useful for responsive layouts.:heavy_check_mark:
7. Setting vw in font-size is useful in tittles.:bulb:
8. Flexbox basics: What happens when you make display flex, the columns are going to try and shrink to their minimun possible size:dart:
9. Reduce as much as possible the amount of HTML needed.:heavy_check_mark:
10. Ensure the image is responsive, one trick is to declare image's css property "max-width:100px". 💡
11. An option to gao could be margin-right or margin-left.:dart:
12. By default flex shrink is on.:heavy_check_mark:
13. Centering things the easy way "margin: 0 auto".:bulb:
14. Keep trying and learning:heavy_check_mark:

#	Project	Live Demo
01	Challenge 01	Live Demo
02	Challenge 02	Live Demo
03	Challenge 03	Live Demo
04	Flexbox challenge 01	Live Demo
05	Flexbox challenge 02	Live Demo
06	Navigation challenge 01	Live Demo
07	Flexbox challenge 04	Live Demo
08	Mediaqueries	Live Demo
09	Navigation challenge 02	Live Demo
10	Final challenge	Live Demo