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 using Flexbox

Nathasha 150

@NathashaR1997

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey Everyone, I have completed the challenge using flexbox.

Check out my following article, where I have briefly explained the steps I have followed to complete this challenge.

https://uxplanet.org/challenge-004-clipboard-landing-page-7d7e088c5b33

Thank you for checking this out, and feel free to leave your feedback and thoughts!! Any feedback and tips are welcome.

Many Thanks! Nathasha 😊

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello, Nathasha! 👋

Congratulations on finishing this challenge! 🎉 Also, you have written a nice blog post on how you finished the challenge. Great job! 👍

Some suggestions from me.

  • I would recommend using the img element for the logo SVG. It will clean up the HTML a lot and then the logo image is not going to have :hover effect (it is much easier to use inline SVG when the color of the image needs to be changed).
  • Also, the logo is an important image. It needs to be accessible by the screenreader users as well. So, I would recommend having an alternative text. Just tell the company name, alt="Clipboard". This way, the screenreader users and potentially the search engine bots will know that it is the site of the Clipboard company.
  • Not all images need an alternative text. So, I recommend leaving the alt="" empty for all the images that don't add meaningful information or just for decorations. For example, if the image-computer.png doesn't exist on the site then there would be no missing information. But, the images inside the advertising section are meaningful images. If those images don't exist on the site then there are some missing information.
  • I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

I hope this helps! Keep up the good work! 👍

0

Vanza Setia 27,795

@vanzasetia

Posted

@NathashaR1997 One thing that I almost forget to mention is to fix all the issues that have been reported. If you don't know about the issue then you can click the "Learn More" link.

Let me know if you have any questions. I would be happy to help you. 😉

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