Submitted 7 months ago

Single Price Grid Component

verakissyou17• 380

@verakissyou17

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

○ Any improvement for this project is welcome

Community feedback

Osman Bay• 690

@osmanbay90

Posted 7 months ago

Hello @verakissyou17,

Don't worry, we're all beginners on this journey.

Dealing with classes can be challenging, but I highly recommend learning BEM methodology if you want to have better control over them. I'm currently in the process of learning BEM myself. Additionally, you can explore frameworks like Tailwind if you prefer to avoid dealing with too many classes directly.

here is link for BEM methodology

Marked as helpful

verakissyou17• 380

@verakissyou17

Posted 7 months ago

@osmanbay90 I didn't passed to learn frameworks, because I think I have to master the basics of the HTML, CSS and JavaScript first and then to try to learn them. I don't know what is BEM, but for sure I will try to learn it, too. Thank you so much for your help!

Bishal Singh Deo🎮• 1,440

@Bishalsnghd07

Posted 7 months ago

Hi Vera

Amazing Work👏 and congrats for completing this challenge🎉

I have only 1 suggestion for you, give some padding on body. So, that your layout should look much better in mobile view.

Adding one more thing into it, I saw your your code you used br tag many time to break the paragraph text and making it into different line, instead of that you can use much better approach by giving max-width so that your paragraph text will wrap in different line and work as same as br tag.

Hope this suggestion would help you. Other than that great work👍

Marked as helpful

verakissyou17• 380

@verakissyou17

Posted 7 months ago

@Bishalsnghd07 Why is better to use max-width on the p tag and not br? Thank you for your feedback and suggestions! 🤗

Bishal Singh Deo🎮• 1,440

@Bishalsnghd07

Posted 7 months ago

@verakissyou17 cause you used br tag a lot of time why you used that much time, why you reduce your web page loading time, you just by using max-width only one time and it will wrap your paragraph in different lines, that's you wanted right and that's why you using br tag for wrapping the text in different line right?

Marked as helpful

verakissyou17• 380

@verakissyou17

Posted 7 months ago

@Bishalsnghd07 I used it to separate the lines. I didn't know this can slow down my loading page. That's why I asked you. To learn from people with more experience then me. Thanks a lot for your explanation! 🤗🤗🤗

Bishal Singh Deo🎮• 1,440

@Bishalsnghd07

Posted 7 months ago

@verakissyou17 My Pleasure❤️ My suggestion, always try to write less number of code and product more. In your code, productivity is less and code written is more, that does not give any value, but by changing this you will be in much better place. And I appreciate your learning enthusiasm👏

Marked as helpful

Osman Bay• 690

@osmanbay90

Posted 7 months ago

Hi @verakissyou17

Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

Consistency in Naming: Maintain consistency in naming classes. For example, you have right-side and left-side classes. Consider using a consistent naming convention like right-section and left-section.

Accessibility Improvements: Ensure that your button has proper text content. Currently, the <a> tag inside the button is empty. You should move the aria-label attribute to the <button> element and add descriptive text within the button tags for better accessibility.

Responsive Design: Ensure proper responsiveness on smaller devices. Currently, you have a media query for devices with a width less than 768px, but the condition should be @media (max-width: 768px) instead of @media (width < 768px). Check the layout and spacing on smaller devices to ensure readability and usability.

Optimization: Optimize CSS by removing unnecessary comments or redundant styles. Consider using shorthand properties where possible to reduce the size of the CSS file.

Typography: Check the line heights and font sizes for better readability, especially on smaller devices. Ensure proper contrast between text and background colors for accessibility.

Testing: Test your website across different browsers and devices to ensure compatibility and responsiveness.

Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

Marked as helpful

verakissyou17• 380

@verakissyou17

Posted 7 months ago

@osmanbay90 ● I really have big problems in naming classes. If you know something to help me , I would appreciate this. ● About the condition of my media query, I saw this on Kevin Powell's channel I thought I can use it too. ●I will review my CSS file to be more DRY. ●I have much to learn , I am at the beginning of my journey on coding. ● Thans for your feedback and advice!🤗

Please log in to post a comment

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