CSS3 in 30 Days

CSS3 in 30 days is developed by Brad Hussey.
Offered by FreeCodeCamp Youtube Channel in CSS3 in 30 Days Playlist

Lessons

Day#01: Fancy Buttons
Use CSS3 to create visually attractive buttons of all different shapes, sizes and effects!
Day#02: Sexy Typography
Use CSS3 to create visually attractive typography and cool text effects!
Day#03: Clipping Images with Shapes
Use CSS3 to "clip" the following images with different shapes!
Day#04: Sexy Registration Form
Use CSS to style the following web form into something visually attractive with a great user experience!
Day#05: Useful Broken Images
Whether it's a typo in the img tag source, or the image itself was misplaced or removed on the server - images break all the time on the web. The problem is, the browsers default way to display a broken image is really ugly. You can fix that and actually use it as an opportunity to enhance the user's experience on your web pages with CSS! That's your challenge in this lesson.
Day#06: Print Specific Styles
Use CSS to create a "print" stylesheet. Style this page to look best on paper!
Day#07: Image Manipulation
Use CSS3 filters to manipulate the below images.
Day#08: 8-bit Mario
Combine CSS box shadows and absolute positioning to "draw" an 8-bit style Mario!
Day#09: Modern Layouts.
Using CSS, style the following sections to be modern layouts.
Day#10: Pricing Table.
Style the following pricing table into a modern and attractive layout using CSS3.
Day#11: Internet Explorer Hacks
Ugh, yes, Internet Explorer is still a thing. Luckily, with CSS, you can bend it to your will, or just straight up give it the Vulcan Death Grip.
Day#12: CSS Variables
Play around with CSS variables!
Day#13: Sticky Footer
Stick a footer to the bottom of the page.
Day#14: Sticky Header
Stick a header to the top of the page.
Day#15: Sticky Sidebar
Stick a sidebar to the right of the page.
Day#16: CSS Only Modal Window
Create an accessible modal window with just CSS and CSS3!
Day#17: Pacman
Create a simple animation of Pacman chomping and chasing a ghost along this container element!
Day#18: Tooltips
Create CSS only tooltips when you hover over the elements below!
Day#19: Progress Bars
Create CSS only progress bars that animate below!
Day#20: Animated Pyramid
Create a small triangle that, once hovered over, animates into a pyramid comprised of several shapes! Hint: use CSS3 clip path ;)
Day#21: Spinners Create CSS only spinners that animate below!
Day#22: Flexbox Layouts
Create modern layouts with Flexbox!
Day#23: Accordions
Create an information accordion with only CSS3!
Day#24: Support Rule
A simple rule to check if a browser can render specific CSS properties!
Day#25: Sliding Panel
Create sliding content panels with CSS3!
Day#26: 3D Layers
Create a 3D layer effect with CSS3!
Day#27: Dropdown Menu
Create a simple Dropdown Menu with CSS!
Day#28: Optimizing Your CSS
Day#29: Blurry Effect
Create a blurred depth of field effect with CSS3!
Day#30: Coffee Cup
Create a realistic CSS3-only coffee cup!

MAshrafM/CSS3in30Days

CSS3 in 30 Days

Lessons