CSS Crash Course

Current Status
Not Enrolled
Price
Closed
Get Started
This course is currently closed
Course
Materials

Welcome to the CSS Crash Course.

This is our first course and is here by popular demand. This is a free course and uses modern learning techniques such as H5P, CodePens and our H5P for LearnDash Plugin to empower a platform that delivers a fast paced, hands on CSS learning experience. Our H5P for LearnDash plugin will control LearnDash so you’ll need to pass quizzes built in to the H5P before you can continue. If you miss the quiz, the video will rewind automatically and replay that specific chunk over and over again until you get it. H5P will remember where in the video you left off and will resume from there automatically next time, so you are free to move about the cabin.

This course is a beginning course. It is a first course on CSS and will teach you the basics. It doesn’t go into CSS for WordPress or how to use the Inspector or how to disable the LearnDash Mark Complete button using vanilla JavaScript on a lesson or topic page. These will be addressed in later courses. This is a beginning course, so please keep this in mind.

So before we get going I would like to thank Brad Traversy for the course and he his many more excellent courses. For this beginning course we have chosen not to reinvent the wheel, but repurpose Brad’s video instead. In most future WordPress and LearnDash videos we will create the videos ourselves.

Here is the YouTube link to this course:

Brad’s CSS Crash Course on YouTube

If you feel you are in over your head with CSS and need to take a HTML course first, here is a link to Brad’s HTML Course on YouTube.

Brad’s HTML Crash Course on YouTube

Course Setup Steps:

We highly recommended that you use text editor on your local computer and take the time to enter the code manually into your text editor. This will reinforce your learning process and you will learn from your mistakes too and that will happen! Pause the video when you need so you can do this. You can click the full screen button to go full screen and the the escape button to return to normal size.

If you do not have a text editor please download and install one on your local computer. I like WebStorm, which is not free but has a 30 day free trial. I use it’s bigger brother: PHPStorm for my WordPress and LearnDash plugin development, so if you plan to follow this series up to master developer and do not have a text editor please give WebStorm a spin.

Different Code Editors You Can Use (just use the one you are currently using or just pick one):

Sublime Text

Atom

WebStorm

Watch The WebStorm Video

Brackets

Visual Studio Code

Brad uses Sublime Text in the video but any code editor will work. Many code editors have “Emmet” built in or available as an extension with speeds up the process of writing html code. In the video Brad may say “type html and press the tab key” to produce the html for you, but if this does not work like in the video, with your code editor type “!” , the first character of !doctype and press the tab key. If that does not work then see about installing emmet or just type it in by hand.

Emmet

Please click the Code For This Course link to download the completed code.

Code For This Course

In addition to following along with Brad step by step with your code editor and browser on your computer, play with the codepens that will appear in lessons and in quizzes. Just click the “html” or “css” tab and try things out. You can delete or edit the code already in them and play and learn. Treat this course as a playground to learn CSS. The key to this course is to experiment and have fun!

So when you are ready, let’s roll up our sleeves and learn the basics of CSS! Let’s get started.