Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
3

Johan

@JohanChereauFrance100 points

Hello 👋, I'm a passionate young developer who likes to dabble in everything. After two years of developing with Java and C, I'm joining the Web development adventure !

I’m currently learning...

HTML, CSS and JavaScript

Latest solutions

  • Responsive 3-column Preview Card | Semantic HTML & CSS, CSS Grid, BEM

    #bem#accessibility

    Johan•100
    Submitted almost 2 years ago

    0 comments
  • Responsive Interactive Rating Component | Semantic HTML, CSS, JS & BEM

    #bem#accessibility

    Johan•100
    Submitted almost 2 years ago

    0 comments
  • Responsive Results Summary | Semantic HTML & CSS, Grid, Flexbox, BEM

    #bem

    Johan•100
    Submitted about 2 years ago

    0 comments
  • Responsive Product Card | Semantic HTML & CSS, Grid, Flexbox, BEM

    #accessibility#bem

    Johan•100
    Submitted about 2 years ago

    0 comments
  • Responsive NFT Preview Card | Semantic HTML & CSS, Grid, Flexbox, BEM

    #bem

    Johan•100
    Submitted about 2 years ago

    0 comments
  • Responsive QR code component | Semantic HTML & Vanilla CSS, BEM

    #bem

    Johan•100
    Submitted about 2 years ago

    2 comments

Latest comments

  • ifeanyi•90
    @ifeanyiagujekwu
    Submitted almost 2 years ago

    mobile and desktop responsive

    1
    Johan•100
    @JohanChereau
    Posted almost 2 years 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
  • Rolando Luayon•80
    @JayrQtt
    Submitted about 2 years ago

    First-Qr-Code

    1
    Johan•100
    @JohanChereau
    Posted about 2 years 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
  • GintareSlusnyte•10
    @GintareSlusnyte
    Submitted about 2 years ago

    Only HTML and CSS were used

    1
    Johan•100
    @JohanChereau
    Posted about 2 years 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!

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub