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 📱.

My mobile-friendly portfolio ;)

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.

Media query mixins.

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 ✌️.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brent Carey

Brent Carey

Web Developer Studying at BrainStation 🧑🏽‍💻, documenting all the cool things I learn 📚, anime inspiration too 🦸🏽‍♂️🦹🏽‍♂️.