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

clipboard landing page

islam-heddiβ€’ 240

@islam-heddi

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas Exequielβ€’ 200

@arrejoria

Posted

Hi, good job finishing this solution!

Your solution looks very good, however I think I could give you some tips that in my opinion would be useful for you to take into account.

Some recommendations for your next project:

[HTML]: Try to use better names for your selectors and explore more about the semantic structure of HTML to display each section as a box, for example:

|--> container (container has 1 content box)
|-------> content (content has 2 boxes header and body)
|------------> content__header (header has 1 element title)
|-----------------> Title
|------------> content__body (body has 1 element description)
|-----------------> Description

Semantically framing your HTML will help you better understand how to style your code and get better results by adapting it for other devices (plus it's easy to read).

If you are using Visual Studio Code, I also recommend the prettier extension. Link

[CSS]: You're using an opacity to style the background of your buttons on hover, I made that mistake when I started too haha, then I learned the CSS filter property which applies graphical effects like blur or color shift color to an element. Take a look here: filter property

Problems in the responsive part of your site will be enhanced by applying a good HTML structure.

For now you are doing great, keep it up! Doing a landing page is something else and you do it! Great job

Ten un mate πŸ§‰

Lucas,

Marked as helpful

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