- Describe responsive design
- Determine whether responsive design is good or bad practice
We think of the web and websites as mostly static. They look the way they look. But it's really more complicated than that. Browsers and operating systems make things look different. Then, smart phones arrived and made everything crazy. Web designers and developers spend a lot of time thinking about how to make web pages usable in all the possible formats (phones, tablets, web) while keeping them maintainable (i.e. not taking a billion years to make small changes). Responsive design is one of the ways developers have created to make sites usable, maintable, and adaptable to new devices and browsers.
Rename your unit1_week1 folder to unit1_projects. Make sure to change it everywhere it's referenced! (In links, for example).
Everything in this challenge is within the context of the unit1_projects folder in your website repository.
Look into responsive web design. What is it? Why is it used? You do not need to go through all these resources. We'd recommend either going through the first two (slide intro, read beginners) OR the Treehouse tutorial.
- Slides: Introduction to Responsive Web Design and Compatability
- Read: Beginners guide to responsive web design OR
- Make: Treehouse: Build a Responsive Website
Additional required resources:
- Slides: Web Accessibility
- Read: Change your browsers user agent
Using either a new html page in the unit1_week1 folder or practice files unzipped into the unit1_week1 folder, try to make your page more responsive.
How does it look when
- on your phone
- on a tablet
- on really wide screen
- resized really small
- the user agent is changed in your browser
You can try using QuirkTools to see a site in multiple browsers.
Reflect on your learning by answering the questions in the reflection file.
- :before and :after psuedo elements
- Amazing things psuedo elements can do
- Icon Fonts are Awesome
- Why and How to use Icon Fonts
Head to FontAwesome and look around the
documentation. Then add the font awesome css to your dbc2.html file
and play with using the icons!