Skip to content
OverviewSolutions
6
Comments
4

chanchala-amar

@chanchala-amar160 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • chanchala-amar•160
    @chanchala-amar

    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
  • chanchala-amar•160
    @chanchala-amar

    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
  • chanchala-amar•160
    @chanchala-amar

    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

  • chanchala-amar•160
    @chanchala-amar

    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