Skip to content
OverviewSolutions
15
Comments
3

Olena

@helenhapp190 points

Ukrainian, CS student, aspiring full-stack web developer

I’m currently learning...

HTML, CSS, JavaScript

Latest solutions

View more solutions

Latest comments

  • Olena•190
    @helenhapp

    Hi.

    Congratulations on completing the challenge!

    I see you added both images in your HTML file and used CSS to toggle between them with display: none;. This is not the best practice. I suggest that you read "The picture element" article on web.dev. Here's a code example from it that shows how to display different images for different screen sizes:

    <picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image.">
</picture>

    Also, instead of writing <span>P E R F U M E</span> like this in HTML, its better to write <span class="category">Perfume</span>, so that the screen reader reads it as a word and not separate letters (to keep your website accessible), and then style it with CSS like this (as an example):

    category {
    text-transform: uppercase;
    letter-spacing: 5px;
}

    Text-transform: uppercase; turns all letters to uppercase and letter-spacing adds some space between them.

    I hope this is helpful. Happy coding!

    Marked as helpful
  • Olena•190
    @helenhapp

    Hi!

    Congrats on completing this challenge.

    Overall, your solution looks great. But if you open it with developer tools (Ctrl + Shift + I on Windows) and try how it looks on different devices, you can see that the card might be a bit too wide on some mobile devices. However, the width you set looks great on a wide screen. To set different widths for different screen sizes you can use the CSS @media rule, which might look like this (as an example):

    .container {
    max-width: 360px;
    ...
}

@media (min-width: 400px) {
    .container {
        max-width: 384px;
    }
}

    I also suggest you use max-width instead of width to make the content more responsive.

    I hope this is helpful. Happy coding!

    Marked as helpful
  • P
    David Blackman•140
    @defenstration
    What are you most proud of, and what would you do differently next time?

    I am happy to have taken this step down the road towards frontend development. I have a lot to learn, but I'm excited to keep going.

    In future projects I'll use more technologies and frameworks. Next time I am going to pick a challenge that requires javascript.

    What challenges did you encounter, and how did you overcome them?

    I tried to overuse flexbox in this project, and the spacing got weird. I cut down on it and the project was much easier.

    What specific areas of your project would you like help with?

    I have a couple of items in my reset that I know don't need to be there for this project, but are things I am trying to set to include by habit. I find myself overcomplicating things in my coding, so tips on streamlining code is always something I am looking for.

    QR code component solution - HTML and CSS

    3
    Olena•190
    @helenhapp

    Hey there! 🙋🏽‍♂️

    Congrats on completing the challenge! ✅

    Your project looks fantastic!

    The screenshot looks very close to the original design. But I see that you changed the code since then and added the h1 element before the main, and it messed up the layout. If you want to have the h1 element on your page for accessibility purposes but do not need it for the part of the website you are developing (like the QR code component), you can hide it from visual display using CSS like this:

    .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

    Hope this helps!

    Keep up the great work!

    Marked as helpful