vikramvi / fylo-landing-page-with-two-column-layout

https://www.frontendmentor.io/challenges/fylo-landing-page-with-two-column-layout-5ca5ef041e82137ec91a50f5 Fylo landing page with two column layout : This project is great if you're starting to get confident with slightly more complex layouts. The second section with the testimonial area will provide a nice challenge [LIVE WEBSITE - CLICK BELOW]

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

fylo-landing-page-with-two-column-layout's Issues

layout should occupy 100% vw and not partial

check the screenshot generated in the FM website and fix accordingly.

Instead of 80 - 90% width used, let the design take over 100% vw

CSS: transform: too few values for the property transform.

Category : HTML

e-height,-.5em))}50%{-webkit-t

ebound,-.125em))}64%{-webkit-t

-angle,-180deg))}}@-webkit-key

ate-angle,none))}.fa-stack{dis

All page content should be contained by landmarks

Category : Accessibility

<article class="info-component">
<article class="product-trial-component">

Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.

Category : HTML

/p> <article class=info-component__working-info>
> <article class=info-component__testimonial-person-details>
le> <article class=info-component__testimonial>

Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Category : HTML

o> <section class=footer-component__phone>
on> <section class=footer-component__email>
on> <section class=footer-component-social-links>
`

CSS: Unknown pseudo-element or pseudo-class :host

Category : HTML

-width:0}:host,:root
:\f63f}:host,:root
ight:400}:host,:root