Extra Curricular - CSS
These are not tasks. Instead, these are things that you may consider including in your projects.
1. Visit Uplabs for inspiration
I think the biggest extra curricular thing you can do with css is to try and stretch yourself and do awesome UI design. There are no "10 steps" to do that, its more just seeing things and deciding to try it out yourself. I think the best thing a person can do is look for good design, and copy it. Uplabs is an amazing place to look for inspiration. So I would say the #1 extra curricular thing to do is look at websites like uplabs or dribbble.
https://site.uplabs.com/posts/c/resources
2. Add transitions to your hover styles
It is common to have a button change color when you hover your mouse over it. Try adding transitions (0.3s is usually a good length to start with for button hover transitions).
You could also go the extra mile and animate a few elements such as the text and border when you hover. Here is a site for some inspiration:
https://tympanus.net/Development/ButtonStylesInspiration/
3. Add animation to hero image text
Its important to not go overboard with animation, but sometimes having the text of your hero image fade in and rise about 20px can add a really nice effect.
Here is some examples of what that might look like (The Zoe example is such a good card hover effect idea):
https://tympanus.net/Development/HoverEffectIdeas/
4. Try using Zurb Foundation 6 Framework as a good starting point for your projects
If you have never used a framework before, try Zurb Foundations and visit their docs.
5. Add style and animation to input fields
The default style for inputs is terrible. Make sure to style them so they look like they belong to this century. There are a lot of other things we can do animation wise to make inputs look and feel a lot better. Here is some inspiration:
https://tympanus.net/Development/TextInputEffects/
6. Use box shadows
When we have multiple items that we want to display, a common way to display them is in the form of a card. Try adding a box shadow to separate it from its background. If you visit facebook.design, you will notice that all the articles are in card format and have a box shadow behind them. If you hover over the cards, they rise and the shadow changes. Really nice effect, totally worth copying.
Google has a really good document on how to properly use box shadows in UI design which can be found here:
7. Use Icons
Link to a CDN or download some icon fonts (font awesome is a popular choice). Icons can really help fill out your design.