(Day 16 of 100) CSS Basics 2

Topics covered: color opacity, hsl(), box-shadow, fixing element, overlapping elements, img patterned background, scaling size of element

What I learned:

1. Color opacity

Where opacity ranges from 0.1~1

Where opacity ranges from 0.1~1 by doing this, you can get different shades of the color

2.Color using hsl(): hsl stands for Hue:Saturation:Lightness, where Hue ranges from 0 to 360 (angle of the color circle), by adjusting saturation and lightness, represented by percentage, you can get different shade of the same color

3. Create a card-like element using box-shadow

4. Fixing element: you can fix an element by setting position: fixed; One key difference between the fixed and absolute positions is that an element with a fixed position won’t move when the user scrolls.

5.Overlapping elements: z-index property can specify the order of how elements are stacked on top of one another

6. You can set background with url img file pattern.

7. You can scale up the size of an element using ie) transform: scale(1.5);

That’s all! Thanks!

Current technology stack in mind: React+Redux+Flexbox+GraphQL+Python+Django+PostgreSQL

Total time spent on the challenge: 2 hours

Actual Time focused on the challenge: 1.5 hours

What I did:

1. Did css excercises from freecodecamp.org

Plan for next day:

1. Start studying on flexbox