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
OverviewSolutions2Comments27

All comments

  • Aditya Singh• 460

    @adityas24

    Posted

    Hi Fiqih

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

    0
  • Sanjog Patel• 80

    @Sanjog735

    Submitted

    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

    #fresh#foundation

    2

    Aditya Singh• 460

    @adityas24

    Posted

    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

    @saswat10

    Submitted

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

    Profile-Card

    3

    Aditya Singh• 460

    @adityas24

    Posted

    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

    @dhan5a

    Submitted

    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

    @adityas24

    Posted

    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

    @spaprocki

    Submitted

    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

    @adityas24

    Posted

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

    Submitted

    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

    @adityas24

    Posted

    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

    @adityas24

    Posted

    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

    @adityas24

    Posted

    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

    @adityas24

    Posted

    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

    @adityas24

    Posted

    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

    @daKeshra7

    Submitted

    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

    @adityas24

    Posted

    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

    @adityas24

    Posted

    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
  • Aditya Singh• 460

    @adityas24

    Posted

    Hey Oluwatoni, upload your code again.

    Your folder structure is not proper. Index.html file should be in the root folder.

    All the best 🙂👍

    Marked as helpful

    0
  • Aditya Singh• 460

    @adityas24

    Posted

    Good job with grids buddy!

    Biggest problem with your web page is accessiblity. Color of your text and headings is very light. Make them bit darker so that they are accessible to everyone. They might be inaccessible to person with weak eyesight. Many other factors come under accessiblity. Google about accessiblity in web dev and you will get more insight into this.

    And here i am sharing a great tool to know that color contrast is good or bad and how readable/accessible is your text: https://coolors.co/contrast-checker/112a46-acc8e5

    All the best 🙂👍

    Marked as helpful

    1
  • Aditya Singh• 460

    @adityas24

    Posted

    Hey Israr Good Job ! And it's not a landing page buddy.

    0
  • Aditya Singh• 460

    @adityas24

    Posted

    Hey Johnsey great effort!

    There is not any specific size of the card. All you have to do is look at the design and get your card looking as close to the design as possible.

    Hope it helps. All the best 🙂👍

    0
  • Aditya Singh• 460

    @adityas24

    Posted

    Great Job Kamal!

    One mistake i saw in your code is that you are using "ids" everywhere instead of "classes". I know the CSS will still work fine and the web page would look the same. But in real world it is a very bad practice and mostly classes are used for styling purpose. Biggest advantage of classes is reusability of code.

    Ids have some very specific use cases. They are very much used when JavaScript comes into action. Google it and you will get more clarity.

    So get into habit of writing classes from very beginning itself. All the best 🙂👍

    Marked as helpful

    2
  • Aditya Singh• 460

    @adityas24

    Posted

    Hey Ashley you did a great job!🙂

    I studied your code well and found some points you need to improve on: 🙂

    1. You are using div element where it is not necessary. Using div there will not create any problem, but you are unnecessarily increasing the length of the code. That will reduce the maintainablity and readability of the code.

    For example: <div class="header"> <h1>Improve your front-end skills by building projects</h1> </div>.

    Here you do not need to wrap h1 in a div. If still you want to write h1 inside of a header, then use <header> tag instead. As we have to take care of semantics also 🙂

    1. Similary you don't need to wrap paragraph inside of a div. You can straight away use <p> tag without wrapping it. Afterall everything inside a flexbox will become flex item. You don't need to wrap everything inside a div 🙂

    I will recommend you to go through markup written by Daniel. He has written it perfectly i think

    https://www.frontendmentor.io/solutions/qr-code-component-using-html-and-css-38XEjHXG2

    All the best 🙂👍

    0
  • Yeyo Poche• 30

    @Poche89

    Submitted

    Hi, This is my second challenge after some many years. I just want to know, how I could use less CSS for responsive design. Thank you.

    QR Code Component Main

    1

    Aditya Singh• 460

    @adityas24

    Posted

    Hey Yeyo great job! I studied your work and i saw that you have written lot of media queries for every screen size available. That is old way of writing media queries and not the best practice in 2022.

    The best way would be you start decreasing size of screen and see where the elements are breaking. Suppose they start breaking at 1200 px. So you write media query for 1200px. And write your code in media query such that it works atleast for next 150-200px. I mean your website does not break for next 150-200px.

    Then again decrease the size of screen. Suppose now your website start breaking at 950px. Then again write media query for 950px. And so on.

    And i saw you wrote a media query for 375px and 320px. The media query written for 375px will even work well for 320px. If it is working well, then why to write extra code?

    I hope you got my point🙂. All the best 👍

    Marked as helpful

    1
  • Aditya Singh• 460

    @adityas24

    Posted

    Hey Johnsey good job! It is always good to learn new tricks and techniques. But in 2022 flexbox and grids are mainly used for centering a block inside another block.

    All the best 👍🙂

    Marked as helpful

    0
  • P
    Alfredo Brito• 250

    @95Fredo

    Submitted

    Why is it when I upload my finished project to FrontEndMentor it distorts my card height, width, font size and everything pretty much. But when I open this project locally using the live server extension or through the github pages it comes out just fine.

    qr-code-component-main using html/css flexbox and BEM method

    #bem

    1

    Aditya Singh• 460

    @adityas24

    Posted

    Hey Alfredo great effort! Most probably you are having a large screen computer. You have coded the challenge according to your screen size only.

    If you would have read in style-guide.md file it is mentioned that: The designs were created to the following widths: Mobile: 375px Desktop: 1440px

    So you coded it according to your screen size only, but frontendmentor compares it to screen size 1440px. So try to make it repsonsive. That is when you decrease the screen size, it don't get distorted.

    All the best 🙂👍

    Marked as helpful

    1
  • Aditya Singh• 460

    @adityas24

    Posted

    Great job Sam! You are doing layouting very well with bootstrap. You need to improve on the accessiblity of your web page. I m listing few points

    1. Headings look too small
    2. In mobile version images(hero and productive section) are getting too large. Seems like you are using width:100% of the container on all screen sizes. For smaller screens reduce the image size to somewhat around 60-80%.
    3. Your card seems to have a fixed width for all screen sizes. For mobile version make it look bigger.

    Improve on accessiblity and reponsiveness. Then you are good to go with Bootstrap 5. Good luck, all the best 🙂👍

    Marked as helpful

    1
  • Tami Ribeiro• 40

    @tamiribeiro

    Submitted

    So... my first solution here, hi everyone 🖐🏻. I'm really happy with my results but there's this thing bothering me tho. How can I make my eye icon have a different opacity than its father element? I'm stuck here. Thank u in advance 💙

    nft preview card component

    2

    Aditya Singh• 460

    @adityas24

    Posted

    Great job Tami! Your markup is well structured and naming of classes is also done in proper manner. But i did not what icon you are talking about?

    0
  • Carlos Zuluaga• 70

    @skarlos134

    Submitted

    can someone help me? when i have preview on VSC i can see the images, but when i upload to GitHub pages cant see any image

    qr card unsing flex

    #bem#itcss

    2

    Aditya Singh• 460

    @adityas24

    Posted

    When ever you upload your code to github or any other hosting portal take care that you have written the path according to "standard path rules". Here in your code remove the slash before images.

    Correct way of writing path would be <img src="images/image-qr-code.png" alt="" class="section--img--qr">.

    Marked as helpful

    1