Steven Toben

This looks pretty nice, I'm getting black bars on the margins which you mentioned. I would say don't go for pixel perfect. That's not a realistic thing to do, you shouldn't worry too much about sizing and everything. With that said, go ahead and remove the max-width: 1440px property you have set. When you do it looks perfectly fine. There's no need to limit the max width just because the design guide said to. It looks much better imo without the black bars. While on the topic of black, personally I don't like such deep blacks in my design, my text is usually #2f2f4f all the way up to #708090, but that's not really relevant.

The only other thing I'd say is make your animations faster. Feedback animations, such as hovering over a link should be in the ~200-300ms range (just my opinion). You'd be surprised how much of a difference it makes. It makes the webpage feel much cleaner and more responsive.

Buy overall I think this looks great! Good job with the responsiveness, it doesn't seem to have any breaking points so nice work!

This looks nice I'd just address a few things. First thing is I would set font-size in rem units instead of pixels, this helps both accessibility and responsiveness. Second thing is on your paragraph text, instead of using <br> tags for every line-break you could set the max-width of the paragraph to something like 50ch. This is a really common strategy to make paragraphs more readable and easier on the eyes. Another thing is giving paragraphs line-height of around 1.5 (unitless). One more thing I'd do it clear the form when the submit button is pressed. Currently when you press the button the fields don't have their values cleared.

Other than that I'd say it looks good, for places to improve I suggest using rem for font-sizes and other measurements. Another thing is try to size things implicitly by setting a max/min height/width and letting the inner content size the box, instead of explicitly setting widths and heights. Good job overall it looks really nice!

I haven't looked through the React code yet, but just a quick tiny thing I'd do is add padding-bottom: 1rem, padding-left: 1rem to the .control_button-as-heading class. The dropdowns look a bit weird on my browser with the arrow ending up under the text, whenever I added those two lines of CSS (overriding the padding already set) to that class they line up with your textbox and look much better (at least on my screen). Just thought I'd share that in case it's not just my browser that the dropdowns look a bit funny on.

The functionality looks great and works exactly as I'd expect so good job on the main program! I like the loading screen (i assume) Suspense component use. I haven't looked through the source but it functions great and looks nice so good job!

Good job on your first CSS challenge! A couple things I want to point out just in case you didn't realize because they're useful tips: On your 3 divs that are children of the grid container div, you don't have to explicitly set a height. Removing the height will make it take up the size of the row of your grid, which is pretty much the same size as you set. Nice job of using grid-areas and naming them. For your 2nd and 3rd div you actually don't even need to set the grid-area property because with the way grid works, the next child will take up the next grid area available. So if you removed the grid-area: box-2(and 3) it would actually result in the same thing. Just a couple useful grid tips I thought I'd share.

When you do set something's height, try to use max-height or min-height (same goes for width) and try to set it using rem units. Rem units make the application much more responsive and it helps with accessibility. Good job using rem everywhere else tho like on padding and border-radius!

Nicely done, especially for your first CSS challenge! Just thought I'd share some tips about css-grid and rem units!

Fractional rems may seem hacky but it's actually the best way to size things, and the values don't have to be so exact. Just for fun I tried adjusting the styles on a card with clean styles and it looks pretty much the same (at least on my screen). On the div with className "category-card card-1", I applied flex in column direction to that card and the styles became a lot cleaner. I got rid of the width, height, margins, padding values and set padding to 2rem and margin to 1rem. Then on the img inside that card I got rid of the absolute positioning and set order: 1, align-self: end, margin-top: 4rem and that looks essentially the same.

This looks good and is pretty much spot on to the design, and there's tons of ways to go about styling things (and the way I did it may not actually work, I was just trying to show that there's tons of ways to go about styling). Being exact isn't necessary, it's ok to round your rems to the nearest whole number or 0.5. I'd definitely recommend trying to not explicitly set width and height, especially in pixels. If you can, setting a max (or min) height/width in rem is a good way to go.

I think this looks nice, I don't think being so exact is necessary. You could try rounding rems on your next project, if you don't like it then you can use the exact values if you feel more comfortable with that.