Fylo Landing Page

A Modern Landing Page featuring sections, navigations, footers, responsive design

Fylo landing page with two column layout solution

This is a solution to the Fylo landing page with two column layout challenge on Frontend Mentor.

Screenshot

Links

• Solution URL: https://github.com/LiyanNguyen/Fylo-Landing-Page
• Live Site URL: https://liyannguyen.github.io/Fylo-Landing-Page

My Process

• Design the Desktop Viewport WHILE desinging the Mobile viewport at the same time using LESS CSS Preprocessor
• Design the flex/grid system, making sure to have both Desktop and Mobile Viewport layout correct
• Add in all the other HTML content
• Finished up all the CSS designs

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid
• Desktop-first workflow
• LESS CSS Preprocessor

What I Learned

• More Flexbox, Flex-wrap
• More LESS CSS Preprocessor
• Different technique of just using big paddings on sections rather than %height or vh
• Always use padding FIRST inside big sections before the putting in the flexboxes
• DO NOT manually position elements inside big sections
• Add padding FIRST! before flexing the items

Author

• Website - Liyan Anajao
• Frontend Mentor - @LiyanNguyen
• Twitter - @LiyanAnajao

Acknowledgments