Responsive page with flexbox, nested selectors and data attributes
Design comparison
Solution retrospective
This is the first challenge that I am actually proud of since the beginning of my journey in December. For the first time, I feel like I have what it takes to be good at frontend development. I'm not yet there but I'm now hopeful.
The main catalysts of this confidence were the YouTube channels Hyperplexed (https://www.youtube.com/watch?v=6TYkDy54q4E) and JavaScript Mastery (https://www.youtube.com/watch?v=tS7upsfuxmo&pp=ygUZbmlrZSB3ZWJzaXRlIHRhaWx3aW5kIGNzcw%3D%3D). N.B I'm not being to reference these.
However, I have some questions. In index.js, it seems I'm repeating myself. The event listeners for the left and right buttons are essentially doing the same thing. One is looping downwards, and the other is looping upwards. The other logic remains the same. How can I combine fix this repetition?
If there are any other improvements that can be made to my solution, please feel free to point them out.
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing the Frontend Mentor challenge for the Room homepage! Your project is a great step forward in your web development journey. Here are a few suggestions to enhance your code:
-
Consistency in Naming Conventions:
- Maintain consistency in your class naming. You have classes like
harmburger-btn
, which seems to be a typo for 'hamburger'. Consistency helps in readability and maintenance. - Example:
<button class="hamburger-btn"> <!-- SVG code --> </button>
- Maintain consistency in your class naming. You have classes like
-
Use Semantic HTML:
- Use more semantic elements in your HTML for better accessibility and SEO. For example, use
<header>
for your navigation bar and<section>
tags for major sections. - Example:
<header class="nav-bar"> <!-- Nav content --> </header> <section class="hero"> <!-- Hero content --> </section>
- Use more semantic elements in your HTML for better accessibility and SEO. For example, use
-
Optimize JavaScript for Performance and Readability:
- In your JavaScript, consider combining event listeners where possible to reduce redundancy and improve performance.
- Example:
rightBtns.forEach((btn) => { btn.addEventListener('click', handleRightButtonClick); }); function handleRightButtonClick() { // Handle the click event }
Additional Resources:
- For HTML semantics, check out MDN Web Docs - HTML elements reference.
- On JavaScript performance, Google Developers - Optimizing JavaScript is a great resource.
Keep up the fantastic work and continue to challenge yourself with new projects. Remember, every line of code you write is adding to your experience and expertise in the field of web development! 💻🌟
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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