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

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!