Skip to content
OverviewSolutions
2
Comments
27
Aditya Singh
@adityas24

All comments

  • Aditya Singh•460
    @adityas24Posted almost 2 years ago

    Hi Fiqih

    I couldn't get what exactly is your problem? Can you tell in detail?

    0
  • Sanjog Patel•80
    @Sanjog735Submitted almost 2 years ago

    How can i create shapes like this line using css , Here i made it using <hr> tag and specify its border. If any other solution is there then please give me some advice.

    News-HomePage-UI

    2
    Aditya Singh•460
    @adityas24Posted almost 2 years ago

    Hi Sanjog, i loved your site, great job!

    For creating those lines, you can simply give border-bottom to the first and the second boxes you have created. That is the best way to do it i think.

    If you still want to follow any other path, you can use div tag and give it width, height and background color. But why to create tags unnecessarily if you can do it just by adding border-bottom. This would be a bad practice.

    Do mark it as helpful if it helped you. Happy coding!

    0
  • Saswat Samal•80
    @saswat10Submitted almost 2 years ago

    Still facing issues with centering ☹️. Open to suggestions that can improve my design😊😊

    Profile-Card

    3
    Aditya Singh•460
    @adityas24Posted almost 2 years ago

    Hi Saswat, great effort by you!

    I saw that for displaying the person's image, you are using background image. But the image tag is the most appropriate way to display image here. For more information read this stackoverflow answer on background image vs img tag

    Hope it was helpful, Happy coding!

    Marked as helpful
    1
  • Dhanya•50
    @dhan5aSubmitted almost 2 years ago

    I struggled a little with padding, as there is a bigger white space from the bottom paragraph which differs from the padding on the other sides.

    QR code component

    2
    Aditya Singh•460
    @adityas24Posted almost 2 years ago

    Hi Dhanya, Great work by you. I found following irregularities in your HTML

    1. Instead of writing this <div class="header"> Improve your front-end skills by building projects </div> You could have written

         <h2> Improve your front-end skills by building projects </h2>

    It is semantically better code. And not necessary to use h2 tag. You can use any heading tag according to requirement

    2. And you should have used paragraph tag here

         <div class="text-copy">
          Scan the QR code to visit Frontend Mentor and take your coding skills to 
           the next level
      </div

    Instead of above code, you should write <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>

    Here right tag to be used is paragraph tag.

    Thanks, Happy coding.

    Marked as helpful
    1
  • Szymon Paprocki•320
    @spaprockiSubmitted about 2 years ago

    I found the masking of the picture quite tricky and I would like to hear a feedback, if the implemented solution is ok, or if there is maybe a better one I could use.

    I used a different text color for stats names, so please don't consider it an error.

    Stats preview card component - plain CSS, flexbox, grid

    1
    Aditya Singh•460
    @adityas24Posted about 2 years ago

    Hey Szymon, great job , a very well semantic html written by you. I think writing good semantic HTML is harder to master than CSS.

    And I would like to suggest you that avoid applying any styles on the body element. Make habit of not doing it from the very beginning. All the best!

    Marked as helpful
    0
  • Teo•30
    @Teo-kodehodeSubmitted almost 3 years ago

    Any feedback would be greatly appreciated, and tips on how to make the padding between the picture and the white bg would be nice.

    QR-code with CSS and HTML

    3
    Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Teo! you did very well in your first challenge. I would like to suggest you the following....

    You could have avoided the div you used to wrap the h1 and p. As you have not used any style on div. Then you can simply avoid using it. It will not affect the semantics and will also decrease the length of the code.

    So you could simply write

    <div class="container">
      <img src="images\image-qr-code.png" alt="QR code">
      <h1>Improve your front-end skills by building projects</h1>
      <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the 
         next level</p>
</div>

    All the best 🙂👍

    Marked as helpful
    1
  • Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Abdur great Job!

    Very well written markup and very well use of BEM. Now learn about em and rem and start using them. You are ready to rock.

    All the best 🙂👍

    Marked as helpful
    0
  • Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Ayush good job.

    I saw that you are using margins to give spaces around the elements inside the card. For example in <div class="nft-img"></div> and <div class="owner"></div>.

    Do not use margins for this purpose. Use padding instead. Margins are used when we want to give space between two adjacent elements. But to give space around the element always use padding.

    All the best 🙂👍

    Marked as helpful
    1
  • Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Nika! good job with this one.

    On small screens (below 600px) your card has no space around it. You card needs some left and right margin around it. We do not set that margin on container as margin on container is set to auto to center the card. So best way of doing this is that always wrap the container inside some element and give margin to that element, that can be section or div according to your requirement.

    Here is the code

    <div class = "card> 
   <div class = "container">
      .
      .
      .
   </div> 
</div>

.card {
  margin: 0 2rem;
}

    Hope it helps. All the best 🙂👍

    Marked as helpful
    0
  • Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Sandesh! great job with this one.

    One mistake i saw is that you are using unnecessary divs in your code. Inside each column you have 4 elements. And for each element you are using a div to contain it. You don't really need to do that.

    Instead of writing

    <div class="col1 box">
        <div class="col1Img">
          <img src="images/icon-sedans.svg" alt="sedansImg">
        </div>
        <div class="col1Title"><h2>Sedans</h2></div>
        <div class="col1Info">
          <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
            or on your next road trip.</p>
        </div>
        <div class="col1bottom">
          <button>Learn More</button>
        </div>
      </div>

    You could have simply written

          <div class="col1 box">
          <img src="images/icon-sedans.svg" alt="sedansImg">
          <h2>Sedans</h2>
          <p>Choose a sedan for its affordability and excellent fuel economy. Ideal 
                for cruising in the city or on your next road trip.</p>
          <button>Learn More</button>  
      </div>

    Still the code will work fine as every element inside the flexbox becomes a flex item irrespective of that item is inline or block element.

    All the best 🙂👍

    Marked as helpful
    2
  • da’Keshra•140
    @daKeshra7Submitted almost 3 years ago

    I couldn't get the arrow to rotate. Please I'll need help on that. Further insights on javascript also needed.

    Thank you.

    html css flex js

    3
    Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey good job!

    You can use transform: rotate() property on the arrow and rotate it by 180degree when the arrow is being clicked. You can do this both with css and javascript.

    All the best 🙂👍

    1
  • Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Sathyan, good job with this one.

    Your images are not visible as you have not written the path correctly. Remove the first slash in the images url. Your site would be working fine while working with VS code. But when you host your website, this is not the correct way of giving path.

    Instead of writing <img src="/images/icon-suvs.svg">. You have to write <img src="images/icon-suvs.svg">.

    All the best 👍🙂

    Marked as helpful
    0