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
OverviewSolutions12Comments13

All comments

  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @sof28, I'm impressed how much your first challenge is good the design is basically matching the figma files, amazing!

    Here's one tip for you:

    Replace <img> tag with <picture> tag

     <picture>
          <source
            srcset="mobile.jpg"
            media="(max-width: 620px)"
          />
          <img
            src="desktop.jpg"
            alt="Office Workers Smiling"
          />
        </picture>

    and add border-radius to the desktop-img

    img{
 border-radius: 0.5rem 0 0 0.5rem;
//border-radius: top-left top-right bottom-right bottom-left
}

**✌️ I hope this helps you and happy coding!**

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @syrykh-feit, I'm impressed how much your first challenge is good the design is basically matching the figma files, amazing!

    Here's one tip for you:

    Improve the semantics by replacing the <div> and use <section> which is a better tag, remember that <div> doesn’t have any practical meaning is just a block of elements, so for a big block of elements use semantic tags.

    This is a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

    And for the <img> tag try using this

        <picture>
          <source
            srcset="mobile.jpg"
            media="(max-width: 620px)"
          />
          <img
            src="desktop.jpg"
            alt="Office Workers Smiling"
          />
        </picture>

    ✌️ I hope this helps you and happy coding!

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @KevinRo29, I'm impressed how much your first challenge is good the desing is basically matching the figma files, amazing!

    Here's one tip for you:

    before the footer add

    <hr>

    it will add a horizontal line and you can style it

    ✌️ I hope this helps you and happy coding!

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @FrontDevsamir, I'm impressed how much your first challenge is good the design is basically matching the figma files, amazing!

    Here's one tip about semantics for you:

    You have use height in flex-item--img

    try this

    .flex-item--img{
 width: 100%;
line-height: 0;
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hello @MohitMahara, Congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    You have used background-image instead of using background-image you can use

    <picture>
          <source
            srcset="mobile.jpg"
            media="(max-width: 620px)"
          />
          <img
            src="desktop.jpg"
            alt="Office Workers Smiling"
          />
        </picture>

    Improve the semantics by replacing the <div> and using <section> which is a better tag, remember that <div> doesn’t have any practical meaning is just a block of elements, so for a big block of elements use semantic tags.

    This is a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

    when you style your page try using this

    *{
margin: 0;
padding: 0;
}

    to remove the padding and margin to thebody

    And for responsiveness try using

    @media (max-width: 600px) {
//add the class or tag here 
}

    ✌️ I hope this helps you and happy coding!

    0
  • codinci• 180

    @codinci

    Submitted

    I'd like to receive feedback on explicitly sizing the card. Is this a best practice when it comes to responsive web design?

    Responsive product preview card

    #accessibility

    2

    Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @codinci, I'm impressed how much your first challenge is good the design is basically matching the figma files, amazing!

    Here's one tip about semantics for you:

    Improve the semantics by replacing the <div> and using <section> which is a better tag, remember that <div> doesn’t have any practical meaning is just a block of elements, so for a big block of elements use semantic tags.

    This is a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

    Remover border from the bottom

    And for the <img> tag try using You have used background-image instead of using background-image you can use

    <picture>
          <source
            srcset="mobile.jpg"
            media="(max-width: 620px)"
          />
          <img
            src="desktop.jpg"
            alt="Office Workers Smiling"
          />
        </picture>

    ✌️ I hope this helps you and happy coding!

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @gabrielkyalo, Congratulations!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    Improve the semantic by replacing the <div> used for box and using instead <section> is a better tag, remember that <div> doesn’t have any effective meaning is just a block elements, so for a big block of elements use semantic tags.

    This is a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

    You have use padding padding-top padding-bottom in your box class firstly understand if you are using padding then you do not have you padding-top padding-bottom padding-left padding-right

    .box{
  padding: top right bottom left
}

    if you use padding and put just one value then that value will be applied to all the side in the box

    .box{
  padding : 1rem;  
   /// it will apply to all the side of the box
}

    for the text just apply text-align: center

    ✌️ I hope this helps you and happy coding!

    Marked as helpful

    1
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hello @atmcmustafa, Congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    You did really good work here putting everything together, something you can improve its your code HTML markup and semantics. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of an element with the best tag in this situation. Pay attention that <div> is only a block element without meaning. Change the background-color of the star rating so it look good and also change the font-size or font-weight

    ✌️ I hope this helps you and happy coding!

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hey @Chidisunday2, I'm impressed how much your first challenge is good the desing is basically matching the Figma files, amazing!

    Here's one tip for you:

    You have used background-image instead of using background-image you can use

    <picture>
          <source
            srcset="mobile.jpg"
            media="(max-width: 620px)"
          />
          <img
            src="desktop.jpg"
            alt="Office Workers Smiling"
          />
        </picture>

    ✌️ I hope this helps you and happy coding!

    Marked as helpful

    1
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Hello @omarsaleh11, Congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. Especially like the signature that you have add-in your solution. I’ve some suggestions for you:

    You did really good work here putting everything together, something you can improve it's your code you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation.

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    Your solution seems fine, you did a really good job wrapping the content for these 3 cards. just increase the @media(min-width) so it can be responsive on all the mobile devices

    Marked as helpful

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    @osamasalm Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! one suggestion for you is just add margin-top to the main tag

    0
  • Nikhil Sharma• 340

    @NIk22517

    Posted

    @Jaro233 You have done a great job. I just have one suggestion for you just change the @media width so it can be responsive on all the devices also change the width in the <picture> tag for mobile image @media you can add a max-width below 600px so your picture tag can work fine

    Marked as helpful

    1