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!