Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using CSS grid, flex box, element

@CarvalhoVincent

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


As a beginner I don't know if my work is quite good or full of mistakes. I crop the desktop design image and tablet too, cause I didn't find a solution to look like the model correctly. The responsive works but some breakpoints are not "perfect".

All feedback or advice are welcome, it really help me in my progression. Thank you !

Community feedback

@tesla-ambassador

Posted

Hey Carvalhovincent! What a splendid solution! Very precise and neat! Here's a few things you might want to consider:

  • You might want to enclose you <section> tags in a <main> landmark to resolve your accessiblity issue! It enables the browser to properly navigate your site.
  • This one is just a tip, it's not really necessary but I think you could add a simple effect when a user clicks the button to make it look more interactive.Forexample you could use:
button:active {
    transform: scale(0.8);
}

So when a user clicks, it gives the effect of something being pressed... You could use your own effect though, that was just an example😁 Happy coding!

Ps: Your responsiveness is good, don't beat yourself up about it! You'll get better as you practice

Marked as helpful

1

@CarvalhoVincent

Posted

@tesla-ambassador Thank you for your tips ! 😁 It's very motivating. I will continue to work !

1

@tesla-ambassador

Posted

@CarvalhoVincent You're welcome!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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