I think I need more help with grid. Was setting the two center cards half width, but making them span 2 rows the most efficient way of going about it? Also what are the most efficient ways of making paragraphs formatted correct (Having x amount of words each line)? Finally I would like a general rating on my html and css out of ten based on how practical it is.
I want to improve the layout of my html itself. In a former challenge I was told to use the "main" tag to signify the main content of my page. I would like to know if there are any other semantic tags I should be using. Secondly, I feel like am I am arbitrarily adding padding and margins to elements and want to know if there is a more "scientific" method to applying padding and margins. Also I want to know how correct my usage of certain units is such as rems, %, and px.
Is there a way to format paragraphs to have specific amounts of words on each line?
When there is many little sections of text like on this card is it beneficial to put them all in their own divs?
I would like to know a more efficient of aligning elements properly.
I had created a flex container called "qr-code-container" which inside had a div called "qr-code". I set the body height to 'min-height: 100vh' and the height of "qr-code-container" to "height: 100%". However when I tried to center my QR Code with 'align-items: center' nothing happened. If the body height is the height of the viewport and "qr-code-container" is 100% the height of its container i.e. the body, why didn't 'align-items: center' do anything?
I am proud of how smooth the responsiveness is and next time i would look if i could create this layout without media query.
What challenges did you encounter, and how did you overcome them?No hard challenges in this project
What specific areas of your project would you like help with?All feedback is welcome
For the image sizes, I opted for a simple display-and-hide approach, which works for the purpose at hand but is not a good solution in a production environment, as the browser loads both images. If I were to redo it, I would use srcset.
It's important to keep accessibility in mind, and I'm not sure if the button can be improved from this perspective.
It is good practice to use a "main" tag after your "body" tag to show the main content of the page.
It looks like you had trouble recreating the nutrition section. This can be done using a table and giving the <td> elements a border-bottom style. Here is a link showing you how to do this. Just scroll down a little. https://www.w3schools.com/html/html_table_styling.asp
Instead of using a whole bunch of divs with anchor tags inside you should use an unordered list ( ul ) with list items containing the anchor tags. Then you can use css to style it. This is how most navigation is done such as a navigation bar at the top or side of a website. It would look something like this:
<ul> <li><a href="#"> Github </a></li> <li><a href="#"> Frontend Mentor </a></li> <li><a href="#"> Linkedin </a></li> </ul>Looks Good! I would add some padding to the bottom of the paragraph because it looks a little strange touching the picture of Greg Hooper. Besides that you did amazing.
Noticed I forgot how to center a div and had to use margin top and bottom to do so.
What specific areas of your project would you like help with?How to center contents using justify-content and align-items
Try using justify-content and align-items on your "container" div to center the QR Code component in the center of the page.
