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

Huddle-Landing-Page using flexbox

Vinayak 300

@V102002

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I was proud that I got this done. I am saying this, because this challenge was more time taking than any of the challenges. I didn't organize the divs properly before hand, I just dived straight in to code.

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

I zoned out while coding this, so I have no idea, what I did when I revisited what I wrote. I had no idea what I wrote but it was a mess

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

If anyone who would be taking their time to read through css code, there are a lot of mistakes on it, so if there is any suggestion which reduce the number of lines in it, really appreciate the feedback.

Community feedback

Mahmood 1,070

@MahmoodHashem

Posted

Great work on the website design! The overall look and feel is really impressive. However, there are some issues with the challenge:

  1. I noticed that the website has a horizontal scrollbar, which can negatively impact the user experience. To improve this, adjust the size of subscribe section in the footer
  2. There are lots of useless css implementation that you should eliminate, I think you need to practice More Css flexbox which I really recommend This guide to Learn and these Games Froggy and Zombies to practice.
  3. The curve section is very simple, just put every section in the section tag and set the background color of that section to the curved image's color and then put top curved to the top of the section and bottom curved to the bottom of the section
    • Example
<section class="user-wrapper">
 <div class="top-curved-bg">
    <!-- your top curve -->
   <img src="./top-curved-bg-address" alt="top" class="top">
 </div>
 <div class="content-section">
   Your contents
 </div>
 <div class="bottom-curved-bg">
 <!-- your bottom curve -->
   <img src="./images/bg-section-bottom-desktop-2.svg" alt="bottom" class="bottom">
 </div>
</section>

Additionally, it would be beneficial to organize your project files in a more structured manner. I recommend separating the assets (such as images, icons, and fonts) into a dedicated "assets" directory(for this challenge just create an image folder and put all the images into it), while keeping the main files (Readme, index, style, and script) in the root folder. This will help keep your codebase more organized and easier to navigate.

Overall, Your dedication is commendable, and making these small adjustments can further improve the user experience. Keep up the excellent work!

Marked as helpful

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