Hello! I have tried to design the product preview card. I have a small doubt. Do I need to make different solutions for desktop and mobile, or both in the same file? If in the same file, I'm just getting started, so I don't know how to make it in the same file, and some helpful tips or resources will be really helpful. Feedbacks are most welcome here. Thank you.
Hello! Your question is quite valid, and it's a common consideration in web design. To create a responsive product preview card that works well on both desktop and mobile, you can indeed manage it within the same file. A helpful technique is to utilize CSS media queries. These queries allow you to define different styling rules for specific screen sizes. By incorporating media queries, you can ensure that your product preview card adjusts gracefully to various devices.
As you get started, here are some helpful tips to keep in mind:
If you found this comment helpfull, feal free to upvote :)
The wave background image was a bit challenging. Is there a more elegant alternative?
Congratulations on completing the challenge!
If you're aiming for cleaner and more concise code, you can employ a streamlined approach for setting the background image. By using the shorthand notation, your code becomes more elegant and easier to read. This single line combines multiple background properties, such as the image URL, no-repeat, position at the bottom, and covering the entire element, creating a more refined and efficient style.
background: url("../images/pattern-background-desktop.svg") no-repeat bottom/cover;
If you found this feedback helpfull , please feal free to upvote :)
I recently switched to Pro and I wanted to try a not too complicated challenge to have my first experience with Figma too, with the design files downloadable with the Pro sub, which has turned out to be a very useful tool especially if the goal is get as close as possible to the design of the challenge. Any feedback\suggestions on how to improve are welcomed, thanks everyone!
Congratulations on completing the challenge!
To enhance your solution further, I recommend exploring the possibility of obtaining the data from a JSON file instead of hardcoding it. This approach can make your application more flexible and maintainable by separating data from code.
Additionally, it's a good practice to thoroughly test your calculations by experimenting with various input values to ensure the accuracy and reliability of the result scores. This will help you identify and address any potential edge cases or issues in your implementation.
I would advise against using font-size: 62.5% as it can potentially lead to compatibility issues with third-party packages and pose significant migration challenges. If you're interested in exploring the topics of sizing and accessibility further, I recommend reading Josh W. Comeau's article, which provides valuable insights.
If you found this feedback helpfull , please feal free to upvote :)
feedback is welcome
Congratulations on finishing this challenge!
I would suggest you centering the main content-form using either grid or flex layout instead of using margin
example (grid):
body {
background-color: hsl(234, 29%, 20%);
font-family: "Roboto", sans-serif;
min-height: 100dvh;
display: grid;
place-content: center;
}
this way you will center the main container-form to the body.
I would also suggest for improved maintainability and efficiency in your styling, consider incorporating a custom CSS reset and custom variables.
If you found this comment helpful please feal free to upvote! :)
Congratulations on finishing this challenge!
Your code is well-structured and easy to follow. However, for improved maintainability and efficiency in your styling, consider incorporating a custom CSS reset and custom variables.
Custom CSS Reset: It might be beneficial to include a custom CSS reset at the beginning of your stylesheet. A CSS reset helps establish consistent default styles across different browsers, providing a clean slate for your styles. This practice can save you time and effort when styling elements. Custom Variables (CSS Custom Properties): Custom variables (CSS custom properties) are a powerful tool for making your code more reusable and maintainable. By defining variables for commonly used values, such as colors, fonts, or spacing, you can easily update styles across your entire project by modifying just a few variable values. This not only simplifies maintenance but also ensures a consistent look and feel throughout your application. Incorporating these practices can enhance the efficiency and maintainability of your CSS code, making it easier to work on both small and large projects.
If you found this comment helpful please feal free to upvote! :)
I found this challenge much more difficult than the last and am not confident that my code is as clean and efficient as possible - would love feedback!
Congratulations on finishing this challenge!
Your code is well-structured and easy to follow. However, for improved maintainability and efficiency in your styling, consider incorporating a custom CSS reset and custom variables.
Custom CSS Reset: It might be beneficial to include a custom CSS reset at the beginning of your stylesheet. A CSS reset helps establish consistent default styles across different browsers, providing a clean slate for your styles. This practice can save you time and effort when styling elements.
Custom Variables (CSS Custom Properties): Custom variables (CSS custom properties) are a powerful tool for making your code more reusable and maintainable. By defining variables for commonly used values, such as colors, fonts, or spacing, you can easily update styles across your entire project by modifying just a few variable values. This not only simplifies maintenance but also ensures a consistent look and feel throughout your application.
Incorporating these practices can enhance the efficiency and maintainability of your CSS code, making it easier to work on both small and large projects.
If you found this comment helpful please feal free to upvote! :)
