As a web developer working at a consulting firm, I am relearning from the ground up again in order to become a Senior Full Stack Engineer in the next 6 months.
Learning Path for the next 3 months
- Build projects (Min. 6 days out of 7) — HTML, CSS, JS, React, Redux, React Native, Node.js, Express, Restful API, GraphQL, Relational DB, Mongo DB, AWS.
- Frontend Masters — Beginner, Professional, Expert, CSS, JS, Async JS, WebPacks, React, Computer Science, Full Stack, Node, Design To Code, Data Visualization
- FreeCodeCamp — Responsive Web Design, JS, Frontend Libraries (except for Bootstrap & JQuery), Data Visualization, APIs and Mirco Services, Quality Assurance.
- Algorithms and Data structure — When studying computer science course: Cracking the coding interview, 2 Leet Code challenges per day
Notes from Project Challenge (JS 30 — Day 2)
- The transform property visually manipulates the element by rotating, skewing, scaling or even translating.
- When the transform property has a value other than “none”, it will create a stacking context. The element will act as a containing block for any “position: fixed” or “position: absolute” elements that it contains.
- A stacking context is about how elements stack above each other on the Z-axis. (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
- Stacking contexts can exist within stacking contexts, creating a hierarchy of stacking contexts.
- Each stacking context is independent of its siblings. Only the children elements are considered during the stacking order.
- The whole element is considered in the stacking order of the parent container’s stacking context.
Transform Values — Functions (For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
- perspective() — Used for 3D; This will control the element’s Z-axis. A Positive value will make the element seem closer.
- rotate() — This function rotates the element from “transform origin” co-ordinate. The argument for this function represents an angle. Positive values will make the element rotate clockwise, while a negative value will rotate it counter-clock wise. One of the following units must be used after a number: deg, grad, rad, turn.
- rotateX(), rotateY(), rotateZ() — As the names suggest, the element will rotate on a given axis.
- scale() — This function takes in either a single integer or two values representing the X-axis and the Y-axis. The scale function multiplies the value to the element’s X and/or Y axis. The function works more like a coordinate system where positive values will grow the X or Y values, while negative values will flip/rotate the element on the axis that has the negative value and multiply it.
- skew() — This function tilts the element on its axis. If a single value (an angle) is provided, it will tilt on it’s X-axis. If two values are provided, it will tilt on both it’s X-axis and Y-axis.
- translate() — This function moves the element along the X or the Y axis. The starting point is the top left corner of the element, which also can be represented by (0,0) coordinates. The function accepts a length or a percentage as its argument. If a single value is provided to the function, it will only move the element along the X-axis. If two values are provided, it will move along both the X-axis and the Y-axis.
- matrix() — In summary, this function is a combination of (scaleX(), skewY(), skewX(), scaleY(), trasnlateX(), translateY()). If you’d like to understand the math behind this function please check out: https://dev.opera.com/articles/understanding-the-css-transforms-matrix/
- You can use multiple functions at the same time.
- This property allows a CSS property to be changed/animated over a period of time.
- Here is a list of all animatable CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.
- This property is a shorthand for [transition-property] [transition-duration] [transition-timing-function] [transition-delay].
- Transition-duration — This specifies how long it should take in order to complete the animation of a CSS property. The values are in seconds.
- Transition-delay — This specifies (in seconds again) how long long it should wait before starting the animation.
- Transition-timing-function — These functions determine how a transition should take place over its duration.
- You can list multiple CSS properties to be transitioned by separating each rule by a comma, or use the key word “all” to transition all animate-able properties.
- Ease — This is the default behaviour. Increases the speed in the middle and slows the animation speed down at the end.
- Linear — The speed of the animation is consistent.
- Ease-in — Starts off slow and then gradually increases speed until the end.
- Ease-out — Starts off fast and then gradually slows down until the end.
- Ease-In-out — Starts off slow, increases speed in the middle, and then slows down again at the end.
- Steps(n, <jump term>) — Steps represent the number of stops during the animation. A jump term defines how these stops will be presented.
- Jump-start or start — The first jump happens when the animation/transition begins.
- Jump-end or end — The last jump happens when the transition ends.
- Jump-none — There are no jumps at the beginning or at the end of the transition.
- Jump-both — There are jumps at both the start and the end of a transition.