DEV Community

Cover image for Web Development Part 2D: Let's Get Weird!
Tim
Tim

Posted on

Web Development Part 2D: Let's Get Weird!

Let's Get Weird!
We're going to learn all about Pseudo elements and classes! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!
This week: Pseudo elements and Pseudo classes.
In the last lesson, we learned about the "checkbox hack" and used it to build another Nav element.

In this lesson, we're going to look at some strange new properties: Pseudo classes and Pseudo elements.
A fun fact: You used one of these in the last lesson. I'll leave it up to you to determine which one!

These elements are incredibly important in a web developers toolbox. It's up to you to learn about them all, but I'll leave a few helpful links.

http://quantityqueries.com/

https://bryanlrobinson.com/blog/2018/08/07/top-3-uses-of-after-and-before-css-pseudo-elements/

https://css-tricks.com/almanac/selectors/n/not/

Homework:
Reply to the email with a new codepen demonstrating as many CSS Pseudo elements and Pseudo classes as you can. They can be random and you don't need to incorporate anything into a larger design.

Extra points.
Demo all of them.

Top comments (0)