Introduction
Explore the fundamentals of CSS positioning by learning the four common types: static, relative, absolute, and fixed. Understand how to apply gradients, box-shadow, and CSS variables to create visually appealing web elements. This lesson uses practical examples to help you build creative interfaces with no images, enhancing your grasp of essential CSS skills.
We'll cover the following...
Hate or love it, positioning in CSS is a fundamental topic. One that is pivotal to your development in CSS.
In the following lessons, I will explain what you need to know about the 4 common types of positioning in CSS.
- Static Positioning
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
I won’t show you how these work with a lengthy boring essay, we will learn explore positioning in CSS by building the phone below with plain CSS. No images, just awesome CSS.
I hope that got you excited.
Incase you were wondering, that’s an iPhone. The one said to be released when we get to Mars in 2039. Please don’t do a Google search :)
Meet your Positioning Experts
As we move on, Janice and Roughnut will help you understand positioning in CSS like you never have.
Say hello to them.
You definitely don’t want to miss the special lesson they’ve got for you.
Just Positioning?
Truth be told, in this section there’ll be more to learn than just positioning in CSS.
You’ll get to do some more fun stuff such as:
- Learning to Use Gradients for some cool effect
- Taking advantage of the CSS border shadow to achieve realistic effects
- Taking advantage of CSS variables (custom propeties) for writing more readable and maintainable CSS.
This will be fun.
Let’s get started in the next lesson.
See ya!