Skip to content
OverviewSolutions
23
Comments
10

David Gichuru

@dxiDavidNairobi, Kenya360 points

I find Web Development quite satisfying and enjoy doing the front end I have a good understanding of HTML, CSS, JavaScript, and React. I look forward to learning a lot from every challenge and the community.

I’m currently learning...

React React Router, Redux, API, Backend Integration

Latest solutions

View more solutions

Latest comments

  • David Gichuru•360
    @dxiDavid

    Fixed it

  • David Gichuru•360
    @dxiDavid

    I'm not sure why the screenshot makes it look so stretched out 🤔. The live view looks just fine.

  • David Gichuru•360
    @dxiDavid

    Hello @Julian-Carlosama 👋🏾

    Congrats on completing the challenge 🎉

    I have a few suggestions on how you can improve your code:

    1. HTML📃

    • Make sure your content is wrapped inside a <main> landmark tag. If you want to learn more about semantic HTML tags you can find that here.
    • Make sure that your images have alt text for screen readers which will improve accessibility for your future websites. Try to have descriptive text so that the person knows exactly what the image is.

    2. CSS📄

    • Avoid setting fixed values for dimensions like width and height. Instead set a max-width and max-height for your elements
    • Avoid using absolute units like px for anything other than border-radius or box-shadow. Use responsive units like em and rem which will make your projects more responsive.
    • To center your card you can try the following methods
    1. Using grid
    body{
     min-height: 100vh;
     display: grid;
     place-items: center;
}
    1. Using flexbox
    body{
     min-height: 100vh;
     display: flex;
     flex-direction: column; 
     justify-content: center;
     align-items: center;
}

    Another useful tip is to build a habit of setting custom properties for the styles found in the style guide and any other styles you might re-use.

    You might also want to set up utility classes for centering things to avoid repeating yourself throughout the code.

    Your solution looks great

    I hope you found this helpful 😁

    Happy Coding 🥂

    Marked as helpful
  • David Gichuru•360
    @dxiDavid

    Hello @WiaterKa 👋🏾

    Congrats on completing the challenge.

    To solve your centering problem, try wrapping everything in a wrapper div or main container and center it using flexbox or grid.

    body {
  background-color: hsl(210, 46%, 95%);
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 1100px;
  height: 572px;
}

    For the above code you've written, declare a min-height first then use flexbox. Please do not give the body a fixed height or width after. The auto margin is also unnecessary.

    One last thing, avoid using pixels for dimensions, font sizes, or spacing. You're better off using em or rem.

    I hope you found this helpful, happy coding🥂

    Marked as helpful
  • David Gichuru•360
    @dxiDavid

    Hello @JavierRiv97 👋🏾

    The exact font sizes are for pro members otherwise, use your knowledge of CSS and best judgment to get as close as possible to the design. Don't worry though, It's not that hard.

    Also, ensure that your projects meet accessibility requirements by adding alt text to your images for screen readers.

    Make sure that your Body content is wrapped in landmarks like <main> or <article>. You can find out more on semantic HTML here

    Happy coding🥂

  • David Gichuru•360
    @dxiDavid

    Hello there @Akiraz14 👋🏾

    I have a suggestion that will help you write better code

    • when setting custom properties, try giving them descriptive names like --primary-font-color instead of --color-1st. It will make your CSS easier to read and understand. Also, try to set custom properties for styles such as font-size, font-weight, (basically things you see in the style guide)border-radius since they will most likely be used on more than one occasion.
    • Limit the use of pixels to things like box-shadow and border-radius, otherwise use relative units.
    • only look for references when you are absolutely stuck and cannot find a way out. don't waste time doubting yourself. If you have a working solution then good. come back and refactor later

    The attention to detail in your solution is impressive💪🏾

    Keep Going, happy coding🥂

    Marked as helpful
View more comments