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 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

#accessibility#bem#lighthouse
Abdul Khalid πŸš€β€’ 72,100

@0xabdulkhalid

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


πŸ‘Ύ Hello, Frontend Mentor Community,

This is my solution for the Clipboard Landing Page.

  • Scored 98% on Google Pagespeed Insights! 🀩
  • Minified the css files to improve site performance πŸš€
  • Used Prettier code formatter to ensure unified code format βš™οΈ
  • Layout was built responsive via mobile first workflow approach πŸ“²
  • Had a lots of fun while building this challenge ! 🀠
  • Feel free to leave any feedback and help me to improve my solution πŸ’‘

.

πŸ‘¨β€πŸ”¬ Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • All the links inside the footer__links class should be contained within an unordered list <ul> element, placed within a <nav>, wrapping the entire list of links within a <nav> element would convey the purpose of the links as a navigation menu, enhancing the semantic meaning of the code.
  • The alt attribute of the logo should not be left empty. The logo plays a significant role in the overall visual identity of the website. Consider using "Clipboard" as the alternative text.
  • As a personal suggestion, you could consider using an unordered list <ul> for the brand images, as well as for the three social media links inside the footer__socials class.
  • Using a minified CSS file is a great approach for optimizing websites. However, it's also important to consider providing access to the original source code for others who may want to review or modify it in a simple and quick way, without the need to use the inspector or any other tool. You can upload it as an additional file in the repository without the need to link it to the HTML.
  • The link in the footer with the text "Frontend Mentor" is missing the rel="noopener noreferrer" attribute. Adding this attribute is important for security reasons when using the target="_blank" attribute.
  • It seems that there is some direct text content within the <div> element with class attribution:
‏‏<div class="attribution">
β€β€β€Ž β€Žβ€β€β€Ž β€ŽChallenge by ...
‏‏</div>

β€β€β€Ž β€Žβ€β€β€Ž β€β€β€Ž β€Žβ€β€β€Ž β€Žβ€Žβ€β€β€Ž β€Žβ€β€β€Ž β€ŽWrap the text in a paragraph.

I hope you find it useful! πŸ˜„

Happy coding!

4

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