html, javascript, grid, flexbox

Community feedback

• 

  Michael Bishop•1,080

  @MikeBish13Posted over 2 years ago

  Great job on this project. Your solution matches up pretty well to the design, so well done.

  I've tried to answer your specific questions below:

  • I'm not sure what you mean by the top border of the hamburger menu, but happy to take a look if you can clarify or expand on the question

  • The easiest route to better responsiveness/less code is to style your page mobile first, ie style the mobile design first and then work upwards by including @media statements with a min-width. You'll find that in the long run this will save you a lot of code. There's also another reason for you using a lot of code in this project - see below

  • I think you're making this project a lot more difficult for yourself by using generic CCS classes for everything, and then trying to shoehorn the design into your CSS by using very complicated CSS selectors, eg #grid-section .flex-container:nth-child(3) .card:nth-child(1) .display-content h3. With a few extra classes added to some of your components, the styling would be a lot easier for you to code and a lot easier for somebody else to read. For example, the third section of your grid-section is stylistically very different to the other two sections, so why not give it some extra classes, rather than you having to use absolute positioning? For what it's worth, I think this project could easily be complicated without using a single position: absolute.

  Hope that helps and keep up the good work!

  Marked as helpful

  0

  ---

  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  @MikeBish13 thank you!!!

  0
• 

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  Hey, great job!

  I have some suggestions regarding your solution:

  HTML / Accessibility:

  • Always make sure to put alternate text using alt attribute for images (img tags). Even empty, if an image is mainly decorative. It means a lot to screen readers, search engines also when image on user's browser cannot load for some reason.
  • type attribute is unnecessary in your script tag. Script tag is JavaScript tag by default.
  • Always make sure to put a lang attribute in your html tag to declare the language of your site.
  • Headers (h1, h2 and so on) should be decreasing by one and should start with h1. You can change their font-size in CSS, what you know. This means a lot to search engines and screen readers, which need to search through content by headings.

  CSS / Design:

  • I would suggest you to add subtle transition effects for when user hovers over an link or button.
  • I think is better to have everything in the same file (CSS) and use media queries inside. It's good to keep styling in CSS only. (not CSS and HTML)
  • I can suggest you learning about Sass/SCSS and/or BEM to make your code more readable and maintainable. It would be hard to maintain this CSS, if someone who didn't wrote this code would try to do it.
  • Try to avoid using things like :nth-child or :nth-of-type. It makes code hard to maintain, when something is changing inside HTML. Make another more specific class for element. For example <div class="flex-container flex-container-cherry"></div>
  • To make your design responsive easier, you can sometimes alternate between flex and grid, so all flex or grid properties will be gone and it would be easy to style for different screen sizes. But the most important thing in doing responsive designs is good planing and practice.

  Hope this helps! Keep coding and have a nice day! :)

  Marked as helpful

  0

  ---

  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  @GrzywN

  thanks

  0