Responsive solution for the first challenge using CSS Flexbox

Community feedback

• 

  Muhammad Faraz•240

  @Faraz74MughalPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  Enhancing your code, following good practices, and making it cleaner and shorter are key aspects of writing high-quality code. Here are some tips to help you achieve these goals:

  • Use HTML elements that accurately reflect the purpose and meaning of the content.
  • Use headings, paragraphs, lists, and semantic tags to structure your content hierarchically.
  • Ensure your HTML code is accessible to all users. Use appropriate markup for images, provide alternative text for visual elements.
  • Use consistent naming conventions, such as BEM (Block Element Modifier) or SMACSS (Scalable and Modular Architecture for CSS)
  • Give your elements meaningful and descriptive class and ID names. This helps with code readability and makes it easier to style your elements with CSS.
  • Combine selectors that share common styles to avoid repetition. This reduces the amount of code and makes it easier to maintain and update styles.
  • Consider using CSS preprocessors like Sass or Less to take advantage of their features, such as variables, mixins, and nesting.

  By following these practices and guidelines, you can write cleaner, more maintainable, and efficient HTML and CSS code for your projects. Remember to prioritize readability, modularity, and performance when developing your front-end code.

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Marked as helpful

  0

  ---

  

  MarioP•30

  @quijotexPosted over 1 year ago

  @Faraz74Mughal Oh, thank you! I'll take into account each time I write my code!

  1
• 

  Umut Yılmaz Gündüz•150

  @UmutYGPosted over 1 year ago

  Hello there, Congrulations for the amazing work! I have some tips for you for a cleaner code:

  • Consider applying given font-family on the body to get a better matching design! (Use google fonts if needed)
  • Use rem unit instead of pixels, later this will help you to build responsive websites easily.

  @media screen and (min-width: 576px) {
  .main {
  display: flex;
  justify-content: center;
  }
  .main_div {
  width: 65%;
  height: 65%;
  }
  }  
  @media  screen and (min-width: 768px) {
  
  .main {    // => NOT NEEDED
  display: flex;
  justify-content: center;
  }
  .main_div {
  width: 40%;
  }
  }
  

  When using queries, you do not need to apply same css on the rules apply at the same time, for example, at the 800 px width both of the queries apply so you do not need to apply same css rules for the main, you can just focus on different and more special css rules. I hope this helps! Good luck and good job!

  Marked as helpful

  0

  ---

  

  MarioP•30

  @quijotexPosted over 1 year ago

  @UmutYG wonderful! Thanks for your recommendations. I'll change my code considering this.

  0