Budget YouTuber: Ep 2
A Simple HTML Puppet
Required Tools:
This tutorial assumes you are proficient in the following 3 tools.
If you don't know GIMP, watch Episode 1
of this Budget YouTuber series.
| Tool Type | Cynic's Choice | Alternatives | |
|---|---|---|---|
| Image Editor |
GIMP
|
Inkscape
MS Paint
Photoshop
|
Anything that can produce PNG Images with Transparent Backgrounds |
| Web Browser |
Firefox
|
Brave
Chrome
Safari
|
Any web browser can display the simple HTML file we are going to create |
| Text Editor |
Notepad++
|
Notepad
BlackNotepad
|
Or use a fancy fully featured Programming IDE. Some popular options are: Eclipse, IntelliJ IDEA, Visual Studio, Emacs, or VIM |
Skills You'll Learn:
In this video, I'll cover the absolute basics of the following 3 tools.
You don't need any prior knowledge for them.
| Tool | Project File | What File Will Do | |
|---|---|---|---|
HTML 5
|
index.html |
|
HTML stands for HyperText Markup Language. All websites use HTML at their core. |
CSS 3
|
puppet.css |
|
CSS stands for Cascading Style Sheets. It can change sizes, colors, borders, opacity, etc. More complex transformations & filters are also possible. |
JS
|
puppet.js |
|
JS stands for Javascript. It allows for a powerful custom code to run in a browser. |
Caveat:
I will NOT use best programming standards in this episode.
These files will be as simple as possible for beginners.
In future episodes, I'll add in some best practices & programming standards