Kolehiyolo | freeCodeCamp | Build a Product Landing Page

Welcome! I am a budding coder and this is my submission to the 'Build a Product Landing Page' project from freeCodeCamp.

Table of contents

• Overview
  • Summary
  • The Challenge
  • Screenshots
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources
• Author
• Acknowledgments

Overview

Summary

This sample project was fun in the sense that there's so much variety in the components to be built. The header is fixed, the form is a columned flexbox, the features section looks like a grid, there's an embedded YouTube video that's supposed to be responsive, and the pricing is also quite demanding. Even the footer is unique with the align-right situation. To sum up, this project took a lot in terms of flexing my CSS understanding.

The Challenge

• Perfectly mimic the sample page from CodePen
• Make sure to follow the user stories dictated by freeCodeCamp
• Build it while ensuring accessibility and responsive-ness

Screenshots

Links

• freeCodeCamp Challenge: freeCodeCamp | Build a Product Landing Page
• Sample: CodePen
• Solution URL: GitHub Repo
• Live Site URL (Static): Kolehiyolo | freeCodeCamp | Build a Product Landing Page (Static)
• Live Site URL: Kolehiyolo | freeCodeCamp | Build a Product Landing Page

My process

Built with

• HTML5
• CSS5
• SASS
• Mobile-first workflow

What I learned

The biggest problem I had to deal with was getting the header to maintain a fixed position while also making sure that the section directly below the header has enough clearance. The simplest solution I came to was just giving the section a padding at the top that adjusts roughly via media-queries.

Another challenge was the feature section and how I had to deal with the grid. I decided instead to build each feature as a flexbox with the icons with set dimensions.

I also had to look up styling for the YouTube embed, and I managed with some documentation.

Continued development

More so than before, I used a lot of flexboxes with this project. From the header, the form, the feature section, the pricing section and the cards and the footer. The flexbox is a surprisingly versatile way of controlling relative element's orientation, spacing, and positions and this power is sublime. I will surely use this more and more.

Useful resources

• YouTube Embedding - This is a simple documentation that helped me understand the basics of using the YouTube embedded videos
• CSS Tricks | A Complete Guide to Flexbox - This absurdly amazing article is one that I continue to go back to despite my relatively extensive experience with flexbox at this point

Author

• Website - Add your name here
• Frontend Mentor - @kolehiyolo | Frontend Mentor
• LinkedIn - @Tristan Sean Paul Cinco | LinkedIn
• GitHub - @kolehiyolo | Github
• YouTube - @Tristan Sean Paul Cinco | YouTube
• Facebook - @Tristan Sean Paul Cinco | Facebook
• Twitter - @kolehiyolo1221 | Twitter
• Instagram - @kolehiyolo | Instagram

Acknowledgments

I am severely thankful for discovering CSS-Tricks which truly opened the door to so much great ways of dealing with CSS. CSS is one of the suckiest areas to work on especially since for a tool that is primarily used for design, there's such difficulty in getting feedback for changes made or why things aren't going the way you want them to. The above site just helps in dealing with that even for a lil bit.