How do you determine the pixel size for a screen. I have no idea how to find out this information.

I had the same question as well. Even as a beginner, I decided I'd like to compare the lessons & exercise approaches to the current web standards, so that's its easier to contextualize and adapt to more complicated code down the line.

This is a helpful resource: CSS TRICKS: Media Queries for Standard Devices

Please note though, that the media queries presented there include a device detection, ie., min-device-width as opposed to min-width. I just removed the "device" part of the properties & webkit part since "Introducing the Project" is quite simplified. I also removed the max-width so the viewport changes automatically.

/* ----------- Mobile Phone ----------- */
@media only screen and (min-width: 300px) {}


/* ----------- Tablet ----------- */
@media only screen and (min-width: 768px) {}


/* ----------- Retina Screens ----------- */
@media screen  and (min-width: 1200px) {}

For the window resizer, this one I got from one of Treehouse's weekly podcast with Nick Pettit. It's on beta so sometimes it crashes if the browser doesn't accommodate the dimensions: Chrome Extension: Window Resizer

If you want the dimensions of common mobile devices, try Viewport Sizes. If you want to measure your own screen, there's probably an easy way in Firefox, but I use Chrome, and if you have that you can click the 3-vertical-dots icon, go to More Tools, then Developer Tools. This will open a new window, which you can ignore, but leave it open. Now, when you drag your main Chrome window to different sizes, you'll see the window's dimensions printed in the top-right corner of the window. Hope that helps!

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en