Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 11 months ago

Responsive Product Preview Card

Kate•60
@ClickClickKate
A solution to the Product preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

It's been 9 months since I last coded something and I am proud that I got into the swing of it again.

I am proud that it is responsive, I feel like I am getting better at a mobile first design. This was the first time I used em and rem as relative units instead if px's.

I did this project in a weird way, I wrote part of it in codepen then transferred to vscode, and i didn't look at the style guide until late. Next time I will start with the style guide and build up from there.

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

I had no idea how to swap the images out between mobile and desktop. I had to do some google searches to figure that out with ID's. I haven't used images that much so I had to look up cover, contain etc and experimented with which one was correct.

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

I would like help with organisation - did I use too many div's, is the code easy to understand, is it professional? Does it look like a noob just threw it together LOL....I am trying to practice making sure it makes sense and is organised nicely.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Kris•90
    @ly-math
    Posted 11 months ago

    Hi Kate, I'm happy that you're back into coding, I was just like you, almost quit coding twice in these 2 years. Now I'm learning React.js. This is the first time I'm back to this website, you are the first one I saw, I'm not an expert but here some tips from me:)

    I've seen that you're struggling with responsive image, But you did good with display: none and display: block. But there is a better way with just 1 line html and no css involve:

    <picture>
      <source media="(min-width:1440px)" srcset="desktop.jpg">
      <img src="mobile.jpg" alt="..." > 
    </picture>
    

    You can just wrap your img with picture. as for the <source> is where you put your min-width and srcset is where you put your image link. Your original image will replace by the source image once it hit your min-width.

    Another thing to consider is that you should always put header tags in order for example: h1 >> h2 >> h3 >> ... so on. in this case, I've seen you put in h2 before h1. this is not good practice for SEO (Search Engine Optimization).

    You mention you've use alot of div, here's a list of what you can use in this situation for readability and SEO. Use article as a wrapper is also good practice as this card is also an article. Use section as a wrapper, i use this a lot when I have many section in my website. use main as wrapper, this should be your entire code wrapper except header and footer: e.g:

    <body>
        <header>
         <! --your header goes here.... -->
        </header>
        <main>
        <! -- everthing else here...... -->
        </main>
         <footer>
         <! -- your footer here..... -->
        </footer>
    </body>
    

    In this case you have only one card in the entire website so you could use main as the wrapper.

    hey, that's all from me Keep it up fellow developer.

    Marked as helpful
  • beowulf1958•1,970
    @beowulf1958
    Posted 11 months ago

    Congratulations on completing this challenge. The html is clean, uncluttered, easy to read. CSS is organized. I love the way you commented the CSS.

    A few suggestions. It doesn't render properly on my desktop--the desktop view doesn't come up, and it stays in mobile view (column-wise). You might want to adjust the media query to 780px so tablets get the desktop view.

    Also, when you press the button, the page behaves strangely. The background-color of the body changes to --sec-darkblue, as does the background color of the contenttext, rendering the heading and button invisible! You might need to take a second look at your active state on the button. (There is also an extra curly brace at the bottom of the css file; it doesn't seem to match anything. This might have something to do with it.)

    Try this:

      .btn:hover, .btn:focus, .btn:active {
          background-color: var(--sec-darkblue);
      }
    

    This worked for me. For extra fun, add the transition to .btn transition: 0.5s ease-in-out;

    Hope this helps.

  • Yacoub AlDweik•3,590
    @YacoubDweik
    Posted 11 months ago

    Hey Kate!

    Good Job after 9 months and this is the result it is amazing!

    I just wanna say that you can also use an element called picture and inside that you can put your images and set the media or the width let's say which you img 1 to be shown at it and the same applies for img 2, and there's a default case.

    You can also do that using a property called content: url( ) as it can change the actual img for the element ing itself.

    Another way is by setting a Div and change its backgroung-image according to the screen size.

    I also suggest that you start using BEM name convention for classes (look it up it's easy).

    And one last thing, do not use .btn:active cuz I believe this the reason for the bug that you have in your design, you will notice that when you click on the body background the color of it changes, so it is only :hover and not active or focus.

    Keep it up!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

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

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

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