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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Screenshots

Overview

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 buttons and inpust elements on the page

Links

• Solution URL: https://github.com/jorgedav-id/frontend-mentor-fylo-landing-page-challenge.git
• Live Site URL: https://modest-davinci-f8f530.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

In this challenge, I learned to work with semantic HTML5 and work with CSS. Also, i learn about Flexbox. At the beginning I completed the challenge without following the Mobile-first approach, but then I tried to follow that approach and I found it more flexible and easy. Also, with this challenge I practice some of the git workflow.

Continued development

I will focus to learn and improve my knowledge about flexbox and mobile-first workflow.

Useful resources

• htmlreference.io - This helped me for semantic html5 markup.
• cssreference.io - This page helped me with css properties that i didn't know and to check if the properties that i used was correct.
• A Complete Guide to Flexbox - This site was so useful to learn about flexbox.

Author

• Frontend Mentor - @jorgedav-id
• Twitter - @jdavid_ACH

Screenshots