Skip to content
OverviewSolutions
6
Comments
11
P

FO

@de-furkanUK205 points

Thanks for visiting 😊.

Latest solutions

Latest comments

  • P
    FO•205
    @de-furkan

    Good work. Consider flexbox/grid layout for better alignment along with min-width/max-width etc. for better control over sizing.

  • Emmanuel Oluwatosin Alao•60
    @Manuel928
    What are you most proud of, and what would you do differently next time?

    I'm proud of being able to look at the original design and create my own to look alike

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

    -Flexbox aligning

    • Typography

    I got help from online forums

    Social Proof Section

    1
    P
    FO•205
    @de-furkan

    Looks great. A small recommendation about the height of the containers; do not use height = <px>. Instead, consider either:

    • min-height = <px> (for containers that should be a specific size at least, but can also grow if more stuff added.

    • (OR BETTER), no height at all. Leave it out, so it dynamically resizes itself.

  • P
    FO•205
    @de-furkan

    Hi there,

    The design looks responsive to some extent but there are a few points to consider:

    1. Make use of some landmark HTML5 elements e.g. use the <main> to wrap all your main markup

    2. Section / article elements usually require a heading

    3. Validate your code with: W3C

    The w3c validator will give you a more detailed guide on what is missing and what should be avoided in your markup

    I hope that has helped, Happy coding

    Marked as helpful
  • P
    FO•205
    @de-furkan

    Great attempt at this project 🎉

    I can see you have made effort to include CSS variables which is always nice to see :)

    here are some improvements that can be made:

    • avoid setting height with vh on body to make the page full screen. This can be problematic on phones and smaller screens, especially when the project gets more complex.

      • one way to get around this issue is:
    html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}

    • don't litter the HTML document with <div>, instead make use of HTML5 semantic markups e.g. <section> or <article> for the card component

    • supply a padding top on the body element so that it doesn't cause any alignment problems or clip out your card when the phone is in landscape mode.

      • you could alternatively, supply a margin top to the card to achieve a similar effect

    • make use of rems for border-radius. On some screens the border-radius can cause un-intended side effects when you declare them with pixels

    • use some reset properties for CSS e.g. you could display <img> as:

    img{
  display: block;
  max-width: 100%;

    I hope these help. Happy coding :)

    Marked as helpful
  • P
    FO•205
    @de-furkan

    I love it great effort, lovely design🎉🎉

    In terms of key areas for improvement:

    • avoid setting:
    outline: none;

    • i understand this can be tempting to do this, as the default outline usually looks ugly, but it can cause accessibility problems for users that make use of accessibility features. Outline is an important part of the accessibility tree to help users navigate and see selected areas of the form

      • while this can be overcome with other ways of styling, as you have done here, but it is still recommended to keep the outline.

    • perhaps as an alternative, you could style the outline as needed instead of adding an additional boarder

    • make use of <main> element to place the content into the main block

      • this makes it easier to control layout and page size as demonstrated in this code:
    <main>
  // Html or react codes in between 
</main> 

html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}
  • P
    FO•205
    @de-furkan

    Hi there,

    Cool design! 🎉 Here are some pointers for improvement:

    • make use of flexbox to justify and align the the card to the centre of the page, as it currently seems off . You can do something like this:
    /* create a <main> in html 
* and put the contents there,  
*then use flexbox on main */

main{
  display: flex;
  justify-content: center;
  align-items: center; 
}

    Doing it this way can also help you to create a correct size for the page too like this:

    
html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}
    Marked as helpful
View more comments