It's a DOM world...after all!
Power(JS), Style(CSS), Structure(HTML), Flexibility(BS5)
Yeah! The 'Fantastic Four' (HTML, CSS, JavaScript and Bootstrap5) inspire singing and dancing...
...and are used in this app, based on a template created at Tech Novice Tools.
The various verses, categorized by their content, whimsically chronicle the use of these four web technologies in the web world!
Future versions of this song will include additional graphics and hyperlinks to get the point across.
Don't remember the original tune? We've got your covered with Small World movie clip!
Need a little review on the original Fantastic Four? We've got you covered!
The Basics
Introducing! The Fantastic Four!
It’s a marvel you just can not ignore
You are friendly with
The Fantastic Four!
HTML, CSS
JavaScript, Bootstrap, yes!
It’s a DOM World after all!
Basic web page elements
We can place a tag
Implement a style
(It’s not Java so
No need to compile)
Write a script
Bootstrap on,
Link a cute favicon
It’s a DOM page after all!
It's a DOM World after all
It's a DOM World after all
It's a DOM World after all
It's a DOM DOM world!
Validation
One big thing your teacher
Appreciates
Is when all your web pages validate
Structures strong, styling sound
You’re not clowning around
It’s a DOM DOM world!
DOM Stuff
Page loading readiness
Once the body loads
Grab an element
It’s an object found in the document!
Use a class or ID
Modify properties
It’s a DOM DOM page!
Target and update web content
Target elements with well-named IDs
And updating content becomes a breeze!
It is great, it is swell,
InnerHTML!
It’s a DOM page after all!
It's a DOM Page after all
It's a DOM Page after all
It's a DOM Page after all
It's a DOM DOM page!
Create/Insert DOM tag node elements
Have a data set that you need to load
You can tackle that with a parent node
Make a child to append
To your data attend
It’s a DOM DOM world
JavaScript Data Structures
General reference: Data structures
Data structures wow!
Give them lots of praise
Using tons of them,
Likely earns ‘a raise’
Did you see
This verse done
Did you catch the big pun?
It’s a DOM DOM web!
Array mechanics: push, pop, loop iteration
With arrays for storage
We push and pop
Iterating through them
Till the loop stops
Use a 'for' or a 'while'
It depends on your style
It’s a DOM DOM web
It's a DOM Web after all
It's a DOM Web after all
It's a DOM Web after all
It's a DOM DOM web!
Bootstrap and DOM
Add/remove Bootstrap classes from an element
Bootstrap thrives on class,
And with JavaScript
To change classList members
You’re now equipped
Add, remove to improve
Yeah the process is smooth
It’s a DOM world after all!
Widgit Wonders
<input type='range'> usage
Type range attributes in
An input tag
Make a slider bar
Everyone will brag
Set a min, a max too
Midrange values ensue,
It’s a DOM DOM world!
P5JS Animation
P5JS: setup, draw, loop
Using animations
Caused much distress
Till the advent of framework P5JS
Setup, draw with a loop
Watch some object go ‘swoop’
It’s a DOM DOM web
Multi-page Sites
Local storage
Local storage solves all your
Transfer woes
Sending data tween pages
There it goes
Stringify, parse, JSON
Try them out, it’s game on!
It’s a DOM DOM web