CSS Challenges
Challenges: Start experimenting!
Now you know the basics of getting content and styles on your website! From here on, you have all the tools you need to explore the many more properties and possibilities of CSS. Start experimenting – we would love to see what you discovered in the demos!
- The dotted circle: You already know how to apply these borders to a box, right? Now make it a circle! Hint: Look up the
border-radius
property!
(Visual example — Try not to look at the code) - The fancy link:
border-radius
,background-color
,padding
,:hover
… you know most of the things to create a nice looking link like this!
(Visual example — Try not to look at the code) - The Polaroid: You know how to add an
<img>
, you know how to applypadding. If now you can figure out how
box-shadow` works, creating a Polaroid effect like this will be a piece of cake for you!
(Visual example — Try not to look at the code) - The Little Galaxy:
transform
,animation
,@keyframes
— All the new things!
(Visual example — Try not to look at the code) - The Smiley: You will need to read up a little bit on
border-radius
to make the meh face smile on:hover
. Also you will need to understand how to use selectors for elements inside of other elements. To make it go a little smooth, you need to add atransition
.
(Visual example — Try not to look at the code) - Chasing The Laser Pointer: You are the cat, chasing the laser pointer with your cursor. You will need to know about
:hover
, the~ sibling
selector andtransition
. Also, someposition
knowledge. Moving things can be done in several ways, you should check outtransform: translate
.
(Visual example — Try not to look at the code)