CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Lisa Walters
seal-mask
.a{fill-rule:evenodd;}techdegree
Lisa Walters
Front End Web Development Techdegree Student 10,066 Points

Are 769 and 1025 pixels standard for @media? Also, do people ever create the containers and their sizes first?

Hello! Noobie here. I have learned SO MUCH from struggling with this...but I still feel like lots of the terms ("REM!" )are like magical "Harry Potter"-like spells to me. However, I do have 2 questions. 1. Are 769px and 1025 typical parameters for media queries? Also, It seems like the HTML and CSS are written, and THEN we add the containers (<div class="name-of-container">). Do people ever first plan out all the containers with their heights and widths, and THEN fit the HTML inside, and then later polish the format with CSS? Just curious. Thanks so much!

2 Answers

Clinton Hays
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,013 Points

Hey Lisa Walters!

Welcome to the wonderful world of web development. It can seem pretty magically and quite confounding at first, but eventually it all starts to make sense.

As for you media query questions it depends on what you're trying to accomplish. It's more typical to see a media query written as:

@media (min-width: 768px){
 /* styling goes here */
}

This will target media that has a min width of 768px and apply the styling to that size and larger. This makes it possible to style for mobile-first. Which you may or may not have learned about already, but it's basically the principle that we should write our code with smaller devices in mind first and scale up accordingly instead of the other way around.

To your second question, typically what will happen is you will be presented with a mock-up and you must build your HTML and CSS around that. Having the design, mock-up, or wireframe in front of you should help guide your process. Practically, at least for me, it seems writing a good semantic HTML foundation first is key. While writing your HTML, you can give your elements the classes and ids necessary for styling, then move on to writing your CSS based on the classes and ids in your HTML. Think about trying to paint a house before the walls are up...it's difficult, almost to the point of impossible. It's the same way with web development. However, as you'll see there are always multiple ways to solve every problem, so it may be beneficial at times to layout your CSS first.

In summary, 1) Design > HTML > CSS is a typical flow, but has exceptions, 2) media queries are generally written as min-width to promote a mobile-first approach, 3) sorry for the verbose response.

Enjoy your journey and happy coding!

Lisa Walters
seal-mask
.a{fill-rule:evenodd;}techdegree
Lisa Walters
Front End Web Development Techdegree Student 10,066 Points

HI Clinton Hays,

Thanks so much for your clear answers! The painting of the house image does help me visualize the overall process. Thanks again!