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

#accessibility#react#react-native#react-query#jquery

@BillyJoeDev


Design comparison


SolutionDesign

Solution retrospective


Would love to get feedback on how I can improve on my CSS and HTML layouts.

Community feedback

Jason Heys 175

@heyitsgany

Posted

You've managed to recreate the design pretty faithfully, and your responsiveness works. Nice job!

However, there are a few things you need to look at:

  • Your media queries keep the mobile design until the screen is at 1800px wide. This is contrary to the design file, which I'm sure gives a width of 1440px for desktop. (This is why your design comparison screenshot looks wrong above).
  • Your class names could use some work. While there is no rule against using camelCase when writing class names, there is a convention of using lower case seperated by hypens. Although I would recommend reading up on BEM naming for class names.
  • You want to make sure you're using semantic HTML elements when possible, instead of just using <div>. This goes a long way in improving site accessibility for things such as screen readers. (You want to at least throw your mainContainer class into a <main> element instead of the <div>).
  • There are a couple of things in your CSS that could be changed:
    • To make sure you're keeping your code DRY, I'd suggest setting the font-family on the body instead of setting it in two different classes. This makes it easier for the font for the page to be changed (changing one line of code instead of multiple).
    • Your flexBoxContainer class has a set of CSS properties that don't do anything to the style until you add a display:flex to the class in a media query. I'd suggest grouping this all together in the media query.
    • You set a background on the HTML. While this technically works, you should really apply this styling to the body and not html.
  • You're using React for a single page site with no (or very minimal) interactivity. This site would be a better use case for using just HTML and CSS. The design as it stands doesn't indicate the need for any JavaScript and I feel like React maybe overcomplicates the process here.

That's just a few of the things I could see while looking. Hopefully these give you some things to work on and help you learn in the process. You've done a great job, and you should be pleased with what you produced! Keep it up!

Marked as helpful

0

@BillyJoeDev

Posted

@heyitsgany Thanks so much for the feedback, you don't understand how helpful this is! This is exactly the feedback I needed, going to update the project now and try to fix everything listed. Then onto the next project!

0

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