News Homepage (CSS + JS)

Community feedback

• 

  Tryt4n•960

  @Tryt4nPosted almost 2 years ago

  If you resize your screen the read more <button> is acting weird. You can add width: fit-content and then it would be always the same size. Also you can add transition on every interactive element on your page so the change from one color to another wouldn't be immediate.

  Marked as helpful

  0
• 

  BÌnh•130

  @Binh2Posted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Congrats on completing your first junior challenge! 🙌

  Answer to your question: you could set .dimmer { background: black; } and use JS to add to style attribute opacity: 0.7;. Not much different to your original way :v ...

  I have 7 suggestions for you:

  1. Fix: Change color to match design image `h1, h4 { color: hsl(240, 100%, 5%); /* Very dark blue */ }
  2. Fix: You should not use <h1>, <h2>, <h3>, <h4> carelessly because "New" is not the sub-heading of "The Bright Future of Web 3.0?" so "New" can't be used with <h2> tag but it should use <h1> tag instead. You should think about when to use <h1>, <h2> and use class attribute to style instead.
  3. Fix: FrontendMentor, RIP English. Change <h2>New</h2> to <h2>News</h2>.
  4. Improvement: For font-size, you should use :root { font-size: 16px; } for your base element, use rem for your block and use em for your element inside your block. When you do it like this, people with eye problem could resize your font-size with Ctrl +/-.
  5. Improvement: For class attribute that being used in JS. You should probably add js- prefix to it like this navbar -> js-navbar. Because if someone ever to decide they want to work with you. They could rename class attribute value. Now, your JS doesn't work anymore :v.
  6. Improvement: Change <div class="attribution"></div> to <footer class="attribution"></footer>.
  7. Alternative: You could use <div>01</div> instead of <span>01</span> because both of them are non-semantic tags. But <div> tag add a line break after your content.

  If you have any questions or need further clarification, feel free to reach out to me.

  Really well done on your part. I try to find errors. But there's not much to be found.

  Happy Coding! <3 😊

  Marked as helpful

  0

  ---

  

  Talasa•130

  @TalasaDevPosted about 1 month ago

  Thank you so much, Binh. I really appreciated the time and effort you took to review my code. Your feedback is carefully detailed and I will implement it to improve my code.

  Happy coding!

  0