Day 10: Responsive Design
Too Many Screen Sizes
As technology use continues to grow companies continue to create more and more screens to meet user demands. This has led to a huge variety in screen sizes that people will be viewing the web on, we want our websites to look good on all screen sizes. Instead of making a different website for each screen size, we can make our pages respond to changes in the browser window size. It is a good practice to have a mobile-first design philosophy, meaning that we should design the website for mobile-sized screens first, then scale them to bigger sizes 📱.
Media Queries
Media queries wrap CSS rules and the rules are only applied when certain conditions are met. This means that specific styles can be applied based on the screen width, so we can have our pages respond to changes in screen size. Some common breakpoints we use as the screen size conditions are phone, tablet, desktop, and big desktop: each has its own screen size range.
Closing
This wraps up the topic of HTML & CSS from the boot camp. We will be moving on to Javascript next week! Javascript works with HTML & CSS so I haven’t seen the last of it, and I will continue to improve my skills ✌️.
