Third part of CSS workshop materials

CSS part III.md

🍳 Preparations:

Intro

• Workshop is ~3-4h long.
• Workshop topics are isolated - participants need to know only base stuff like selectors and base CSS properties/values like color, background, width, height etc.. If participant for example doesn't know how to rotate element in CSS then Presenter should be asked for help
• Each exercise should last until each participant ends it

🧑‍🏫 Presenter

• Uses materials and goes through Walkthrough with presenting on the big screen each material with explanation without reading the text, text is just a reminders of topics and things to mention
• Should be familiar with materials and understand each case
• Modifies in browser codepens to show what happens when we change some properties and how it behaves in other scenarios.
• Should give proper examples of usage of each specific CSS properties eg. "position: fixed is commonly used for modals" etc.

🧑‍🎓 Participants

• Should have their own computer or make 2 people groups
• No setup or IDE needed - exercises are on CodePen
• Have access to Walkthorugh materials as a backup for exercises

💡 Topics:

• CSS specificity
• Z-index
• Advanced Positioning
• Grid
• Animations
• What can you do without JS

CSS specificity

🎓 Walkthrough

1. Explain selectors and their levels
2. Open https://specificity.keegan.st/ to calculate some selectors specificity
3. Mention Id, classes, element selectors, also inline and importants, and of course order of styles (latest is more important when specificity is the same)
4. Show some examples in calculator from step 2.
5. Open any webpage of your choice eg. https://www.ath.bielsko.pl/
6. Inspect some element and show styles and their selectors
7. Show how little effort it takes to override some styles add one more class selector or anything else - do few elements that way to show how it exactly works
8. Show .classA.classA.classA hack

💻 Exercise

⌛ Time: 10-20 minutes

• cannot add any classes/elements/ids or inline styles
• need to override styles rising specificity as small as possible
• their styles should be at the top of CSS file

1. Override background-color of every element that have any background other than white
2. Change every border-color
3. Change every font color

!important can be used only once

Z-index

🎓 Walkthrough

1. Explain that z-index works only for positioned elements position: absolute/fixed/sticky/relative
2. Higher z-index => higher in the stack which is obvious
3. If you have higher z-index and element is still below other element that means your element has positioned element which has lower z-index (or not set)
4. If two elements have same z-index, the element further in the HTML markup would show higher in stack
5. Explain what z-index: -1 does
6. That's all, now show the examples

Go to any Selleo blog article Blog article or any other page with an article that matches the scenario.

1. Change the header/topic to be position: fixed, scroll through page and show that it's already above most elements, but still below some other that have probably higher z-index (navbar is higher, side sticky box).
2. Set z-index of your element to be higher than other positioned elements.
3. Set z-index to astronomical value like z-index: 432565436545 to be above everything
4. Set parent of your element to position: relative and z-index: 1 to show that your header is below everything else again altough it have astronomical z-index value

💻 Exercise

⌛ Time: 5-10 minutes

1. Navbar is fixed, make A to go above it
2. Navbar is fixed, make A absolute and make it to display under navbar
3. Make A to be above navbar but below navbar buttons
4. Freeroam - let them to test it on their own

Advanced Positioning

🎓 Walkthrough

Each point below connects with each card in the materials (1. First card, 2. Second card etc.)

1. Explain Legend - which element means what property

2. position: absolute

• Tell that absolute elements get torn out of their content - so it's neighbours behaves like absolute element doesn't exist there anymore
• Turn off position: absolute for pink element - explain
• Change one of the grey elements to position: absolute
• Explain what non-static element is

3. position: absolute #2

• Show in HTML that pink element is between two grey elements, but looks like it's inside the second one
• Repeat that neighbours of absolute element doesn't care about it, like it doesn't exist
• Turn off position: absolute see what happens

4. position: absolute #3

• Explain top/bottom properties
• Explain why pink element is at the top of the page
• Say about relation to nearest non static element
• Mention it holds initial horizontal position
• Set card position: relative to see the change of the outcome

5. position: absolute #4

• Explain left/right properties
• Point at pink element on the left
• Resize the window to show that it sticks to the side
• Mention it holds initial vertical position
• Set card to position: relative - explain
• Set left to some other values px/%
• Explain how to center vertically and horizontally using left: 50%, top: 50%, transform: translate(-50%, -50%) - it's needed for exercise, they don't need to know but presenter could explain what translate(-50%, -50%) does.

6. position: absolute #5

• Just explain the presented scenario

7-8. position absolute #6

• Mention that it sticks to their related parent - even animated
• Mention they not interact with other elements
• Point out that these are above other elements (do not mention z-index)

9. position: fixed

• Tell that almost everything we've learned also applies to fixed - explain differences
• Mention sticking to the scroll
• Repeat top/left stuff that is applied to the green element
• Present behaviour of green element
• Resize the window to show that it sticks

10. position: sticky

• Explain sticky and how it's different from fixed/absolute
• Present blue sticky element behaviour
• Explain how top/bottom/left/right works for sticky
• Give some examples of usage: DataTables, sticky headers, sticky navbars, side panels like on Selleo blog
• Explain when it stops to be sticky - show in inspect browser tool (also show on Selleo blog)
• Mention it's tough one, and it's needed for exercises

🏁 Summary:

• Repeat shortly each position options
• Scroll through page to show again each of them

