Become a CSS Master: Code 30 Projects in 30 Days

Name: Become a CSS Master: Code 30 Projects in 30 Days
Rating: 4.7 (97 reviews)

Learn CSS by Building 30 Projects in 30 Days

Created byBrad Hussey

Last updated 2/2022

English

What you'll learn

Learn CSS from scratch by building 30 fun and practical projects
Build a new project in plain, vanilla CSS without the use of templates, frameworks or plugins.
You'll have a strong grasp on CSS, and more importantly, the knowledge, ability and confidence to start using CSS in your own projects.
Best coding practices for CSS
Learn how to create beautiful Typography in CSS
How to edit & manipulate images with CSS
Create an 8-bit Super Mario graphic in CSS only!
Learn how to create modern layouts with CSS Grid & Flexbox
Understand CSS variables
Create sticky footers, sticky headers and sticky sidebars!
How to create a modal window in CSS
How to code a CSS only Tooltip
Create fun & engaging CSS animations
How to create animated loaders & spinners in CSS
Learn to code a CSS Accordion to organize large amounts of information
How to Code Sliding Content Panels, 3D Layer Effects and CSS only Dropdown Menus
How to Optimize CSS for Live Websites
Create a fun Pacman & Ghost animation with CSS
Code a CSS only Coffee Cup... seriously

Course content

2 sections • 36 lectures • 8h 33m total length

Welcome to CSS in 30 Days! Let's get started.4:05
Welcome! Let's get this CSS party started, shall we?
Here's How to Download the Course & Theme Files3:48
Important: Required Theme Files Download0:21
All lessons use these files in order for the styles to work.
Download: Complete Course Files (All 30 Projects)0:16
I put all the course files (including the theme-styles) into one master file for you to download so you don't have to download a new set of files with every lesson. Just making it simpler for you :)

Project 1: Style Fancy CSS Buttons (Part 1)25:22
Learn how to style fancy buttons using CSS in this tutorial for beginners.
Project 1: Style Fancy CSS Buttons (Part 2)18:08
In this CSS lesson, we will hand code a bunch of buttons!
Project 1: Style Fancy CSS Buttons (Part 3)27:40
In this CSS lesson, we will hand code a bunch of buttons!
Project 2: Cool Typography Tricks with CSS Only13:06
In this lesson we will use CSS-only to create visually attractive typography and cool text effects! A great idea for making your websites more unique.
Project 3: Clipping Images with CSS15:52
Use CSS3 to "clip" images with different shapes!
Project 4: Style a Registration Form in CSS23:52
Use CSS to style a web form into something visually attractive with a great user experience!
Project 5: Customize Your Broken Images in CSS7:24
Whether there is a typo in the <img> tag source, or the image itself was misplaced or removed on the web server - website images break all the time!
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 what you will learn about in this CSS web design lesson.
Project 6: Pretty Print Styles with CSS!?15:36
You can use CSS to create a "print" stylesheet. This is a page styled to look best on paper!
Project 7: Image Manipulation in CSS10:23
Use CSS3 filters to manipulate images. It's pretty cool!
Project 8: "Draw" an 8-bit Super Mario with CSS17:15
Combine CSS box shadows and absolute positioning to "draw" an 8-bit style Mario!
Project 9: Create Layouts with Old School Floats17:53
Use CSS to create modern layouts. Make them responsive with Media Queries. In this lesson, we use CSS Floats (old school, I know) to create the layouts. Even though today we use CSS Grid and Flexbox to code our layouts, I think it's important to understand how floats work. Consider this an exercise in CSS Floats.
Project 10: Create a Pricing Table in CSS23:19
Use CSS to code a Pricing Table.
Project 11: Internet Explorer Hacks in CSS5:26
Does anyone even use Internet Explorer anymore?
Even if there are some people out there who use it, with CSS, you can bend it to your will, or just straight up ignore its existence.
In this tutorial, you will create IE Conditional Comments. Only IE will recognize this comment, which means you can do anything to manipulate the CSS specifically for IE!
Project 12: CSS Variables!11:11
Learn about and play around with CSS variables!
Project 13: Sticky Footers!8:17
Learn how to make a CSS Sticky Footer!
Project 14: Sticky Headers!9:04
Learn how to make a CSS sticky header.
Project 15: Sticky Sidebars!8:25
Learn how to make a CSS Sidebar!
Project 16: Create a Pop Up (Modal) Window in CSS13:41
Create an accessible modal window with just CSS!
Project 17: Code a Pacman & Ghost Animation in CSS32:17
Use CSS to create a fun animation of Pacman chomping and chasing a ghost along this container element!
Project 18: Useful Tooltips in CSS30:57
Create CSS only tooltips on hover.
Project 19: Animated CSS Only Progress Bars22:35
Create CSS only progress bars that animate.
Project 20: Animated CSS Only Triangle Pyramid Thingy13:00
Create a small triangle that, once hovered over, animates into a pyramid comprised of several shapes!
Project 21: CSS Only Spinners & Loaders17:48
Create CSS only spinners that animate.
Project 22: Create Modern Layouts Easily with Flexbox!21:36
Create modern layouts with CSS Flexbox!
Project 23: CSS Only Accordion14:51
Create an information accordion with only CSS3!
Project 24: @supports Rule in CSS1:13
The @supports rule allows you to check if a browser supports a specific css rule. Learn how to use it in this video.
Project 25: Sliding Panels in CSS13:08
Create sliding content panels with CSS3!
Project 26: Create a Cool 3D Layer Effect in CSS18:09
Create a 3D Layer Effect with CSS3!
Project 27: CSS Only Dropdown Menus9:21
Create a simple Dropdown Menu with CSS!
Project 28: Optimize Your CSS12:36
Good, clean code is always a great idea. Here are some hot tips on optimizing your CSS.
Project 29: Create a Blurred Effect with CSS7:54
Create a blurred depth of field effect with CSS3!
Project 30: CSS Only Coffee Cup Illustration!17:53
Create a realistic CSS3-only coffee cup!

