Powercoders Resources

Mon Oct. 9

Positions / Pseudo element

9 – 12h Teaching

Teacher:

Monorom

Goals

I can use the basic positions in my portfolio.
I use pseudoclasses.

Content

Positions
Pseudoclasses

RECAP

Weekend? Q & A
IMPORTANT: We have to look at pseudo element :after und :before today

WARNING

The portfolio folder 7-2 in your students folder has en error! Did you see it?

Positions

static
absolute | absolute nested | z-index |
relative
fixed menu | fixed vs. absolute
Footer fixed | absolute and relative

Exercise – Portfolio #7-3 absolute and relative

Add an icon to your portfolio startpage. Download icons.
Use position absolute and position relative to place the icon.

solution | solution.zip

Pseudo element :after und :before

The pseudo element :after and :before are virtuell elements.

Exercise – Portfolio #8 – pseudo elemet

Use :after or :before for your navigation.
Just open your CSS file. There is no need to edit HTML.
Finde more use cases.

solution | solution.zip

12 – 13.30h Lunch

13.30 – 17h Coaching

Coaches:

Hussam
Matthias

Goals

I repeat the morning inputs.
I try to combine positions.

Exercises

Finish the Morning exercies.
Play with Backgroundimages.
Check out the pseudo element sample
Try to make this Sample responsive

Read this

Attribute selectors

Report abuse