Adobe Creative Cloud

November 29, 2016 /

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.

Learning Dreamweaver

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.

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

Complete Learn to Code Series:

Try Dreamweaver CC!

A modern web design and development tool that has been re-imagined for designers who code.