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

All comments

  • chanchala-amar• 160

    @chanchala-amar

    Posted

    Hello,

    Congragulations on completing this challenge. Making the page responsive is easily done with the help of media queries. We normally use a mobile first approach - that is, style the page so that it looks good on a mobile screen and then we add media queries to alter the page layout for big screens. You can read up more about media queries here

    1. [Mozilla guide] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)

    2. [w3 schools] (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)

    Hope this helps, best wishes for the future projects!

    Marked as helpful

    1
  • chanchala-amar• 160

    @chanchala-amar

    Posted

    Hello,

    Congratulations on completing this challenge. Animating the numbers to count up to the result was a nice touch! Your css, js and html files were very easy to read, I have one suggestion regarding your html -

    Use semantic html instead of divs (https://www.semrush.com/blog/semantic-html5-guide/) these are needed for screen readers to read the page.

    Hope you find this helpful!

    Marked as helpful

    1
  • P
    Nelson Bernard• 160

    @nelsonbernard

    Submitted

    I'm not sure what the best approach is to using flexbox. I feel I have to apply it to multiple components. Is this the correct approach?

    Results Summary Component

    2

    chanchala-amar• 160

    @chanchala-amar

    Posted

    Hello,

    Yes, items within a flexbox can also be flex containers themselves - nesting of flex containers is a common practice.

    Semantic hmtl is now preferred to using divs in a page inorder to make it more accessible to screen readers, please take a look at this - Semantic HTML

    Your code was very easy to read, keep up the clean coding practice. Best wishes for the future submissions

    0
  • Musyoka Sila• 240

    @sila254

    Submitted

    Faced some difficulty in spacing the icons, icon name, and result using justify content element on my css.

    Result-Page-Challenge

    3

    chanchala-amar• 160

    @chanchala-amar

    Posted

    Hello,

    Congragulations on completing this challenge. Here are some things that I could think of looking at your code

    1. Use semantic html instead of divs (https://www.semrush.com/blog/semantic-html5-guide/) and use alt in image tag to describe images - these two are needed for screen readers to read the page.
    2. Self explanatory naming CSS classes like .results-box{} and summary-box in place of fbox{} and lbox{}
    3. A small tweak in your code will solve the spacing of icon, icon name and score issue. So, instead of
    <div class="box-three">
          <div class="icon">
            <img src="./assets/images/icon-verbal.svg" alt="">
          </div>
          <div class="name">Verbal</div>
          <div class="num"><span class="bold">
            61 </span>/ 100</div>
        </div>

    try this,

    .icon{
  padding-right:5%;
}
.label{
  vertical-align:center;
}

<div class="box-three">
          <div class="icon">
            <img src="./assets/images/icon-verbal.svg" alt="verbal">
            <span class="label"> Verbal </span>
          </div>
         
          <div class="num"><span class="bold">
            61 </span>/ 100
         </div>
</div>

    Good work -I liked your solution, best wishes for the next challenges!

    Marked as helpful

    0