Equalizer Landing page (non-responsive Desktop version)

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Pay really close attention to html. The logo is the most important piece of content on the page (the name of the site/product) but you've hidden it from search engines and assistive technology

  Add to that

  • headings not in order
  • price as a heading when it should be part of a paragraph
  • social links aren't marked up as links so not clickable
  • no main or footer elements

  And really really important to start from mobile styles. You shouldn't be trying to create layouts like this with relative/absolute positioning and huge margins - start from mobile and work up without over complicating it.

  Remember images can be background images or in pseudo elements of they are decorative

  And rember never to put font size in px! Never. Use rem.

  Marked as helpful

  1

  ---

  

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  grace-snow it is important to also mention that rem stands for responsive em and the reason that it should be used is because it caters for a user preferences which is what should happen when you visit a website.

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @grace-snow Thanks a lot for the detailed feedback! One question about starting from mobile style. I thought the main idea was to start from the desktop and then scale things down using @media to fit the small screens.

  Will have to do the reverse?

  0

  

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Mabchir the convention is to code mobile first so that's why a lot of developers recommend coding mobile first since it takes a lot of the complexity away.

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @TheCoderGuru Ohh ok I will try it out ! thanks a lot !

  1

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @Mabchir mobile first will make your code shorter and more performant, especially for people using mobile devices.

  Think about it - mobile layout is generally one column, quite simple. So the base styles are short, simple and relevant for all screen sizes. Mobile browsers with poorer connections don't have to trawl through all the desktop styles before getting what they need.

  Then you only need to override specific layout properties inside min width media queries for the more complex larger screen layouts.

  Better all round

  Marked as helpful

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  For example, mobile styles a layout for a component might be a load of cards all stacked in one column. Then desktop they become display flex in the media query so they all sit in a horizontal row

  Marked as helpful

  0

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @grace-snow Thank you for the further explanation. that makes absolute sense!

  1
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey Mabchir, good job completing this challenge. Keep up the good work

  Your solution looks good however I think you should consider the following

  • The title has a bit too much line-height

  • the line break should be after the keyword music.

  • The paragraph that contains the copyright information within the footer section should be in line with the footer logo

  • The sentence "Controls bass, mids, treble, gain control, reverb and much more" that is situated below the website description should not have a line break to start on a new line

  In terms of your accessibility issues

  • images need alternative text, simply mention the alt attribute in the image tag and give a description of your description of your image. This will be useful for screen readers or if the image fails to load due to incorrect referencing.

  • heading levels should increase by one level, this means that if you have a <h1> then the preceding heading tag should be <h2>.

  • Wrap all your content between <main> tags to get rid of the rest of accessibility issues

  In terms of your validation errors, once you fix your accessibility issues the your validation errors should be resolved.

  In addition I recommend that you start using html semantic tags if you haven't been using them already as they will greatly improve your code quality and get rid of accessibility issues.

  You can read more on html semantic tags here

  https://www.w3schools.com/html/html5_semantic_elements.asp

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0

  ---

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @TheCoderGuru Thank you so much for your detailed feedback ! really appreciate your time !

  0
• 

  Harmanjot Singh•985

  @arkharman12Posted over 2 years ago

  Try to make the page responsive.

  0

  ---

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @arkharman12 i need to fix the current issues first that's why I didn't make it response yet. Thanks for your comment

  0
• Account deleted

  I liked it keep it up!

  0