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
Log in with GitHub
OverviewSolutions11Comments9

All comments

  • P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hello Ahmed,

    I hope your enjoying your coding experience. There is a particular issue with your code that if you correct, your code will look much closer to the design file. Your code on the body element is currently like below:

     body {
    background-color: hsl(217, 54%, 11%);
    display: flex;
    justify-content: center;
    align-items: center;
}

    But if you change it to this:

     body {
    background-color: hsl(217, 54%, 11%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    You should see an immediate difference. I didn't have time to review the rest of the code. However, I also noticed that you need to put a min-width (maybe around 320px) on the parent container. You can adjust the height/width of the image as needed. Also, if you have time learn about semantic html, as this is important in the future. Please if you find my comment helpful, mark it as helpful.

    Feel free to add me on twitter: @dboca93 Thanks !

    1
  • Elson Martins• 150

    @ElsonMartins

    Submitted

    My second project here I'm learning, I still have a lot to improve, but each challenge brings me a lesson. If there is something wrong, something that can be improved, I am open to receiving help and thank you in advance

    Land page criada com GRID e MediaQuery

    #accessibility

    3

    P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hello @ElsonMartins,

    Congratulations on submitting this task. I sincerely hope you're enjoying your coding experience. Looking at the design file, the central container needs to be centered both horizontally and vertically in the middle of the page. I found some code you wrote which is preventing this from happening, which is:

    @media (min-width: 22rem)
body {
    min-height: 0; 
    padding-top: 5rem; 
}

    If you remove this code, the other code you placed on the body, which is much better, will be able to shine through:

    body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--light-gray);
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    I wish you all the best for the future. Please mark this comment as helpful if you can ! Please feel free to add me on Twitter if you like : @dboca93

    Marked as helpful

    0
  • Ryan Abdaul• 320

    @RyanAbdaul

    Submitted

    Eventually I completed this design, It was kinda annoying in the beginning, but now I see it so easy, this design can help you to test your html skills, and also can help you to find out if you mastered grid or flex or you didn't, so I highly recommend this design for everyone to do. pls check out my codes and give me your opinion.

    Flex, Responsive, + some additions

    1

    P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hey Ryan,

    Hope you're enjoying your experience on Frontend Mentor. Your site is pretty good. However, when the screen size is between 770px and 900px wide (roughly) the creative wide-scrollbar you've created laps over one of the cards. Also, you could maybe use a bit more semantic html in your code.

    If you have time, maybe you could look at my page: https://fm-four-card-feature-eta.vercel.app/

    I believe that CSS Grid works a bit better on this design than flexbox.

    All the best, Please mark this comment as helpful! Feel free to add me on twitter: @dboca93

    Marked as helpful

    1
  • P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hey,

    Great work on this challenge. One recommendation might be to use some more semantic html. You could use the <picture> element for the image, the <article> element for the text and instead the "stats-text" div you could use a <ul> with -- <li> replacing the <p> element.

    I hope you're enjoying your coding journey. All the best. Please feel free to add me on Twitter: @dboca93

    0
  • P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hello @Zayacode96, well done on completing this task, I hope you're enjoying your coding journey. This is a good attempt, the main issue is that the "Results Summary" area is a little small. Also you could wrap the content using the main element, and give that the styles you applied to "card-container." Try wrapping the content in a main element with the following code:

       main {
          min-height: 100vh; 
          max-width: 100vw; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
}

    Then, it would be good to incorporate some core semantic HTML on the content like section or article. Also try and get some more size on the core area, as it's a little small when compared to the design file. I hope you appreciated my help. Feel free to add me on social media for future correspondence.

    Twitter: @dboca93 Linked-In: Dilhan Boca

    0
  • P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hello @Abdokhattab11, well done on completing this task, I hope you're enjoying your coding journey. This is a good attempt, the main issue is that the "Results Summary" area is not located in the middle. Try wrapping the content in a main element with the following code:

       main {
          min-height: 100vh; 
          max-width: 100vw; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
}

    Also, it would be good to try including some semantic html elements (like main, section or article etc.) I hope you appreaciated my help. Feel free to add me on social media for future correspondence.

    Twitter: @dboca93 Linked-In: Dilhan Boca

    2
  • P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hey @lisagriggs, well done on submitting this task. I hope you're enjoying your coding experience. This is a decent first attempt. One thing to focus on might be learning about semantic html elements like main, section and article. For example, instead of:

    .container {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    This could be:

     main {
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    This small adjustment would be great. Hope you appreciated my input, all the best !

    Marked as helpful

    0
  • P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hey Alex,

    Well done on attempting the task, I hope you are enjoying coding challenges. The biggest issue I noticed with your code is that on line 35 you put:

    align-content: center;

    When it should be :

    align-items: center;

    This would immediatly improve how your website looks, and make it closer to the design. All the best with your coding journey !

    0
  • dweemon• 10

    @dweemon

    Submitted

    A challenge I had with this project was figuring out the proper way to separate my code so it is cohesive to anyone reviewing, as well as whether it followed the correct semantical order.

    Another issue I had was being unsure if I was using units in order to adjust the position of my components. Should I be using px? rem? em? What is most recommended when designing a webpage so everything stays where I would want it to be.

    QR Code Component Challenge, using Flexbox

    3

    P
    Dilhan Boca• 180

    @dboca93

    Posted

    Hello @dweemon,

    Congratulations on submitting this task. Instead of playing around with position and then amending the margin, it would be easier to use a main inside the body element (that has the rest of the code in it) with the following code:

    main { width: 100vw; min-height: 100vh; display: flex; align-items: center; justify-content: center; }

    This might be easier, especially going into the future, I remember not finding out about viewport units quiet late, this will hopefully make it much easier for you !

    1