Requirements

No programming experience necessary
A very basic understanding of HTML & CSS would be helpful (but not required)
A free code editor
A sense of humour

Description

What is the best way to learn a new skill (or improve a current one)?

a) Read a lot of books

b) Think about it a lot

c) Jump in and do it.

If you guessed "Jump in and do it", you'd be correct!

While spending time understanding theory is important for learning a skill; getting your hands dirty, practicing, and immersing yourself in the thing you're learning will yield much better results.

Want to learn a new language? Speak it.

Want to learn how to play a game? Play it.

Want to learn a sport? Practice it.

Want to learn to be funny? Tell jokes. (I can tell you from experience that, by using this method, my success rate has improved my humour! Now I only bomb a joke 8 times out of 10...)

Want to learn how to code? Start building things. A lot of things.

Here's the catch...

If you have no direction, no roadmap, no end-goal in mind, and nobody to hold you accountable, the best case scenario is you'll incrementally improve your ability, and worst case scenario is you'll fail.

Which is why I created this course, CSS in 30 Days!

Each day for the next 30 days, you and I will learn CSS by building a new project in plain, vanilla CSS without the use of templates, frameworks or plugins.

By the end of the 30 days, you'll have a strong grasp on CSS, and more importantly, the knowledge, ability and confidence to start using CSS in your own projects.

Who is CSS3 in 30 Days for?

Web Designers & Web Developers who are just starting out, or have Intermediate Level experience with CSS and want to have a strong grasp on CSS3 without relying on Frameworks, Code Snippets, Templates or Plugins.

Let's get started!

Who this course is for:

New web developers
New web designers
Experiences designers & developers who want a refresher on CSS
Anyone who wants to learn how to manipulate webpage styles with CSS

Become a CSS Master: Code 30 Projects in 30 Days

What you'll learn

Explore related topics

Course content

Welcome to CSS in 30 Days!4 lectures • 9min

Code 30 Projects in CSS32 lectures • 8hr 25min

Requirements

Description

Who this course is for: