Skip to content
Submitted over 3 years ago

Mobile first approach,flexbox

Saurabh Ramesh Kacholiya•50
@saurabhkacholiya
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

  1. Can anyone look into the code and see if my structuring of code is up to the standard for HTML and CSS?
  2. Can you please rate my design skill and point out areas of improvement?
  3. Is there any better way than the code has been written any blog or post to follow to improve CSS?

Community feedback

  • Joran Minjon•610
    @DrKlonkPosted over 3 years ago

    Hi Saurabh,

    Decent work! The site resizes properly and I like that there is some feedback on clicking buttons (even though it is not that meaningful).

    Some things to consider: Meta:

    • Please use a separate file for your css. It is bad practice to put everything in one file. You can import the css file in your <head>.
    • The class names are not consistent enough. Sometimes you do use the elements name (section/span/etc), sometimes you don't. Try to make the class names represent what the CSS is about. If the CSS is specific for the footer, call it 'footer'. If it is more of a utility class that gets reused, call it 'info-text-left' or something like that. Reusing a class named 'grow-together' for the same thing is a bit weird.
    • Do fix the html and accessibility errors generated by Frontend Mentor
    • I always like a cursor: pointer on buttons.

    Design:

    • The text on nearly all buttons is quite tiny. Go for at least 14px (or 0.875rem).
    • The top section needs more breathing room. It is quite different from the design in font size and margin of the text.
    • The big image with the colored dots looks stretched in the vertical direction. You can just remove the height property to fix this.
    • The headers from "Grow together" and such are also too small. Compare it with the design and see the difference.
    • You should hardly ever text-align: center a paragraph of text. It makes it hard to read. Check the design here as well, it is different.
    • The "ready to build" part actually has a bit too much space in my opinion.
    • The wavy image near the bottom has some whitespace on its bottom on some screen widths for me in Chrome. I can't find out why, but it shouldn't be there. It might be because in the HTML the <img> is just floating there in between the main and the footer. You could make it the background of a before pseudo element of the footer, maybe that helps. Removing the width: 100% also removes the whitespace, but the result might not be what you want.
    • In the footer I'd expect the subscribe button to also trigger the alert but it didn't.

    A lot of stuff! It's not all as important, but definitely enough room to improve.

    Happy coding!

    Cheers, Joran

    0
    Saurabh Ramesh Kacholiya•50
    @saurabhkacholiyaPosted over 3 years ago

    Hi DrKlonk, Thanks for your detailed feedback and for your time. I will do the changes. surely there is a lot of improvement required I am happy to grow and improve!!

    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