Frontend Mentor | Kris's profile

All comments

@ClickClickKateSubmitted about 1 month ago

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.

Responsive Product Preview Card

Kris•90

@ly-mathPosted about 1 month 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

yagnik0•420

@yagnik0Submitted 12 months ago

I've tried too as much as precise and close to the design and manage to complete this challenge.🚀 But still my background image not being getting responsive to the mobile design any help regarding my code optimization and background image would be great.! 😌

Happy Coding !!🫡

FAQ-Accordian

Kris•90

@ly-mathPosted 12 months ago

Hey, nicely done, I've noticed you mentioned that your background img not being responsive for small screen is because, you didn't set @media for smaller screen size. And there is another Background image for smaller screen in the "Images" file. Here's an example:

@media (max-width: 600px) {

 body {

    background-image: url(assets/images/background-pattern-mobile.svg);

}

}

You can set the min or max-witdth to whatever suit your project. I'm not a professional but Hope this help :)

Marked as helpful