Yanna• 120
@yannancls
Submitted
P
Marcus
@222sucram
All comments
The layout is responsive and fits well on different screen sizes. However, I think the max size of the card is smaller in terms of both height and width.
The font family hasn't been to the one on the design, you can add this on google fonts and import into your code.
You could also improve SEO and accessibility by using semantic HTML tags, instead of using a div for the container you can use an <article> tag.
Marked as helpful
0- Mickell G• 50
@Mickellg
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of using a mobile first css styling.
What challenges did you encounter, and how did you overcome them?
Styling the image to both be responsive and show the correct parts of the image was challenging.
What specific areas of your project would you like help with?
I wasn't confident on when to use max-width or width and define the width. Using margin sometimes worked, but was tricky styling the image.
The solution follows the design for the most part and is responsive on different screen sizes. However, the card itself isn't centered vertically.
The easiest improvement would be to add semantic HTML, using an <article> tag for your wrapper, and a <figure> tag for the images.
When using max-width, I usually set the max width of parent elements and the content within that element dictates the width up to a certain point.
I found this video to be helpful:
https://www.youtube.com/watch?v=x4u1yp3Msao&t=923s
Marked as helpful
0 - PRicardo Cezar• 90
@ricramcezar
Submitted
The final product follows the design for the most part, but the main component is centered differently on different screen sizes.
Adding responsive design using flexbox or media queries may help solve this issue, but all looks good otherwise.
0
