css, html, grid

Solution retrospective
Proud to have utilized grid for the first time. I would try to do this challenge quicker and more accurately next time.
What challenges did you encounter, and how did you overcome them?I had challenges implementing grid but utilized online resources to help work through it.
What specific areas of your project would you like help with?anything and everything. i'm new to coding but would love any feedback to improve, especially to reduce the amount of code.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@mpujazon
Hello @pdoubleu30!
I think your solution is very accurate, even without seeing the design file, you have a great eye!
Good use of semantic HTML tags, and it seems to be nicely responsive.
I would also recommend paying a bit more attention to code indentation, as it really improves readability.
Regarding the CSS, I suggest using variables to store your colors. This helps reduce repetition and makes the code easier to maintain. You can declare them in the
:root
selector like this::root{ /* Color Variables */ --grey-500: #4D4F62; --grey-400: #6A7178; --white: #FAFAFA; --red: #EA5454; --cyan: #44D3D2; --blue: #549EF2; --orange: #FCAE4A; }
You can then use it like this:
body{ color: var(--grey-500); background-color: var(--white); }
I also recommend using
grid-template-areas
to position your cards in the grid, I think it's easier to work with.Congratulations on your code — keep coding!
Marked as helpful - P@CristianAlexa
Hi,
Looks really good. Nice touch using semantic html tags
Join 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