Skip to content
Submitted 6 months ago

Huddle Web Page - Using Semantic HTML & Flexboxes

Saifullah Shaukat•40
@saifullahshaukat
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of successfully tackling the challenge of designing and coding a responsive landing page for Huddle. It was fulfilling to see the project come together, from conceptualization to implementation. However, looking back, I realize the importance of better organizing my CSS to improve maintainability and scalability. Next time, I would adopt a more structured approach to CSS, perhaps using methodologies like BEM or CSS-in-JS, to streamline development and make future updates easier.

What challenges did you encounter, and how did you overcome them?

Throughout the project, I encountered several challenges, including:

  1. Responsive Design Complexity: Ensuring the website looked great on all devices was challenging. I tackled this by using media queries and flexible layouts to adapt to different screen sizes.

  2. CSS Organization: With a growing CSS file, maintaining organization became difficult. To overcome this, I modularized styles into separate files and used naming conventions for clarity.

  3. Image Optimization: Large image files slowed down page loading times. I optimized images using compression techniques and implemented lazy loading to improve performance.

  4. Browser Compatibility: Ensuring consistency across different browsers posed a challenge. I used browser developer tools for testing and applied vendor prefixes for CSS properties to ensure compatibility.

  5. Code Refactoring: As the project evolved, some code became redundant or inefficient. I regularly reviewed and refactored code to improve readability and performance.

By staying proactive, seeking guidance from online resources, and persistently troubleshooting issues, I successfully overcame these challenges and delivered a high-quality website.

What specific areas of your project would you like help with?

I would appreciate assistance in the following areas of my project:

  1. Accessibility: Ensuring the website is accessible to users with disabilities by implementing proper ARIA attributes and keyboard navigation.

  2. Optimization: Further optimizing the website for performance by identifying and resolving any bottlenecks in loading times or rendering.

  3. Cross-Browser Testing: Conducting thorough testing across various browsers and devices to ensure consistent functionality and appearance.

  4. Code Review: Receiving constructive feedback on my codebase to improve its structure, readability, and adherence to best practices.

  5. UI/UX Design: Enhancing the user experience and interface design to make the website more intuitive and visually appealing.

Any insights, suggestions, or contributions in these areas would be greatly valued to elevate the quality of the project.

Community feedback

  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted 6 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    ANCHOR ELEMENT 🔴:

    • The social images are need to actual links instead of plain image,
    <div class="soc">
   <img class="social" src="social.png" alt="">
 </div>
    • So you want to add individual social images like Facebook, Twitter and then need to wrap the img elements using <a> elements along with adding proper aria-label attribute which is way more important for social links in an <a> tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.
    • When a screen reader encounters an anchor tag with a social link, it may announce the link's text content, such as "Facebook" or "Twitter," by including an aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.
    • By providing this additional information, you can help users with visual impairments to better understand the purpose and value of social links, and encourage them to engage with your content. This can ultimately improve the user experience on your website, and make it more accessible and inclusive for all users.
    • Example:
    <a href="#" aria-label="Facebook profile of Huddle">
    // Facebook logo
</a>
    • If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this methodology and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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