Natours: Float Layout with Advanced Responsive Design

I wrote the code in the sass directory and package.json. The other files were provided by the instructor.

App Demo

Advanced Responsive Design

💡Lessons Learned

To run this project locally:

$ npm install
$ npm start

:hover. Trigger by a user mousing over
:focus. Trigger when an element receives focus, such as when using the tab key or when an input is selected with the mouse. Really only applies to inputs, text areas, and buttons.
:active. Trigger when the user presses down the primary mouse button
A tag, class, or id goes before the :pseudoclass. (i.e. h1:hover)

Transform: Selector that lets you move, rotate, warp, and scale elements. Here are a few of the most common:

Translate(). Property that allows you to move an element along the X and Y axis
Scale(). Property that allows you increase or decrease the size of the element from the origin. The origin is the center of the element
Rotate(). Property that allows you to rotate an element.
If you want multiple transform properties, then write them inside the same selector (i.e transform: scale(2) rotate (180deg);)
Transform-origin: Selector that allows you to change the origin of an element.

Vendor Prefixes: different browsers handle these differently

Transitions: Selectors that set the target and set the timing of changes

Transition-property. Targets specific properties that you want to apply the transition to. You can target multiple properties (i.e. transition-property: background, border-radius;)
Transition-duration. Sets the time it takes to complete the transition. You can target multiple properties (i.e. transition-duration: 5s, 1s)
Transition-delay. Sets the time it takes before applying the transitions
Transition-timing-function. Sets the acceleration curve for the transition. Property values include ease-in, ease-out, linear, and cubic-bezier(#,#,#,#)
Shorthand selector. Transition: property, duration, timing-function, delay;
What can be transitioned? Here's a list
What should be transitioned? While you can transition a lot of things, it may affect the performance of the website. These are the 4 properties that are recommended for animation if you’re concerned about performance. You would be concerned about performance if you’re using 100+ animations on a single webpage, if you work for a big company, or if you tailor to mobile
1. translate
2. opacity
3. scale
4. rotate

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count. How many times should it repeat. Commonly used property value is: infinite
animation-direction. Property values include: forward, reverse, and alternate. Reverse is useful for making an existing animation go in the opposite direction so that you don’t have to write a new one. Alternate is useful for making the animation go forwards and reverse.
animation-fill-mode. Property values include: forward, backwards, both, none. Specifies how an animation should apply styles before and after the animation. Forward is useful for persisting the end state of the animation (i.e. after changing color to red upon hover, it will stay red).
animation-play-state. Property values include: paused and running. Most often used in Javascript where this property is manipulated.
Shorthand for declaring property values for animation property: animation: name, duration, timing, delay, iteration-count, direction, fill-mode, play-state.

Section 2: Natours Project - Setup and First Steps, Section 5: Natours Project - Using Advanced CSS and Sass, and Section 6: Natours Project - Advanced Responsive Design of the Udemy Course Advanced CSS and Sass: Flexbox, Grid, Animations, and more