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
Log in with GitHub
OverviewSolutions27Comments850

All comments

  • Samir Bokhiriyaā€¢ 30

    @samirbokhiriya

    Submitted

    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

    @shashreesamuel

    Posted

    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

    @webwesley

    Submitted

    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

    @shashreesamuel

    Posted

    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

    @stefan123283

    Submitted

    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

    @shashreesamuel

    Posted

    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

    @shashreesamuel

    Posted

    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

    @shashreesamuel

    Posted

    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

    @AzizJatoi

    Submitted

    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

    @shashreesamuel

    Posted

    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

    @fty57

    Submitted

    • 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

    @shashreesamuel

    Posted

    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

    @shashreesamuel

    Posted

    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

    @shashreesamuel

    Posted

    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

    @shashreesamuel

    Posted

    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,855

    @vanzasetia

    Submitted

    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

    @shashreesamuel

    Posted

    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

    @Canti21

    Submitted

    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

    @shashreesamuel

    Posted

    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
  • Ali KHANOUBASā€¢ 60

    @KHANOUBAS1811

    Submitted

    I will be happy to see your feedbacks.

    NFT preview card

    #angular#astro#bootstrap#fetch#laravel

    1

    Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    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

    1
  • Aswin Harikumarā€¢ 90

    @i-am-ashwin

    Submitted

    Hello,

    please give your feedback on how the width and image is managed(i used the picture tag since IE is dead anyway :P).

    is this the way to manage the width or should i be setting explicit width for the right side as well?

    Responsive Product Preview Card with Flex

    2

    Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    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

    1
  • Stefan Faderlā€¢ 30

    @stefanfaderl

    Submitted

    Feel free to give me feedback to my code. What could be improved?

    scss, flexbox

    #sass/scss

    1

    Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    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

    1
  • Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    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

    0
  • Nickā€¢ 110

    @Fitsos17

    Submitted

    Hi guys, this challenge took me a little time to complete and I would love to hear your thoughts. In the future, I'll redo it using sass. Thank you, Nick.

    qr-code-component solution using flexbox

    1

    Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I have some recommendations

    • the card image has a bit too much padding

    • the card is missing a box-shadow using box-shadow

    • The description is supposed to wrap after the word "frontend".

    I hope this helps

    Marked as helpful

    0
  • Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I have some recommendations regarding the design aspect

    • The title in each card needs to be in a heavier font weight

    • The font family of the cards does not match the font-family specified in the style-guide.md file likewise the text in the button

    I hope this helps

    0
  • Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the card needs to be a bit taller thus the height needs to be increased a little bit.

    In terms of your code, I recommend deferring from using element selectors which directly target elements because it will apply any styles added to all the instances of that specific selector across the document and will lead to specificity errors. You should use class selectors since it is low in specificity and the aim is to have low specificity.

    I hope this helps

    Marked as helpful

    1
  • Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I have some recommendations

    • The font weight of the button text "Proceed to Payment" needs to be in a heavier font weight

    • The color of the text "change" is supposed to match the one specified in the style-guide.md file.

    • The card is missing a subtle box-shadow using box-shadow

    I hope this helps

    Cheers

    Marked as helpful

    0
  • foxynoxyā€¢ 470

    @purplehippo911

    Submitted

    How can I size the cards properly? Is is something with my Grid which could have been different? How can I make it more responsive? Is there something with my code that could've been done different?

    Testimonials Grid Section

    2

    Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however to answer your question in order to make the cards responsive as seen in the design, you need to use grid-column: span 2 on the cards that need to spanned horizontally across two columns, secondly the last card that spans the 4th column of the grid needs to have the following properties

    grid-column: 4;
grid-row-start: 1;
grid-row-end: 3;

    In terms of your accessibility issues

    • Heading levels should only increase by one means that if you have an h1 tag then the preceding tag should be an h2 thus to solve this issue change the h3 tags to an h1 tag.

    • All page content needs to be contained within landmarks is caused by not finding an landmark tags within your document and can be resolved by wrapping all the tags within the body element between the main tag.

    I hope this helps

    Cheers

    Marked as helpful

    2
  • Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I think the width of the card needs to be decreased, likewise the height in order to be seemingly close to the design.

    In terms of your accessibility issue, your page must have a level one heading if you are using headings, thus I recommend changing the titles of the cards to a h1 tag. I hope this helps

    Marked as helpful

    0
  • Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the title "Client Testimonials" is supposed to be uppercased.

    Let's talk about your accessibility issues

    • All page content should be contained within landmarks. Simply wrap all your tags between the body element within main tags.

    In terms of your validation errors, I recommend reading on the source tag to ensure that you are using it correctly.

    I hope this helps

    Cheers

    Marked as helpful

    0
  • Valter Kamposā€¢ 140

    @VKampos2

    Submitted

    I was already familiared with the card component in bootstrap, i did it mobile first workflow and it was difficult to center it till i found media property.

    I wanna know how to overcome the accessiblity issues in my website?

    waiting for feedbacks

    thanks a lot

    preview card using html, css and bootstrap

    #bootstrap

    1

    Shashree Samuelā€¢ 9,260

    @shashreesamuel

    Posted

    Good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the button needs a bit of padding using padding. Secondly the border-radius on the card needs to be decreased a little

    Let's talk about your accessibility issues

    • Document needs a main landmark, this is caused by the inability to detect the main content of the page. This can be fixed by simply wrapping all the tags between the body element within the semantic main tags.

    I hope this helps

    Cheers

    Marked as helpful

    0