Huddle Landing Page using Flexbox

Community feedback

• 

  Jason Heys•175

  @heyitsganyPosted over 2 years ago

  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

  ---

  

  Travis Price•50

  @BillyJoeDevPosted over 2 years ago

  @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