Skip to content
OverviewSolutions
6
Comments
3
Johan
@JohanChereau

All comments

  • Johan•100
    @JohanChereauPosted about 1 year ago

    Hello @ifeanyiagujekwu 👋,

    Well done for completing the challenge!

    To display your images, you can simply change the src attribute of your images by removing the first slash.

    Simply replace : <img src="/images/image-equilibrium.jpg"> with <img src="images/image equilibrium.jpg">. Same thing for your card footer: <img src="images/image-avatar.png">.

    For accessibility purposes, don't hesitate to use more descriptive alt tags rather than a simple "image" ;)

    Happy coding! 🙏

    Marked as helpful
    1
  • JayrQtt•80
    @JayrQttSubmitted over 1 year ago

    Feel free to comment I'm happy to read what mistakes I've done and just tell me what should i do next or tell me what should i study to develop my skills

    First-Qr-Code

    1
    Johan•100
    @JohanChereauPosted over 1 year ago

    Hello @JayrQtt 👋

    Well done on this challenge!

    From my point of view, what I can advise you is :

    • to avoid putting divs everywhere and instead use semantic tags. They are useful for giving more meaning to the content of your web page, so they offer better accessibility and better SEO. If you'd like to learn more, go here: MDN Documentation. Divs aren't forbidden at all, but you should try to use HTML semantics as much as possible. ;)

    Here's an example with your code:

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

    You can also replace the <div class="card"></div> with the <article></article> tag. If you use divs, try to give them explicit class names, as this will help you find your way around your code better, especially on larger projects!

    • Also, to center your elements horizontally and vertically, take a look at Flexbox or CSS Grid, they'll make life easier 😉.

    As for CSS, I avoid, as far as possible, giving fixed widths and heights (in pixels in particular), whether for your card or your image. Even if, for the purposes of this challenge, there isn't much in the way of responsiveness to worry about, (apart from screens smaller than 375px), I'll give you a few tips that may come in handy in your future projects:

    • For example, for your card, you can block the width of your card with max-width: 370px; This means that it will stretch to 370px and won't go beyond that, so there's no need for width in this case.

    • When it comes to images, we prefer to use percentages whenever possible, such as width: 100%; so that your image takes up the entire available size of your parent element.

    Other small errors: for example, on line 14 you've opened an h2 and closed it with an h1, or on line 17 it looks as if there's a closing div tag that isn't open.

    These are just a few tips that you can apply (depending on your projects) with practice, and this is only my point of view!

    Please feel free to correct or add to my feedback.

    Don't hesitate if you have any questions! Good luck and happy coding!

    Marked as helpful
    0
  • GintareSlusnyte•10
    @GintareSlusnyteSubmitted over 1 year ago

    Hello, I am not sure about the media width. I mean, the cards measurements and colors fits for all sizes, should I really use both dims?

    Only HTML and CSS were used

    1
    Johan•100
    @JohanChereauPosted over 1 year ago

    Hello @GintareSlusnyte 👋

    Well done for the challenge!

    As you said, the card design is the same whatever the screen size. Just in case, I'd like to precise that the widths given in the design file are the widths of the screens with which the designs were made, not the widths of the card.

    For this reason, I don't think it's necessary to use media queries here. You can simply code the style of your card once, and add a max-width to lock its width for all larger screen sizes. This will allow you to:

    • Avoid repeating your code twice in two different media queries.
    • Make sure your card doesn't break when the screen size is less than 375px.

    So you've got your section:

    section {
background-color:hsl(0, 0%, 100%);
border-radius: 15px;
box-shadow: 0 0 1px 0;

/*Style that was in the media queries copied here:*/
margin: 150px auto;

/*width: 300px; replaced by max-width to lock card width at 300px maximum.*/
max-width: 300px;
height: 450px;
}

    and your image :

    section > img {
border-radius: 12px;
height: 250px;
margin: 20px 25px;
}

    As for the image, personally I'd avoid giving it a fixed height in pixels. Instead, I'd opt for a width: 100%; this way, the image will always take up 100% of the width of its parent (which is the card) and its size will automatically adapt.

    • To center your card horizontally and vertically on your screen, don't hesitate to have a look at Flexbox or CSS Grid, they might come in handy 😉

    Don't hesitate if you have any questions. Happy coding!

    0