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

Skilled-e-learning-landing-page

P
Tuminha 60

@Tuminha

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


Landing page exercise using HTML and CSS.

Community feedback

Douo 940

@Douoo

Posted

Hi Tuminha, congratulations on finishing the challenge. You have done a decent job on making the landing page look as the design but I see a small technical mistake (in terms of semantics) and room for improvement in your code. For example, you used a <p> tag for a button in the hero section which is not semantically correct. Plus, the hover state of each button is not working. Additional to this, the column for the card list is 2 while on the design is 3 (for the larger screen) and there is a bit of margin to the body. Not sure what is causing this but its recommended that you use a reset css before you start styling. Here is a reset link in case you are interested in learning more about it - https://piccalil.li/blog/a-modern-css-reset/ - what it does is it basically reset the default browser style so that you build every style per your wish (I find this to be very helpful). Although, I'm giving you suggestions on improvement I still think you have done a pretty solid job finishing this challenge and I think you are just starting out. I wish you a good journey of building up yourself 💪🏽

Marked as helpful

0

P
Tuminha 60

@Tuminha

Posted

Wow, @Douoo, this is amazing feedback, and I've learned more with your feedback than with some one hour YouTube videos on the topic!

Regarding the <p>, you are absolutely right. I'll change it ASAP.

True! The hover is not working. I only worked on the activation. I'll fix it, too.

First time I've heard of reset CSS, and I'm jaw-dropping. This is an amazing tip!

Once again, I don't know how to give you a big THANK YOU!

Hugs from Switzerland.

0
P
Tuminha 60

@Tuminha

Posted

@Douoo I did the changes and I used the CSS Reset (what an amazing tip).

Changed flex-start to center, and in my browser and in the GitHub page link, it has the 3 features per row, but somehow the screenshot returns 2 boxes per row.

Ill check what else I can do!

Once again thank you for the feedback and support.

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