Start by styling your mobile view first.
Your “default” CSS should be the same as your mobile CSS, so your mobile styling does not need a media query.
Because your mobile view is likely built with boxes on top of other boxes, you probably don't need to use any flex styling in your base/mobile view.
You can leave your div, article, section, etc. elements in their default display: block state for your mobile view, and then add in display: flex styling as you move up to tablet and desktop views.
For mobile-first designs, you should be using min-width media queries to add styling as you increase the screen size.
For example:@media (min-width: 768px) { … } for tablet@media (min-width: 1024px) { … } for desktop
Treehouse has you using a 320px width for your mobile view size. In the real world, this is outdated, and the smallest size you'll likely be using is double that, 640px.
Follow Treehouse's direction for their projects, but keep this in mind for your future work.
The reality is that tablet views are often neglected. You may be given a design to implement that doesn't even include a tablet view mockup. And even with a tablet view mockup, you may need to make changes once you begin to actually code the design and see how it functions.
Tablet views often end up with a mix of mobile and desktop styling. For example, it may make sense for your tablet view to use the multiple column layout of your desktop view, while maintaining the compact menu of your mobile view.
Another problem with tablet views is that there is a huge variety in tablet screen sizes and resolutions. This problem exists for desktop views as well, but is easily dealt with by using max-width values that are not always an option for the “in between” tablet views.
For tablet views especially, but also for all views, we should stop thinking in terms of device widths and in terms of breakpoints.
Breakpoints are the points where your styling changes, so every media query is a breakpoint. We use common screen sizes/resolutions to define some default breakpoints, which is how we come up with our mobile, tablet, and desktop media query width values. But your design might also need other breakpoints, or different values for these breakpoints.
You can test this by using the dev tools responsive mode and adjusting the width up and down. Every time the design seems unaligned, or something looks wrong, or the layout “breaks,” it's time to create a new media query using the width value that you're looking at.
For example, this page uses a media query set to min-width: 1250px, rather than the typical 1024px, because that's the point where the design broke.
You'll often see some alignment problems or other issues between mobile and tablet views. You may find that you need an extra media query between your mobile and tablet media queries to handle smaller widths that don't fit into your mobile media query but also don't look right with your tablet media query.
You also might find that, as you expand the width during testing, you need more constraints on your desktop media query, or even a new media query for extra large screens. If your design is set at 100% width for the desktop view, how will this look to someone with an ultra-wide monitor?
You can often resolve this issue by setting a max-width on your container elements in your desktop view, but you also might want to take advantage of the extra screen space by creating an extra-large media query to, for example, allow more columns per row.
You can test this page in dev tools to see how it changes based on different screen sizes.
If you look at the CSS, you'll see the mobile view makes up the base styles, and further styling is added for each breakpoint using media queries.
You can look at this page's code here on GitHub.
The .wrapper and .card sections have a few hints for how you might want to structure and style your code in Project 2. It also serves as an example of the proper file and folder structure that your projects should be using.
Defining Breakpoints in Responsive Web Design