Challenges: Start experimenting!

Believe it or not: Now you know the basics of getting content and styles on your website! You might have noticed that, once you got the hang of the basic syntax, CSS is surprisingly simple and often self-explanatory. From here on, you have all the tools you need to explore the many more properties and possibilities of CSS. Start experimenting – we want 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 apply padding. 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 a transition.
  (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 and transition. Also, some position knowledge. Moving things can be done in several ways, you should check out transform: translate.
  (Visual example — Try not to look at the code)