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

Solution Clipboard landing page

Steph 500

@xStephx

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

@petritnuredini

Posted

Congratulations on completing your Clipboard landing page project! 🎉 Your commitment to learning and improving your skills in front-end development is truly commendable. Here are some best practices and suggestions to take your project to the next level:

HTML Best Practices:

  • Semantic HTML: Great job on using semantic elements. Continuing to use elements like <section>, <header>, and <footer> adds meaning to your web content and helps with SEO and accessibility.
  • Alt Attributes for Images: Always ensure that your <img> tags have descriptive alt attributes. This is crucial for accessibility, allowing screen readers to describe images to visually impaired users.
  • External Resource Loading: It's good to see external resources like Bootstrap and Font Awesome being utilized. Ensure they are loaded efficiently to optimize page load times.

CSS Best Practices:

  • Responsive Design: Your use of media queries for responsiveness is commendable. Keep refining your designs to ensure they look great on all screen sizes.
  • CSS Variables: Great use of CSS root variables. They make maintaining and updating styles much easier.
  • Avoid Over-Qualifying Selectors: Aim to keep your CSS selectors simple and efficient. Over-qualified selectors, like button.btn-custom-green, can be simplified to .btn-custom-green.

General Recommendations:

  • Performance Optimization: Compress images and minify CSS and JS files to enhance page load speed.
  • Cross-Browser Testing: Ensure that your page renders well across different browsers for a consistent user experience.
  • Code Comments: Regularly comment on your code to describe sections and functionalities. This makes your codebase more maintainable and understandable to others (or to you when you revisit the project later).

Continued Learning and Motivation:

  • Keep exploring and learning new aspects of HTML, CSS, and JavaScript. The web development landscape is always evolving, and staying updated with the latest trends and best practices is key.
  • Engage with the development community through forums, social media, or local meetups. Sharing knowledge and experiences can be incredibly beneficial.
  • Remember that every project is a step forward in your development journey. Keep building, keep experimenting, and most importantly, enjoy the process!

Your dedication shines through in your work, and I'm excited to see where your skills take you next in the world of web development! Keep up the fantastic work! 💻🚀

Marked as helpful

4

Steph 500

@xStephx

Posted

@petritnuredini thanks for the feedback! I read some really useful information in your feedback, and in future projects I will practice the advices you gave me. If you have any other suggestions or recommendations, feel free to write to me, I'm glad you took the time for feedback!

3

@bandadthunderlight

Posted

perfect and so beautifull

1

Steph 500

@xStephx

Posted

@bandadthunderlight thank you!

1

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