DEV Community

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

Posted on

1 1

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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay