Hack YouTube!
(sort of)
gakkoproject.com/newyork
gakkoproject.com/newyork
@alexqin
gakkoproject.com/newyork
gakkoproject.com/newyork
Hack YouTube!
(sort of)
gakkoproject.com/newyork
You will learn:
To read and manipulate source code
To transform the appearance of a website
The building blocks of web development
by:
Asking questions
Collaborating
"Hacking" your own page
HACKING
gakkoproject.com/newyork
giving a computer instructions to execute
hacking
programming
coding
gakkoproject.com/newyork
"black hat hacking"
gakkoproject.com/newyork
giving a computer instructions to execute
hacking
programming
coding
gakkoproject.com/newyork
www.youtube.com
Let's read some source code
gakkoproject.com/newyork
instructions for the browser
source code
gakkoproject.com/newyork
browser
a program that allows us to navigate the Internet
gakkoproject.com/newyork
browser
gakkoproject.com/newyork
instructions for the browser
source code
gakkoproject.com/newyork
HyperText Markup Language
HTML
gakkoproject.com/newyork
Transform the YouTube homepage!
- Change the "Trending" title
- Remove a video
gakkoproject.com/newyork
Questions?
gakkoproject.com/newyork
Transform the YouTube video page!
Change the masthead background color
gakkoproject.com/newyork
The masthead
gakkoproject.com/newyork
Cascading Style Sheet
CSS
gakkoproject.com/newyork
CSS
HTML
describes the content
describes the style
gakkoproject.com/newyork
Transform the YouTube video page!
- Go to www.youtube.com
- Pick your favorite (PG) YouTube video
- Change the video title
- Change the page background color
gakkoproject.com/newyork
Questions?
gakkoproject.com/newyork
Pair up & hack the video page
-
Change the number of thumbs up/down
-
Change the number of views
-
Change the Subscribe button background color
-
Change the Subscribe button text color
-
Change the top comment text
-
Delete some comments
-
Change the commenter profile images
- Change the Up Next video image
- Pick a new theme for the page (eg. CatTube)
- Make the page not look like YouTube anymore!
gakkoproject.com/newyork
giving a computer instructions to execute
hacking
programming
coding
gakkoproject.com/newyork
gakkoproject.com/newyork
HTML
CSS
gakkoproject.com/newyork
Demo time!
gakkoproject.com/newyork
Sign up to learn more:
- w3schools
- codepen
- codecademy
Beatmaking Fair
with Graham Banfield
@ 5pm