This is a solution to the 3-column Preview Card Component Challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I'm transitioning back into Full-Time Web Development after a long hiatus away from the tech industry. From experience I know the fastest way to learn/relearn any skill is through consistent building and that is why I've found Front End Mentor Challenges to be the perfect fit for me at this stage in my career journey.
This is the third challenge I'm attempting. My completion time is getting shorter so I'm definitely excited about that.
- Build out the 3-column Preview Card Component challenge at [https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-/hub/3column-preview-card-component-WjNdpmBrB] as close to the original design as possible.
- Solution: [https://www.frontendmentor.io/solutions/3column-preview-card-component-solution-RtC7WPq6N]
- Live Site URL: [https://emmanueloloke.github.io/3-column-preview/]
- I started out with the HTML structuring of the 3-column preview card. Positioning the icons, texts and buttons.
- Followed it up with styling each element to mimic what was presented in the challenge design files with CSS.
- HTML5 markup
- CSS3 custom properties
- Flexbox
- Improved ability working with CSS Flexbox
- CSS [position: fixed; and position sticky;] for keeping footer elements at the bottom of the page in desktop and mobile views
- CSS [height: max-content; overflow: auto;] for making parent element take the height of the child element.
- Feel like I'm ready to dive into JS and in the near future go fully into ReactJS.
- Emmanuel Oloke.
- Frontend Mentor - [https://www.frontendmentor.io/profile/EmmanuelOloke]
- Twitter - [https://twitter.com/I_am_Pope]