Skip to content
OverviewSolutions
27
Comments
846
Shashree Samuel
@shashreesamuel

All comments

  • Samir Bokhiriya•30
    @samirbokhiriyaSubmitted 9 months ago
    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•9,260
    @shashreesamuelPosted 9 months ago

    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!!

    0
  • Wesley Lima•30
    @webwesleySubmitted 9 months ago
    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•9,260
    @shashreesamuelPosted 9 months ago

    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
    0
  • Frunză Ștefan•90
    @stefan123283Submitted almost 2 years ago

    I wrote a bunch of CSS media queries to ensure that the Huddle logo image is not positioned behind the mockup image. Please give me feedback about how I should have solved this in a much efficient way.

    Huddle landing page

    1
    Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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
    1
  • Aziz•130
    @AzizJatoiSubmitted almost 2 years ago

    It was really hard for me to center it and didn't know what height and width to give it, and about that white border that was hard too, please point out mistakes, I would really appreciate it, I am a beginner, please check it out.

    qr

    2
    Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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

    0
  • Álisson Véras•30
    @fty57Submitted almost 2 years ago

    • I think the hardest part was understanding how well this alternation between the overlay works, it's totally different leaving an image with this effect than leaving a text like this.

    • I think some parts referring to positions, it's not as simple as it seems. You can understand much better in practice.

    • I learned that absolute position works much better when inside relative position, at least it was necessary to resolve my component.

    A nft card component using overlay and changing positions

    1
    Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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
    1
  • Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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
    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    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

    0
  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 3 years ago

    Hello Everyone! 👋

    I manage to make this website responsive without media queries. Feel free to take a look!

    Of course, any feedback is appreciated!

    That's it! Happy coding everyone!

    Responsive 3 Column Card Component (No Media Queries)

    #accessibility#bem#lighthouse
    8
    Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

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

    1
  • Canti•110
    @Canti21Submitted over 2 years ago

    How do you center the card?

    Is it good to center the card as I did in terms of good practices?

    QR Component

    2
    Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    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

    0