All solutions

It's a (nearly) pixel perfect solution and I hope it works on your machine as well as mine... Naming modifier classes is difficult for me, I need to work on it. I followed the CSS first design perspective by Jeremy Keith that he explains in the CSS in depth book. I highly recommend this book to improve your CSS skills. I checked some good solutions and I changed my current tags to more semantic way. I know there are a lot of things that can be improved...

Any feedback is welcome, thanks...

Hi there. It's a pixel (nearly) perfect solution and I hope it works on your machine as well as mine. You can check out my code and work on it with this link: replit.com

I learned many things even this small project, damn CSS you scare me lol...

Hi there, I've always been afraid of list elements. It's a good project to face my fears lol. I hope, it's the pixel (nearly) perfect and it works on your machine as mine.

• You can easily copy and work on my code on replit.com with this link

Hi there, I missed 1px from the image... It should be 200px but it is rendered as 201px. idk why, lol... I should work on the rendered images...

Hi there. After a year of working on frontendmentor.io projects, I wanted to record my process with this project. I focused on readable and plain code and it took so much time lol...

I tried to use CUBE CSS and fluid type units. It took many hours of work, but I'm happy with the result. I know it's not a big deal, but I think I passed another a milestone. I learned that line-height:normal is not equal to line-height:1.5 lol. line-height:normal depends on the font family, but for desktop browsers it's usually `1.2'.

I think the biggest problem with CSS is writing readable code. I spent many hours on this and found this method CUBE CSS by Andy Bell. You can organise your CSS code according to on design tokens and use them in your code. This brings CSS and design closer together. You get clean, readable, scalable, and maintainable CSS code.

• To create fluid type units: https://utopia.fyi/
• The official CUBE CSS documentation: https://cube.fyi/
• To deeply understand how to code CUBE CSS: Learn by doing: CUBE CSS

• Thanks to Grace Snow for sharing the resource on CUBE CSS. @grace-snow

Hi, everyone. I've finished the project. I'm really exhausted but I learnt a lot of things. It's a really tough project. There are lots of challenging things here.

I couldn't position the images correctly. I gave up. I'll check some good solutions and improve my code.

I don't understand the accessibility message. What should I do?

Thanks.

Hi, everyone.

I spent some time on this project and touched on the first solution. I know there are a lot of things here to fix. I couldn't set the image's brightness and my responsive design is so weak. I hope I can check some good examples and implement them to the second version of this project.

Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

Hi, everyone.

Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

Hi, everyone.

I couldn't set why-us area's background-color. I have figma file but it didn't work for me. I hope this background-color style is a minority.

I have a little bit progress on responsive design. Thanks to Grace Snow's feedback and Kevin Powell's Conquering Responsive Layouts mini course, I found it on the resources page at frontendmentor.io. I highly recommend this course if you have some trouble with responsive design like me. Conquering Responsive Layouts

Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

Hi, everyone.

This is my second solution to the project (the mobile first again). I got a huge feedback from Grace Snow and fixed some bugs according to them. I tried to solve some problems with responsive design. I guess this solution is a progress. I know there are lots of issues still here. I hope I can find and fix them. Thanks...

Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

Hi everyone.

I've just finished the project. I got so many experiences here. This really works for us. I tried some modern properties like minmax() for layout but I couldn't use them properly, I'll try them later and I still couldn't solve the shaking problem. I think there are some strange properties in the design file like button's text position or cart positions etc. Should I push myself for that, are these the parts of the hard level challenge? If I push myself for these, my code will become non-readable. I don't want to change my clean version or there is a clear solution somewhere, idk.

I also have a major problem. How can I use the h1 tag on this page? Should I keep the pattern or can I add the h1 tag to some titles? Do I need a hierarchy here?

Thanks.

Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

(Note: I separated style.css and media-queries.css for easy to read to code. I'll merge them later.)

Hi everyone,

I upgraded my solution based on good comments and other solutions. Thanks for that... It looks better now. However, there is no end to this work, right...

I'm not sure, can I use width and height values for my container elements like section-card? I'm still struggling with responsive design :(

And I don't know why my text area is shaking, I don't want it to appear this way but I couldn't fix it.

Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

(Note: I separated style.css and media-queries.css for easy to read to code. I'll merge them later.)

Hi everyone, I couldn't set the background-color like the design file. How can I do that? Thanks. Any comments, critique, advice is greatly appreciated.

Hi, everyone.

I tried the mobile-first design for this solution. And I spent lots of time on it. I had some trouble BEM and I gave up. I'm not ready for BEM:) I focus on a simple solution. It should be basic and clean.

Anyway, I can't align the background image for the mobile version. How can I do that?

Thanks.

Any feedback/thoughts are greatly appreciated!

Hi everyone, I really spent a lot of time on this but I couldn't finish it, so I gave up... Maybe I should focus on some specific topics like responsive design... However, this project improved my coding skills a lot. I feel that.

I have two problems here: 1 - How can I make this project responsive? Should I change every element or just some container elements? I couldn't understand it.

2 - How can I use .svg files as a background image? This topic is totally new for me. I checked some resources on the internet but I don't understand them.

Until I finished my code, I changed my main structure a lot. I still have a problem with my nested structure and class names in HTML.

I'll wait for some good responses from the community like my first project. They're so beneficial to me. Thank you so much.

I've changed my very first project according to some good advice. This time, I can't understand why my text area is higher than the design file's text area. I checked my elements positions and they are in the same positions as the figma files. What should I do? Thanks.

Also, are the nested structure of the semantic containing elements and BEM notation correct?

Thanks again.