trilo
🖥️

Trillo

Built with

html5
css
sass

Overview

I took Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann on Udemy. I wanted to improve my CSS by mastering cutting-edge layout technologies Flexbox and CSS Grid. Ensure all my projects are built responsive layouts for all kinds of devices and situations. Further my knowledge of how CSS works behind the scenes and test my ability of architecting large CSS codebases for reusability. Build a maintainable Sass codebase. while also testing my knowledge. The second project was trillo.

Goals

In this project I wanted to heavily focus on using flexbox for layout. To continue to build with mobile first design in mind and progressively built the design up. Looking for ways to improve the performance of CSS queries and render quickly in google lighthouse. Furthered, my experience of the architectural structure 7-1 CSS Architecture and Block-Element-Modifier. Use Sass more efficiently.

Lessons Learned

My understanding of how CSS is parsed into a tree was dramatically improved. I avoided style inheritance issues, specificity issues and improved computing values with REM. My responsive design started to be more flexible and less issues arised. I started to build animations much quicker.Furthered my knowledge of the NPM ecosystem. My knowledge of Sass improved dramatically and the readability of the styling was improved.

trilo-mobile
Fig.1 - Mobile View of App

Process

I followed the design made by Jonas Schmedtmann:

I followed along with the design and added some personal touches

trilo-tablet
Fig.2 - Tablet View of App