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.
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
- Solution URL: Github source code
- Live Site URL: Click here to open the live site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I created this project with the intention of putting into practice the skills I was acquiring at the time. It is not a very exhausting project, but it did force me to correctly implement a design system.
This project helped me to see the practicality of having concrete design systems and maintaining them throughout the project.
One thing I wish I had known back then was the importance of separating styles correctly, in the end I ended up with a big mess of styles between media queries, inconsistently named classes and some other opportunities for improvement.
This helped me that, nowadays, my projects have a better consistency not only using a design system but also thinking deeply about class and variable names.
- Website - Fylo-Website
- Frontend Mentor - @Eze-Alarcon
- Linkedin - Ezequiel Alarcon