responsive using flex and media queries, no js used for hamburger menu

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Hey there, congratulations on completing this amazing challenge. You've done an impressive work with this project! 🎉

  I would like to share some of my suggestions regarding your solution's code that might help you improve it.

  • Use classes for elements so that they're easier to style. Avoid using tag/element selectors for projects like this. Also, NEVER use id for styling elements.
  • Don't use vw for setting font-size, margins and padding. Instead use rem which is much better for responsive design.
  • Use CSS variables/custom properties for making your CSS more efficient and cleaner.
  • Use a modern CSS reset to make your CSS better.
  • Use more logical font-size for your content. For example, take a look at the "Transform your brand" section.
    • The size of the heading is too small.
    • The size of the link is equal or higher than that of both the paragraph and the heading.
  • The live website has a small horizontal scrolling. It might be caused by the inconsistent width of the flex layout. Instead try using grid. It is now a better way to create amazing and responsive layouts. Here is an example code snippet.

  .section-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  }
  

  • Make sure to use meaningful tags for your HTML. For the footer, use footer element instead of div.
  • Consider using the a tag for links like the website's logo in the navigation bar and the footer.
  • The layout on the mobile screen is broken and the readability is extremely poor due to the tiny font size.
  • There are two dimensions of the image provided with the resources which you should use with appropriate screen sizes. On the desktop, the site should load the larger image and on smaller screens, the site should load the smaller image. This will improve the performance of your website and the user won't have to download a large image on a mobile phone. This can be done using the srcset attribute in HTML. Here's an example code-block:

  <picture>
  <source media="(min-width: 50rem)" srcset="folder/DesktopImageFile"/>
  <img src="folder/MobileImageFile" alt="my image" />
  </picture>
  

  Resources 📚

  • Post by Grace Snow about the id selector 📕
  • Article from DEV Community 📗
  • Article from freeCodeCamp about CSS variables 📘
  • Learn how to create amazing layouts with CSS Grid by Kevin Powell 📕
  • Learn more about semantic HTML 📗
  • How to use srcset attribute to create responsive images 📘

  Hope this helps you 😄

  1
• 

  Babalola victor ayomide•390

  @ZHADOW999Posted 6 months ago

  Nice job ! but i recommend you use grid instead of flexbox to have more consistent size with each box

  1