Fylo landing page two column layout challenge using HTML/CSS

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  Nice work on this challenge, Liny. Here is some feedback after taking a look at your code:

  • Your media query is currently set to @media screen and (max-width:700px) and (min-width:300px). In this instance, the min-width: 300px is actually unnecessary, so it can be removed.
  • Take a look at the project at a screen size of 701px. You'll see that the content looks very squashed. I'd recommend playing around with screen sizes as much as possible and adding breakpoints when the content looks either too squashed or too stretched.
  • You're using lots of IDs as selectors in your CSS. I'd recommend avoiding that as they have high specificity and cannot be reused on the page. Instead, I recommend sticking to class, attribute, pseudo, and type selectors.

  Let me know if you have any questions! 🙂

  0

  ---

  

  Liny Thomas•185

  @LinyThomasPosted almost 5 years ago

  @mattstuddert, Thanks for your valuable feedback.As you suggested I have removed the min-width option in the responsive part. I have also changed the max-width to 875 as the content was squashed at 701px. I have also removed all the IDs and added class and type selectors in their place.Hope now the code looks ok. I am really thankful to you for spending your time to review the code and it helps me a lot in learning .

  Thanks, Liny

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @LinyThomas you're welcome! Your code is looking much better now. Here are a couple more small recommendations:

  • I'd recommend giving your elements more meaningful class names. For example, .sec1 could be .intro. This not only helps you identify the different regions easier but also any teammates if you're ever collaborating on a project.
  • Have a go at clearing the accessibility errors that are currently showing up in the report. Building accessible websites is a key role of a front-end developer and so it's well worth practicing.

  0

  

  Liny Thomas•185

  @LinyThomasPosted almost 5 years ago

  @mattstuddert , As per your suggestion, I have renamed the classes to more meaningful ones and have also corrected the accessibility errors. Thanks.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @LinyThomas great work!

  0