Skip to content
OverviewSolutions
12
Comments
13
Nikhil Sharma
@NIk22517

All comments

  • Nikhil Sharma•340
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @codinciSubmitted about 2 years ago

    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

    2
    Nikhil Sharma•340
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    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
    @NIk22517Posted about 2 years ago

    @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