Skip to content
OverviewSolutions
0
Comments
845
Shashree Samuel
@shashreesamuel

All comments

  • Shashree Samuel•8,860
    @shashreesamuel

    Hey, great job completing this challenge, this looks good. The only thing that you are missing is a box-shadow on your card.

    Hope this helps

    Cheers 🥳

  • Shashree Samuel•8,860
    @shashreesamuel

    Hey Eman, great job completing this challenge. The only change you need to make is increasing the title a little

    Hope this helps

    Cheers 🥳

    Marked as helpful
  • Samir Bokhiriya•30
    @samirbokhiriya
    What are you most proud of, and what would you do differently next time?

    i was able to find the mistake using browser developer tools and it was really obvious using the developer tools from now on first im going to use the developer tools over the chat gpt it was a mistake it couldnt tell what was the problem

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

    i set the global margin to none rather than 0 so it was really hard to find but developer tools helped me a lot

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

    still responsive web design is little bit hard for me

    Responsive social media link page with vanilla CSS and HTML

    1
    Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge, your solution matches the design however I would recommend utilizing scale:1 to zoom in on the card itself.

    Nonetheless, keep up the awesome work

    Cheers!!

  • Wesley Lima•30
    @webwesley
    What are you most proud of, and what would you do differently next time?

    I'm proud about how i can solve this task without using any framework; What i would do differently next time is trust more im myself and make it done more fast.

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

    i've never use git before, so for the first try was very challenge and i got over it testing and learning more with documentation and stack overflow.

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

    i think my code could be more simple and clean

    QR code component | using Flexbox

    1
    Shashree Samuel•8,860
    @shashreesamuel

    Hey, awesome work completing this challenge. Your solution matches the design however I strongly believe that the heading text is wrapping a bit too much. Perhaps you can consider altering the width of the text.

    Nontheless, keep up the awesome work

    Cheers!

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge

    Your solution looks great however I think the font-size of your paragraph needs to be increased a little to match the design.

    With regards to your validation issues, I think you are specifying fewer values than the transform property requires thus I recommend reading up on the css transform property

    Here is a link

    Hope this helps

    Cheers

  • Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge.

    Your solution looks great and close to the design.

    With regards to your accessibility issue, there is no h1 tag in your html document hence I recommend changing <p class="Nome__depoimento">Daniel Clifford</p> to <h1 class="Nome__depoimento">Daniel Clifford</h1>

    Hope this helps

    Cheers

  • Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge.

    Your solution looks great and almost pixel perfect to the design.

    With regards to your accessibility issues, your document is unable to locate the main content hence I recommend wrapping all the tags in your body element within a main element. This should resolve all your issues.

    Hope this helps.

    Cheers

    Marked as helpful
  • Aziz•130
    @AzizJatoi

    qr

    2
    Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge

    You have made a great attempt at this challenge and I would suggest giving your content a bit of padding using padding.

    With regards to your accessibility issues, your document cannot identify the main content hence I recommend wrapping all of the tags in your body element within a main tag.

    Hope this helps

    Cheers

  • Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge

    Your solution looks great and it is pretty close.

    Let's address your accessibility issue, page needs a level one heading is caused by no h1 tag in your html document hence I recommend changing <h2>Equilibrium #3429</h2> to <h1>Equilibrium #3429</h1>.

    With regards to your validation errors, you typically don't want to hardcode height and width on an element because you are constraining it to a specific dimension which will lead to overflow. However in the instance where you need to mention it inline, you only specify the value and not the unit for example 14 instead of 14px.

    Hope this helps

    Cheers

  • Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge

    Your solution looks great however all html documents require a <h1> tag hence I recommend changing <h3 class="content-title">Equilibrium #3429</h3> to <h1 class="content-title">Equilibrium #3429</h1>

    This should resolve your accessibility issue.

    Hope this helps

    Cheers

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Awesome work completing this challenge

    Your solution looks great however with regards to your accessibility issues, your html document should have a main landmark in order to identify the main content of the page. In order to resolve this issue just wrap all the elements within your body element inside a main tag like this.

          <main>
        <section class="cars__section">
          <div class="container">
            <div class="sedans__car">
        <img src="/images/icon-sedans.svg" alt="Sedan car" class="type__img">
        <h1 class="type__name">Sedans</h1>
        <p class="paragraph">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
          or on your next road trip.</p>
        <button class="btn btn-sedan">Learn More</button>
      </div>
      <div class="suv__car">
        <img src="/images/icon-suvs.svg" alt="Suv car" class="type__img">
        <h1 class="type__name">SUVs</h1>
        <p class="paragraph">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
          and off-road adventures.</p>
        <button class="btn btn-suv">Learn More</button>
      </div>
      <div class="luxury__car">
        <img src="/images/icon-luxury.svg" alt="Luxury car" class="type__img">
        <h1 class="type__name">Luxury</h1>
        <p class="paragraph">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury 
          rental and arrive in style.</p>
        <button class="btn btn-luxury">Learn More</button>
      </div>
  </div>
  </section>
</main>

    Note: indentation is inconsistent

    Secondly in order to resolve your second accessibility issue, use <div> instead of <section since it is more meaningful and more descriptive. The section tag becomes purposeful only when the the role attribute is specified.

    Hope this helps

    Cheers

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey, awesome work completing the challenge.

    Your solution looks great however I wanted to address your accessibility report, your heading levels should only increase by one means that if you have an h1 then the preceding tag should be an h2. I recommend changing the h4 tag to a h3 tag instead to resolve the issue.

    Cheers and happy coding

  • Shashree Samuel•8,860
    @shashreesamuel

    That is quite commendable that you coded from a mobile device. Keep up the awesome work and great job using the ch css unit

  • Shashree Samuel•8,860
    @shashreesamuel

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however to answer your question you can also use margin: 0 auto.

    I hope this helps

    Cheers

  • Shashree Samuel•8,860
    @shashreesamuel

    Good job completing this challenge

    Your solution looks great however I think your content needs some margin from the top using margin-top.

    In terms of your accessibility issues

    • Document should have one main landmark is caused by the inability to detect the main content of the page and can be resolved by wrapping all the elements between the body element within the semantic main tag. This tag indicates that any tags within form the main content of the page.

    • Page should contain a level one heading is caused by no presence of a heading one tag in your html markup.

    I hope this helps

    Cheers

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey Ashwin, good job completing this challenge

    Your solution looks great however I think that the card needs a bit more padding using padding and the value for your border-radius property needs to be decreased.

    I hope this helps

    Cheers

  • Shashree Samuel•8,860
    @shashreesamuel

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the description needs some line-height using line-height.

    In terms of your accessibility issues, your errors are due to a heading tag not present in the article tag since all articles have a heading. I recommend deferring from the usage of the section tag since it doesn't serve any meaning without the role attribute, instead use the div tag.

    I hope this helps

    Cheers

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the text on the image needs a bit more opacity.

    In terms of your accessibility issues, your links need text since it's a clickable element.

    In terms of your validation errors there are few values for transform than what is required. I recommend reading on the transform property to ensure that you are specifying the correct number of values.

    Cheers

    Marked as helpful