Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing Page using Flexbox and Basic Css

@as90695

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challange helped me in understanding flexbox. I have been facing difficulty in writing mobile responsive layout. but with the help of project like this I am able to do Practice my css skills.

Community feedback

@Dinil-Thilakarathne

Posted

Hey there! Great job on completing the challenge! 🎉

Firstly, it's good to see that you are using modern CSS techniques like flexbox and media queries to create a responsive layout. This demonstrates a good understanding of CSS fundamentals. Your use of box-sizing to ensure that padding and borders don't affect the overall size of your elements is also a best practice.

  • Use meaningful class names that describe the content or purpose of the element you're styling. .

I hope these tips are helpful for you!

Here are some suggestions to improve the cleanliness of your code:

  • One area where you could improve is in your naming conventions. While some of your class names are descriptive (e.g. "pic-main"), others are not as clear (e.g. "desc"). It's generally best to use descriptive class names that make it easy to understand what an element is without having to look at the CSS.

  • Here, you can specify the radius values for each corner of an element in a clockwise direction starting from the top-left corner. For example: border-radius: top-left top-right bottom-right bottom-left;

Using shorthand properties like "border-radius" can make your CSS code more concise and easier to read, while also helping you to write code more efficiently.

Overall, your code looks clean and well-organized, and it's clear that you have a good grasp of CSS fundamentals. Keep practicing and experimenting with new techniques, and don't be afraid to try new things and push the boundaries of what CSS can do!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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