My First React Project

Hi everyone Coders, I wanted to submit to you all my first app in React, considering that I have not yet finished the Freecodecamp course and that I wanted to have fun with what little I knew, having said that, do you have any advice to give me to improve myself? (P.s the photo of the header is horrible and I will change it as soon as possible) :sweat_smile:

Vercel App:

https://sushi-restaurant.vercel.app/

GitHub repo:

Thank you all!

2 Likes

Using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. I think you will see several issues right away. You can never assume what text size the user will be viewing your page with and part of responsiveness is to be able to handle changes in text size gracefully.

A hint to help you with this. Use ‘em’ values for your CSS break points, not ‘px’. This will automatically make your page responsive to both changes in view port width and text size. Also, use ‘narrow first’ approach to styling. Narrow your browser as skinny as it will go and style your page for that width. This will be your base CSS. Then after you have the narrow style complete, slowly widen your browser until you feel you have enough horizontal room to start rearranging elements for a wider viewport. Set your first CSS break point there (using min-width and em units) and then add styling for that that break point. Repeat this process as necessary.

1 Like