Submitted 18 days ago

Responsive Summary Page using HTML5, CSS3 and Bootstrap

Anubhab Mukherjee• 50

@anubhab5

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learnt the usage of gradient.
Understood the bootstrap layout.
Understood the responsive feature using media query

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

understanding the breakpoints

What specific areas of your project would you like help with?

The layout needs to be verified.

Community feedback

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 17 days ago

<body>

delete<main class="container-md container-sm offset-md-3 ml-sm-auto"> - no need

  <main class="row result-summary"> div becomes  main

    <article class="result col-md-4 p-4">

      <section class="result-heading col-md-12 fw-bold text-center">
        Your Result
      </section>

      <section class="score">

        <span class="user-score">76</span>

        <span class="out-of-score">of 100</span>

      </section>

      <section class="remark">

        <p class="remark_heading">Great</p>

        <p class="remark_sub-heading">
          You scored higher than 65% of the people who have taken these
          tests.
        </p>

      </section>

    </article>

Marked as helpful

Teodor Jenkler• 3,720

@TedJenkler

Posted 18 days ago

Hi @anubhab5,

Nice project! Here are a few suggestions for improvement:

Centering the Content: I noticed that your project isn't centered. You have two main options for centering your content:

Apply display: flex to the parent container and use align-items: center and justify-content: center. This is the recommended approach if you don't need overlapping designs.

Alternatively, you can use absolute positioning: set the component to position: absolute, then use top: 50%, left: 50%, and transform: translate(-50%, -50%) to center it.

Minimize Use of <div> Elements: While <div> elements can be useful, it's better to use semantic HTML elements when possible. They improve accessibility and make your code easier to inspect and understand. Use <div> only when necessary and try to layout your content using Flexbox or positioning first. This will help screen readers navigate your site more effectively.

Keep up the great work!

Best, Teodor

Marked as helpful

Anubhab Mukherjee• 50

@anubhab5

Posted 17 days ago

Thanks @TedJenkler for your views. Yes I missed the centering part. For the second comment (the usage of div tag) I did not use a single div tag in the entire project :P https://github.com/anubhab5/result-summary/blob/master/index.html May be you can help me by providing a repo link which I can follow to grow my semantic element knowledge. Thanks in advance.

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 18 days ago

<section class="row result-summary"> <section class="result col-md-4 p-4"> <section class="result-heading col-md-12 fw-bold text-center"> Sections are used as siblings, not parent-child, don't be afraid to use div. Also, I think you forgot to center project for desktop.

Marked as helpful

Anubhab Mukherjee• 50

@anubhab5

Posted 18 days ago

@SvitlanaSuslenkova Thanks a lot for your useful thought. I have few more questions. Can we connect over discord if that is okay for you?

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 18 days ago

@anubhab5 I don't use it

Anubhab Mukherjee• 50

@anubhab5

Posted 17 days ago

hello @SvitlanaSuslenkova how and what all semantic elements I could have used instead of just using section throughout. Wanted to know your thoughts on the same! Thank you

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord