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

Order summary component solution

Varsha 10

@VarshaRajS

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The questions I would like to ask the community are as follows:

What are the best practices while writing code? How to write structured code and does it have an effect on how the website works?

The problem I usually encounter is that I keep forgetting some of the concepts. How to become strong in my CSS fundamentals such as grid and flexbox?

Community feedback

@Khawarmehfooz

Posted

Hello there! It's great to see your enthusiasm for improving your coding skills and deepening your understanding of CSS fundamentals. I'd be happy to share some insights and tips with you. Let's dive in!

When it comes to writing code, following best practices can significantly improve the quality and maintainability of your work. Here are a few key recommendations:

  • Consistency: Strive for consistency in your code formatting, naming conventions, and code organization. Consistent code is easier to read, understand, and collaborate on.

  • Modularity: Break your code into reusable and independent modules or components. This approach promotes code reusability and makes it easier to update or modify specific parts of your website without affecting the entire codebase.

  • Readability: Write code that is easy to read and understand. Use meaningful variable and function names, add comments when necessary, and structure your code in a logical and coherent manner.

Remember, these best practices are not set in stone, and they may vary depending on the specific project or development environment. Keep learning, stay open to feedback, and adapt your coding style as you grow as a developer.

CSS fundamentals such as grid and flexbox are powerful tools for creating responsive and visually appealing layouts. Here are some tips to strengthen your understanding of these concepts:

  • Documentation and Tutorials: Start by revisiting the official documentation for CSS grid and flexbox. Understanding their properties, values, and usage is essential. Additionally, there are numerous tutorials and online resources available that provide practical examples and exercises to deepen your knowledge.

  • Hands-on Practice: The more you practice, the better you become. Challenge yourself to build small projects that focus specifically on CSS grid and flexbox. Experiment with different layouts, responsive designs, and complex arrangements. This hands-on approach will help solidify your understanding and boost your confidence.

  • Code Reviews and Feedback: Engage with the coding community by seeking code reviews and feedback on your CSS projects. Platforms like Frontend Mentor are great for this. Embrace constructive criticism and learn from more experienced developers who can provide valuable insights and suggest improvements.

  • Build Real-World Projects: Apply CSS grid and flexbox in real-world scenarios. Take on frontend development projects, both personal and professional, that allow you to practice and refine your skills. The practical experience gained from building complete websites will greatly enhance your understanding of CSS fundamentals.

  • Stay Updated: CSS is continually evolving, and new features and techniques are introduced regularly. Stay up to date with the latest CSS trends, explore new CSS frameworks and libraries, and participate in relevant online communities to keep expanding your knowledge.

Remember, mastering CSS fundamentals is an ongoing process. Embrace the learning journey, be patient with yourself, and celebrate each milestone you achieve.

Happy coding and may your CSS skills flourish! Feel free to reach out if you have any more questions or need further guidance.

Marked as helpful

1

@bally4h

Posted

Good questions.

But I think you are at the right place, the frontend mentor.

I do the following: I try to finish the challanges only me, with out any help. Only if I face something really new (position: absolute in my last challange) I google it and try to memorize.

After I finish my project, I start to analize the codes of the others and take some question to myself. Which code is better? My solution with the margin-bottom, or the other with the grid-row-gap? Which looks better? Which is faster? Where I need to type/read more? Which code is more simplier, better to understand? And I google it and read the best cases for the situations.

After these I start to change my old code to have a better solution. This step is needed to have experience. And after I start my next challange and try to use the new knowledge and try to write better code.

I hope this helps you be better.

Marked as helpful

1

@arifaisal123

Posted

I am adding my two cents here based on my experience.

Q- What are the best practices while writing code? How to write structured code and does it have an effect on how the website works? A- Best practices or conventions vary in different programming languages, such as- PEP8 style guide is often followed for python language. In the case of HTML/ CSS, developers often refer to Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/CSS). As you practice more projects, these patterns will become common to you.

No, the style does not affect how the website looks and works, but the structured code is preferred for its maintainability.

Q- How to become strong in my CSS fundamentals such as grid and flexbox? A- Practice as many projects as you can. Frontendmentor site has good examples that you can practice. Don't get into the frameworks too early. Get comfortable with grid and flexbox, and then move onto the popular frameworks, such as - Bootstrap.

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