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.
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:
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.
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):
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.
Please click the Code For This Course link to download the completed code.
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.