💻 Exercise

⌛ Time: 15-30 minutes

In exercise presenter cannot use sentences mentioning solution like this element should be fixed to the center etc. instead he should say element should be in the center horizontally and vertically, and hold on to the scroll

Tasks:

1. Whole card should be centered vertically/horizontally and stay there even page is scrolled
2. Bell icon is centered in the card using position property, no flexes or margins allowed
3. Three colorful circles should be placed at the top left corner of the card navbar, margins are allowed to set the space between buttons, flex is allowed on the container
4. Bell icon inside small square boxes should be centered
5. Additional (not required) - Make the square boxes - to follow user scroll but only from the start for a moment let's say 100vh, and second square box to follow user scroll from 100vh height to 200vh.

Final Result

Grid by @ArekJanik

🎓 Walkthrough

Presentation file is prepared to go along with it, so use it as complete flow of the presentation

1. Introduction to grid, tell how it differs from flex and which problems it solves
2. Open https://codepen.io/ArekJanik/pen/KKKeEeR in separate tab
3. Explain actual situation at the codepen
4. Apply every new properties to our actual codepen then explain and show what happens
5. At 12 slide open https://codepen.io/ArekJanik/pen/LYYBZBP and continue with the rest of the slides
6. Mention which scenarios aren't possible with normal flex or other solutions

🎓 Exercise 1, Exercise 2

1. Follow on with the presentation and try each step on your own
2. Try to modify each step to get more familiar with the concept and possibilities
3. At some points give some different output participants needs to achieve (change order, columns/rows size etc.)

Kudos to author: https://github.com/ArekJanik

Animations

🎓 Walkthrough

Each point below represent each card in the Walkthrough

1. Intro

• Explain what types of animations are possible in CSS, explain basic concept of both methods

2. Transitions

• Mention that transitions is animating change of css property from one to another in specified pace
• Hover on first element and show how usually it looks like without any animation
• Point that only adding one simple property make the hover much smoother (show code example below) then hover on element, explain one more time one it does
• Go to the next example and explain how all works, but mention to not use it too often because of performance, point that all properties changed got animated
• Show last example in this card - explain that transitions are great for being controlled from javascript by adding simple classes that change properties.
• Go to inspect and add .anim-4 class to the element to see it animating
• Add same class to any other element on the page to see it also works for them
• Remove class and add again to show it works multiple times
• Explain why it doesn't animate back whenever you remove .anim-4 then make it to animate back too
• Repeat what transition are useful for, which scenarios it fits best

3. Animation

• Make some introduction to animations using keyframes
• Tell for what scenarios it's the best or only option
• Show first code example and explain each property in animation (it's bad example for changing animation properties because it's hard to see the difference)
• Go to second example and explain again
• Change in inspect the time of the animation
• Go to next example and explain the difference with ease and linear
• Change animation properties in inspect and change timing function to few different options, list possible values
• Go to the next code sample, show that we've changed infinite to 2, show that animation is freezed
• Refresh the page then fast scroll down to show that it plays only twice and stops
• Go to the hardest part show forwards example and explain what it does, how it differs form previous ones, change value to backwards and show what happens then both - this one is hard to explain
• Show that you can animate back and forth simply by adding alternate property
• Mention which properties not to animate and why, and which properties you should animate instead of margin, padding etc.

4. 🏁 Summary

• Repeat again when to use transition and when to use keyframes
• Scroll through all examples once again

🎓 Exercise

⌛ Time: 15-30 minutes

1. Whole card should appear animated
2. Navbar should animate width from 0 to 100%, after card has ended the animation
3. When navbar animations ends then top left corner buttons appear
4. Bell icon rotates infinitely
5. When card is hovered shadow changes (color, size, blur, anything)

What can you do without JS

🎓 Walkthrough

Point of this section is to make participants aware of what things you could achieve in CSS which are commonly done in JS, of course mention that it's not always good solution but in some scenarios it might come handy. Presenter should get familiar on his own with each case before advancing to presenting it.

1. Truncating text

• I commonly see people shorthening text in JS always to the same amount of characters then adding ... at the end

2. Uppercase/Lowercase/Capitalize text

• Same as above

3. vmin and vmax

• If you want something to be at least 100% wide or heigh depending which one is smaller/bigger

4. Show context on hover/click

• Sometimes it's not obvious for people
• Point out that onclick is foucs, so it'll hide on blur

5. Visual effect on click which shows above our element

• Shown example is great for checkboxes/radio buttons because you can animate :checked state with that
• Problem in the example is that it's only on focus though

6. Expandable menu

• Which stays up even on clickout
• Problem is that it will stay up if you have links inside of it and click one of them

7. Popup

• Closes on blur/clickout
• Stays on click in
• Closes after clicking button inside it
• If you want expandable menu options inside, then you cannot use it because it will close on interaction with one of them

8. Gooey effect

• Beatifull effect which you don't see commonly on the web, need some refinements because it's still blurry/pixelated
• Pretty easy to achieve, needs some complicated svg filters which also have much more possibilites

9. Generated visuals

• Mention Github/Gitlab any other media that generates random images for users withour profile picture
• Show that you don't need to generate anything in JS, you can do it only in CSS by passing some seed
• Possibilities are unlimited but it's complicated to understand the SVG filters though

Expect more examples here in the future