Natours

For a fictitious nature tours company - Project by Jonas Schmedtmann

You can find a link to Jonas repo Here

How to run this Application?

Clone or download this repo to your local machine, unzip and open index.html file in a browser. Alternatively, click Here to view the finished website on live GitHub page.

Screenshots of Finished Project

What I learnt from this Project

• Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties.

• Advanced CSS animations with @keyframes, animation and transition.

• Advanced CSS selectors, pseudo-classes and pseudo-elements required for modern CSS development.

• How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes and stacking contexts.

• CSS architecture: The 7-1 rule, component-based design, the BEM methodology, writing reusable, maintainable and scalable code.

• Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more.

• Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS and managing media queries.

• The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix and compress CSS files.

• Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities and touch capabilities.

• Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support.

• Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching, art direction.

• SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colours in CSS and best practices.

• Videos in HTML and CSS: building a background video effect.

• How to architect and build a simple grid system with floats. This project uses float layout.

Licensing

This is a Project by Jonas Schmedtmann, here is the link to Jonas repo where you will also find a link to his courses.