nexters
🖥️

Nexter

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 last project was Nexter

Goals

In this project I wanted to heavily focus on using grid for layout and now I wanted to tie all my knowledge together. Mobile first, CSS media queries,7-1 CSS Architecture and using Sass

Lessons Learned

In summary after the Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann. I identified my weaknesses with Sass and improved upon it. I avoided style inheritance issues, specificity issues and improved computing values with REM. Encountered less responsive issues when making designs. My projects started to come to life and feel less static with animations. I now have more confidence with building animations. I started to use the NPM ecosystem more comfortably. Overall, I feel more confident in my Front-End skills and improved in areas that needed updating.

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

nexters-tablet
Fig.2 - Tablet View of App