Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Simple landing page created using flexbox

Andrea 10

@amgallo1213


Design comparison


SolutionDesign

Solution retrospective


I'm still struggling with making my code responsive and am looking for a good resource that explains how to do it. Thank you!

Community feedback

P
Ld-monkey 140

@Ld-monkey

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord