Introduction to CodePen.io
In this first section of the roadmap, you will get your hands right on some programming tasks, and you will also be able to show your work to friends and relatives.
Why?
Because you should be freakin' proud of each step you take 😎
Throughout this section, you will use CodePen.io.
Follow this link, play around, create an account and learn how
this platform works.
It's as simple as clicking on "start coding":
The main benefit is that you will be able to write code without worry with the whole infrastructure and computer setup.
It's a shortcut that let you dig right into the Web Development pulp.
No boring setup steps, no platform-dependent struggle (they will come later on anyway...)
Let's Get Started
Here is a short video that will introduce you to CodePen.io, your goal is to become comfortable with the basic editor options and with creating and sharing a pen with your friends.
This is a way more extensive video. It's almost 15 minutes, but I believe the guy explains things very well. Mind that he will get into some really advanced topics, so don't feel compelled to understand everything he shows 😀
Demo Everything You Build!
This roadmap is set up so that each challenge produces some kind of visual results. In the beginning, it's going to be very simple stuff, but you will soon be able to create real Web Applications leveraging CodePen and other online tools.
It is therefore important that you can demonstrate your progresses to your friends and significant ones. I often demo my creations to my wife... sometimes she likes it even! :-)
Here is a good tutorial how to run CodePen in demo mode