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 with Single Introductory Section

@shashreesamuel


Design comparison


SolutionDesign

Solution retrospective


Feel free to leave any feedback on this solution since I do not have a particular area that gave me any problems. Thank you in advance and your feedback is greatly appreciated

Community feedback

@Mabchir

Posted

Great job on :

  • using rem instead of px
  • using intuitive class names
  • guessing the fonts and font sizes! (I am sure if you had the figma file it would look just like the original design)
  • using the root variables for style variables
  • resetting your styles before adding your own styling!

Areas of improvement:

  • The background image can be add using the following:

body { background-image: url('w3css.gif'); background-repeat: no-repeat; }

  • The container_subtitle was closed by a h2 tag instead of h1
  • avoid using <br/>, instead play with the margins or padding
  • avoid leaving alt empty, you can describe it instead
  • for the logo alt don't forget to add the name of the product/brand in addition to the description
  • responsiveness can be a bit better - maybe it will help if you started with the mobile design before the desktop? I was recently given that advice. I tried it and made things much simpler.
  • you can change the image source for the container image instead of changing the height. that will be better for the user's phone while downloading the page. (instead of downloading a huge image size, they download the small mobile-friendly one)

Marked as helpful

0

@csphilli

Posted

I think it looks great! Perhaps more could be done to match the font size of the "Build a Community..." text. It's a little underwhelming in size in relation to its importance. The button should have more padding on the sides as well. You're also missing the alt text on your image. Nice work regardless!

0

@shashreesamuel

Posted

csphilli thanks for the review, will make changes and recommit to the repository

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