Design comparison
Solution retrospective
I tried a solution with display: GRID, I would like to have your opinion if GRID was for you the best option or another solution would have simplified things and is my GRID semantically is good? Last question, on my sections is it better to put an ID or a class? Thank you, Have a good day !
Community feedback
- @bagas-defandiPosted over 2 years ago
Hi Fidget!
congrats on completing this challenge!
to fix the Accessibility issues you can wrap
<section id="secondeSection">
with<main>
tag, and I think<section id="firstSection">
should be<header>
tag.for styling things don't use ID because ID have a high specificity, I always use class or element it self to styling html.
I also did this challenge with Grid I use
grid-template-areas
to make it responsive, you can see my solution hereI hope it helps you :)
Marked as helpful0 - @correlucasPosted over 2 years ago
Hello Fidget, congratulations for your solution!
I did this same challenge and I've used Grid because I consider that was better to manage the columns, but I saw some person that finish this challenge using Flexbox, I think if you manage this challenge using flexbox you'll need to have much more div to hold the container.
About your question about id and classes, I think id is stronger that classes when selecting properties/elements, but you can do everything with only classes in a simple page like this challenge, is better you use id for challenges where you'll use forms and Javascript.
If you want to see how I built the same challenge heres my solution: https://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt`
I hope it helps you, congrats for the challenge!
Marked as helpful0 - @Fidget836Posted over 2 years ago
https://fidget836.github.io/ for see the good version. It shows here a responsive version so the result is not the same.
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