Learn to Code Series: Responsive Web Design Resources and Activities
Now that we’ve covered responsive design and media queries, you can start building layouts that work across all different device types! The following resources will provide additional information on the concepts we covered in the Facebook Live session. Use these resources to bolster your knowledge and complete the next part of the coding activity!
This post will provide a guide to resources and activities you can use to continue learning about responsive web design as well as an activity to reinforce what you learned in our Facebook Live session!
Learn to Code Activity
Use this Dreamweaver activity to continue working on the project you started in the first Facebook Live session!
Responsive Web Design and Media Queries
These resources give more in-depth information about CSS and will help reinforce concepts and terminology you learned in our first Facebook Live session.
- Using Media Queries: This MDN guide gives you a great overview on what media queries are and how to use them to create responsive websites.
- Media Queries for Standard Devices: A list of standard sizes for different device types so you can choose your breakpoints wisely.
- Responsive Meta Tag: What is a responsive meta tag, and why do you need one to make your media queries work on all devices?
- A Comprehensive Introduction to Grids in Web Design: Use this tutorial to better understand how to set a grid up for your website. It will help enhance your design and keep your information organized.
These resources from Adobe focus on helping you learn how to code in HTML and CSS with the help of Dreamweaver.
Taking the Next Step
These resources will help you take your CSS3 and CSS animations to the next level.
- :before and :after Pseudo Elements: Use this almanac to help you understand and use CSS pseudo elements effectively in your code.
- Rem vs Em vs Px: Learn more about the different measurement options in CSS so you can use the correct one for each element type.
- Bootstrap: Bootstrap will help you get started with CSS frameworks and make responsive design even easier!
Resources for New Coders
These resources are a few of the most popular for beginner and advanced coders alike.
- fontawesome.io: Add glyphicons to your website so you don’t have to include different images for each icon you use. Fontawesome is free and open source.
- Adobe Typekit: Use Adobe Typekit to add unique typography to your website and enhance your overall design.
- Google Fonts: Another source for adding typography to your website. Google Fonts is free and open source.