Simple landing page created using flexbox

Community feedback

• 

  P

  Ld-monkey•140

  @Ld-monkeyPosted about 1 year ago

  Hi , I did the same project and for the newbies level I must admit it's a little bit difficult.

  After saw your github code, they are some points to improve or add :

  • use HTML5 syntax that helps you to structure HTML and CSS code ;) (header, main, section, footer ...),
  • for list use Unordered Lists tag <ul> example,

      <!-- Github code -->
      <div id="socials">
        <div class="socials"><i class="fa-brands fa-facebook-f"></i></div>
        <div class="socials"><i class="fa-brands fa-twitter"></i></div>
        <div  class="socials"><i class="fa-brands fa-instagram"></i></div>
      </div>
  
      <!-- Better -->
      <footer>
        <ul>
          <li><i class="fa-brands fa-facebook-f"></i></li>
          <li><i class="fa-brands fa-twitter"></i></li>
          <li><i class="fa-brands fa-instagram"></li>
        </ul>
      </footer>
  

  • Add a .gitignore in your github repository and excludes .DS_STORE (corporate apple file ;)),
  • Use classic reset css property example here,
  • Think mobile first good article here,
  • Use var CSS function var(),
  • Don't use position absolute or relative to structure website. The modern approach is to use the Flexbox or Grid properties to arrange the whole website (header, main, section, etc..). Only for small details can we move elements (I'd even say at the atomic scale of the element) using the absolute or relative properties if necessary.

  Keep going good luck :)

  Marked as helpful

  0