Responsive Social Page using HTML & CSS

Community feedback

• 

  Marzuk Sanni•1,360

  @ZukizukPosted 10 months ago

  Hello there, Congratulations on completing this project

  Your solution looks nice

  I have few suggestions that I think might be of interest to you and help improve your code more.

  - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="container-fluid"> with <main class="container-fluid">. the main tag should hold the main content of the page so consider correcting that.

  The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience.

  Also, your use of heading tags like <h1></h1> and the like was wrong. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. And also you shouldn't skip them, like moving from H1 to H3 like you did is not the best of practices. So consider replacing the h3 with h2.

  - CSS: In your css, I can see that you gave margin to the body tag which is not a good thing to do. Instead you can give padding to the body and that's fine and won't cause any unexpected behavior, in fact there's a lot to fix so let us address the ones we can here now and the rest you can check my solution of this challenge use it however you like /my-solution.

  • First of all, don't do this

              @media html{
                  min-width{
                      width: 375px ;
                  }
                  max-width{
                      width: 1440px;
                  }
              }
              html{
                  background-color: hsl(0, 0%, 8%);
                  font-family: " [Inter](https://fonts.google.com/specimen/Inter)";
                  font-weight: 400, 600, 700;
              }
  

  We don't style the html tag itself, the styles we usually put in there will be something like this html {scroll-behavior: smooth;} and some cases width: 100% I don't want this feedback to be long so I will advice you check my code and if you don't get anything reply to this comment and I will help however i can.

  I hope this feedback is helpful

  Other than that great job

  1

  ---

  

  moholeng•20

  @Mokoena2000Posted 10 months ago

  @Zukizuk Thank you so very much your feedback was very helpful and eye opening you really gave me a new and more effective way of going about my project, ill implement everything you explained and come back to you to inform how it worked out. yet again thanks for the help and i hope you assist more people

  0

  

  Marzuk Sanni•1,360

  @ZukizukPosted 10 months ago

  @Mokoena2000 Sure, I hope my solution helps and don’t forget to reply if you don’t get anything

  1

  

  moholeng•20

  @Mokoena2000Posted 10 months ago

  @Zukizuk So im trying my best to not look at the code itself but the solution and the tips you gave mt and how i can make mine resemble it .. once im done and comfortable with it ill send it trough

  0

  

  Marzuk Sanni•1,360

  @ZukizukPosted 10 months ago

  @Mokoena2000 Ok you can do that too after that you compare Good luck!

  0