flexbox

Community feedback

• 

  Eugene•135

  @Eugene44-hubPosted about 3 years ago

  ok thanks very much. i really appreciate your reply

  0
• 

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted about 3 years ago

  Hey, I think this is a pretty great solution, it's really responsive and good looking! I only have but a few issues to address.

  1. I noticed that your font-size was a bit too small for some of the sections which makes it hard to read the contents. I suggest using a font-size of 16px instead of 14px on the body. And also increase the font-weight of some of the items to make them visible.
  2. Incase you need to use an attribute more than once, I suggest that you use a class instead of an ID to avoid duplicate ID's
  3. When you are changing header tags, they have to change in a sequential order that is (h1, h2, h3...) so It would have been better if you used h2 instead of jumping right to h3.
  4. You should also place your elements within landmarks like sections, articles... this eases accessibility for those using screen readers.
  5. Incase you are adding an image in your html, consider writing the code like this "<img src="./image directory" class="image-class" > this will prevent any HTML errors in your code. Otherwise, this solution is really awesome, kudos! Keep on coding!

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  • your heading elements has to ascend in order without skipping. h1, h2, h3 etc.
  • this div <div class="toggle"><img src="images/icon-hamburger.svg" alt=""></div> will not be accessible as a button to keyboard and screen reader users in its current state
  • using uppercase <h3 id="testimonial-section">CLIENT TESTIMONIALS</h3> is not beneficial to assistive technology users. The words will be read letter by letter, use css to transform words into uppercase.
  • semantic html elements like header, main , footer, nav are considered important that just a div. Avoid divs where possible and use semantic html.
  • the following should have been a navigation list in the footer

   <div class="col10">
                  <div class="ABS">
                      <div id="about">
                          <p>about</p>
                      </div>
  
                      <div id="service">
                          <p>service</p>
                      </div>
  
                      <div id="project">
                          <p>projects</p>
                      </div>
  
                  </div>
  

  0

  ---

  

  Eugene•135

  @Eugene44-hubPosted about 3 years ago

  @ChamuMutezva thanks i will learn to do that. I really appreciate

  0