Day 10

Progress on my landing page - added icons and made header sticky

Working on the Build a Product Landing Page project on FreeCodeCamp.

This project requires me to re-create a landing page on CodePen that is functionally similar to this, using HTML and CSS elements.

You can view my progress so far on CodePen here!

What I learned:

  • I added the icons, using the Font Awesome 5 Icons, following the tutorial on W3 Schools that I talked about in my blog yesterday. I’m pleased with how they look! I couldn’t find the first one exactly, so chose something similar.
  • I have added position: fixed to the header, but this means that this overlaps the main body of the text (so the top part of the hero is missing). I tried to use position: sticky but it didn’t work. I am going to work on this tomorrow to figure out why this is happening! I looked at the CSS Layout tutorial on W3 Schools but it didn’t seem to solve this, so I will search further tomorrow.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.