Design comparison
Solution retrospective
Going into this project, I felt more confident as the previous project was similar. This one ran a bit more smoothly, but I had to be super careful about my div styles. The figma file really helped!
What challenges did you encounter, and how did you overcome them?My biggest challenge was the padding, with multiple div's and styles. The way I overcame this challenge was using the inspector tool to see which parts of my CSS are influencing each style inside each div.
What specific areas of your project would you like help with?I'd love to know if there are any areas I could optimize my CSS. I feel some of my styles could be assigned to the body variable. I'd also like to know if there's another more optimized way of coding this card.
Community feedback
- @webdevbynightPosted 7 months ago
Some feedback:
- you should better organise your code by grouping images and stylesheets (and scripts when doing JavaScript) into dedicated subdirectories, just like that:
Your project ├── index.html ├── css/ | └── styles.css ├── images/ | ├── some-image.svg | └── another-image.webp └── js/ └── script.js
;
- when declaring font families, you do not need quotes if the font name does not contain any spaces (for example:
font-family: Figtree;
) and, by the way, since Figtree is not a serif font, the generic font to declare issans-serif
; - you should avoid pixels to declare font sizes and instead use relative units such as rem for accessibility purposes;
- you should try to use relative units for paddings, margins and dimensions for the design to be elastic;
- the
text-align: start
declaration is useless, sincestart
is the initial (or default) value of thetext-align
property, same forflex-direction: row
, sincerow
isflex-direction
initial value: do not hesitate over checking the initial values of each CSS property on MDN; - the
justify-content: start
is not needed here; - when using ampersands (&) within a text, it is better to code it with the appropriate HTML entity (
&
), since & is a special character in HTML (and XML) with which any HTML (and XML) entity starts; - to improve the semantics of your HTML, you should learn about the
article
element and thetime
element.
Marked as helpful1@WuffskyartsPosted 7 months ago@webdevbynight This is insanely helpful! Thank you so much for the feedback :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord