natours
🖥️

Scenic Cornwall

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 first project was Natours

Goals

To build with mobile first design in mind and progressively built the design up. To ensure my CSS queries are rendered quickly. Start to apply an architectural structure 7-1 CSS Architecture and using Block-Element-Modifier in my Sass. To think about how CSS is parsed while making styles and heavily use Sass.

Lessons Learned

During the project I had learned a lot: First I learned how CSS parsed into a tree, how specificity works, values are processed and how style inheritance works. The benefits of starting with a mobile first design and how it makes writing styles much easier. How to use the NPM ecosystem for development and hope to process and compile Sass. How to utilise NPM to make the browser reload to see style changes in real time. How to prefix and compress CSS files. Used CSS to make animations with @keyframes, animation and transition and used advanced selectors, pseudo-classes and pseudo-elements. I applied a CSS Architecture, Components and BEM. I focused heavily on Sass using: Variables and Nesting, Implementing the 7-1 CSS Architecture with Sass, Mixins, Extends and Functions and Sass Mixins to Write Media Queries.

natours-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

natours-tablet
Fig.2 - Tablet View of App