Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Matthew Matusek
Matthew Matusek
2,261 Points

Help Responsive Web Design

Ive finished the Basics of HTML and CSS I'm working on a practice site to sharpen those skills. Im having trouble with responsive design. I understand why web developers use it, but adding it to my code is where i get lost. Is there a site that anyone can lead me to where I can learn more about it and get a better understanding of it?

2 Answers

Brandon Perkins
Brandon Perkins
205 Points

Here's some links you might find useful:

https://www.w3schools.com/html/html_responsive.asp

https://developers.google.com/web/fundamentals/design-and-ui/responsive/

https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/responsive_design_building_blocks

Also, if you haven't already, check out a neat framework called Bootstrap.

http://getbootstrap.com/

Having a basic understanding of CSS is recommended before using frameworks. Depending on your goals, you may not want to spend too much time learning the nitty-gritty details yet which makes Bootstrap perfect for getting something off the ground, while learning the nuances of web development.

Kurt Enget
PLUS
Kurt Enget
Courses Plus Student 58 Points
Kurt Enget
Kurt Enget
Courses Plus Student 58 Points

Responsive web design can be broken down into 3 components. Individually, these are the skills you should look to sharpen. Search for articles separately when learning.

Media Queries – These are the breakpoints declared in CSS which let you design different layouts for different variables (screen width, device orientation, media type, ect.)

Responsive Layout – Instead of using only pixels (px) as units of measure for webpage elements, fluid units are mostly used instead with a few exceptions (such as declaring height in some instances). These flexible units are:

  1. percentage – Written as %
  2. em - Relative to the font-size of the element
  3. rem - Relative to font-size of the root element

Flexible Images – This practice includes removing fixed widths from HTML, using max-width in CSS, and implementing the <picture> tag & srcset attribute in the <img> tag

As far as trusted sources for responsive design articles, a few of my favorite sources are anything by Brad Frost, Smashing Magazine and A List Apart. Be careful to pay attention to more recent articles because best practices are CONSTANTLY evolving.

Best, Kurt

Starfire Web Design

5552 S Fort Apache Rd #110

Las Vegas NV 89148

(702) 800-4447

Starfire Web Design