Frontend Mentor - 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. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

This is 14th project from "Frontend Mentor" to sharpen HTML & CSS skills along with responsive web design and it's build with "BEM", "Grid & Flexbox layout", "min-width, max-width, width in various units & with help of Google ofcourse".

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Live Website

My process

Built with

• Semantic HTML5 markup
• BEM
• Mobile-first workflow
• CSS Grid
• Flexbox
• min-width, max-width & width in various units
• Chrome and FF Dev Tools
• Googling

What I learned

• Better googling techniques
• Better dev tool usage on both FF and Chrome
• Better debugging
• Better problem solving techniques

Continued development

• Learn more about better practices wrt below

  • Grid, Flexbox layouts
  • Mobile layout designs
  • width, max-width, min-width good practices
  • SEO and Accessibility practices
  • BEM

  Useful resources

• Frontend Mentor slack community + website

• YT videos

• Google ofcourse

• Stackoverflow

• Twitter dev community

Author

• Frontend Mentor - @vikramvi

Acknowledgments

• Frontend Mentor slack community
• YT content creators
• Google + SO community