Responsive solution using HTML, SASS, BEM and CSS transitions.

Solution retrospective
I had so much fun doing this challenge! I recommend you to do it too! For people not feeling solid in CSS Grid I recommend checking out Grid Garden and than this challenge to get some practice in building grid layouts.
In the solution I used md-
prefixes to make my layout suitable for medium sized screens. What do you guys think about this idea? I think it makes things more clearer in the markup and code is easier to understand and maintain. Also, I added some animations when the page loads and when the cursor hovers over sections to make this solution more fancy. I made page responsive even for larger sizes with a new clamp() function in CSS3.
I appreciate any feedback!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Aadv1k
Feels like there are soo many ways to approach this problem, from nightmarish "position absolute" to using grid. I Did this challenge using
grid-template-areas
really enjoyed the simple and intuitive approach to layouts. if you are interested in the code check it out hereMarked as helpful - @shashreesamuel
Hey GrzywN good job completing this challenge. Keep up the good work
Your solution looks good however I think that your cards look a little bigger than the actual design. You might want to make them just a little bit smaller if you like
In terms of accessibility your headings can only go up one level which means that if you have an
<h1>
tag then the next heading tag should be an<h2>
.I hope this helps
Cheers Happy coding 👍
- @NaveenGumaste
Hello Karol Binkowski ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
- your code is missing "level-one heading" that means ' use
h1
first and thenh2
,h3
and so on '
happy Coding😀
- your code is missing "level-one heading" that means ' use
- @GrzywN
When I did this project, I wanted to make it as easy as possible to implement on the website. I made the
<h1>
tag with thesr-only
class to be for screen readers only. Now it's fixed and validator doesn't detect issues anymore.
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