The images as explained above. Any tips or examples are greatly appreciated! As well as figuring out sizing for certain images.
If possible, I would like assistance on whether or not the CSS code here is acceptable. And any tips would be much appreciated.
If there's a better way of writing the HTML or if this is fine.
Any tips would be welcomed, but if I had to choose probably the height: in the @media section and wondering if that's needed?
I would like to ask for help on the @media area of my CSS and if anyone could explain how to better utilize it and if rewriting the code is good practice or better to exclude already written code.
I would like help with figuring out whether or not my HTML is good or if there is area for improvement.
The most challenging aspect for me was the footer layout. I'm not familiar with fixed, absolute, and relative positioning and it took a lot of trial and error.
Great work! It closely resembles the given design.
What I would've done for the footer, would have been to add a height: 100% to have the rest of the image reach the bottom of the page.
Also, you don't need to include position: relative for your primary-footer class.
Outside of this, great work!
Great job on this challenge.
A tip I could offer, is to try and write classes for multiple HTML elements so you won't have to rewrite code over and over again, instead you can detail a card for all 5 of the objects. Then 1 by 1 change any elements that need changing, instead of rewriting multiple CSS codes over and over again.
For example, you have the card class, so instead of rewriting the box-shadow, border-radius, padding, etc. you can just write all of that into the .card class in CSS.
Using CSS grid
Great job, the designs are near identical.
The only thing I would personally change would be the font-size around the paragraph in the header. It's a really easy change though so no stress there.
Amazing work!
learn more about responsive and improve my knowledge in the frontend field
What challenges did you encounter, and how did you overcome them?the challenges I face are a little more difficult on the layout of text images and responsiveness
What specific areas of your project would you like help with?in terms of distance and layout because I didn't get the figma design
Great work! For your @media section of the CSS, you don't need to change the font-size around because per the figma documents, they are all the same font-size, from mobile-version to desktop. Also the h1 and the first span should be in a different font. But that was given in the style-guide. The line-height in the h1 could also be change to 0.
You could have added the span html element to the instructions list to create that bold lettering on the first few words. For example: <span>Beat the eggs</span> to create Beat the eggs.
Besides that, the rest looks good. Maybe just increase the size to better match the design.
Adding hover and active state animations to the buttons.
Great job with your work! Instead of using a grid to display the items, I would personally use a flexbox. The reason being that grids are mainly used to display data. But besides that everything here looks great!
