Day 9

Progress on my Product Landing Page, with no styling elements so far.

Started 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 have learned:

  • I found starting this project much easier this time, and had less of the ‘what do I do’ panic as I had on the previous two projects.
  • The things I learned in the previous two FreeCodeCamp projects, the Tribute Page and the Survey Form, have really helped with this one.
    • I used the elements from the Survey Form for the email capture form.
    • I have used different background colours for each area of the page, so I can see more clearly which areas are being affected when adjusting padding and margins etc. I will change them once the styling is completed.
  • So far, my main challenge and thing I need to fix is making sure that the main elements of the page are not hidden under the navigation bar. The navigation bar is listed as position: fixed in the CSS and currently this overlaps on the rest of the content (making it unreadable).
  • I also am unsure how to add the three icons on the original page. They are not JPEG images. I will need to look into this further tomorrow to figure out how this was done, as this hasn’t been covered yet in the FreeCodeCamp project.
    • I think I will try using the Font Awesome 5 Icons, as shown in the tutorial on W3 Schools, to do this. I haven’t used these before so I am looking forward to trying something new!

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.