Step 3: Bring some responsive behavior to the website project
From W3Schools
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
Desktop
Tablet
Phone
You will work on your website to make it responsive using your browser DevTools, and make some commit to your GitHub repository for it
To make a website responsive, you will need some CSS properties
I didn’t find a good tutorial like in OpenClassroom but here are a few guides / articles I could find:
The Beginner's Guide to Responsive Web Design (Code Samples & Layout Examples)
Responsive Design | HTML & CSS Is Hard
However if you prefer to watch some videos you can also if it’s better for you!
Goals
I want you to:
- Use Git to push some commit to your GitHub repository to add some responsive to your website
- Give me a presentation / explanation of the following notions:
- Media Queries → a good guide is https://css-tricks.com/a-complete-guide-to-css-media-queries/
- Mobile-first and Desktop-approach
- Responsive Breakpoints
- Some layouts methods in CSS
- Float Layout → https://www.w3schools.com/css/css_float.asp
- Flexbox Layout → you can use this as a helper https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (warning it can be a bit complex but it’s the best I use it all the time to remind me some properties)
- Grid Layout → you can use this as a helper https://css-tricks.com/snippets/css/complete-guide-grid/ (same here as above
- CSS units → https://www.w3schools.com/cssref/css_units.php or https://dev.to/cheralathann/css-units-explained-3178 as an introduction