Web Development Tutorial – JavaScript, HTML, CSS – Rock Paper Scissors Game

This web development tutorial shows how to use JavaScript, HTML, and CSS to create a Rock Paper Scissors Game in the browser.

Tutorial by whatsdev. Check out their channel: https://www.youtube.com/channel/UC0tRdbXVDbhaRvZPKsRgmxg

Code link coming in a few days.

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp


Zeus Botko says:


Marco Zapata says:

I just started with CSS and HTML a few months ago so forgive me if my question sounds silly but instead of adding font-family: Asap, sans-serif to every class that needs it wouldn’t it be more productive to just add to the Universal selector the font family of Asap and just use font-family to the classes and id’s you WON’T be using Asap (in case you needed)?

Puscky Design says:

function feedback(youtubeVideo){
if(youtubeVideo == “amazing”){

} else {
// Thank you for this amazing tutorial! 🙂

Monster.Script says:

This is a great idea!


wow… could you tell me what is the name of your color picking tool? It’s awesome…!

invictux says:

Nice video

Laurent Duzant says:

ill try to build my version of this when i get home!!

Med Elamine ELMOUTASSIM says:

great whay don’t left code app below tuto

Hansiu says:

Need PNG files 🙂 Thanks for learning material 🙂

mohiuddin akib says:

52:40 switch (userChoice + computerChoice) {
case ‘rs’:

case ‘sp’:

case ‘pr’:
console.log(‘User wins’);
console.log(userChoice, computerChoice);

case ‘rp’:

case ‘ps’:

case ‘sr’:
console.log(‘Computer wins’);
console.log(userChoice, computerChoice);

console.log(‘Match drawn’);
console.log(userChoice, computerChoice);
} this reduces some extra line

herm0s says:

for me it says in console “Uncaught TypeError: document.GetElementById is not a function at app.js:3”

Mike S says:

Thanks for presenting and sharing a great tutorial!!!

Thiago Tavares says:

what’s that atom packages theme?

Sreekumar Prabhakaran says:

Positioning that ‘user’ and ‘comp’ badge was cool! That was super cool!! Dhanyawad!

Suraj-a-Tron says:

What theme on Atom are you using?

Darkthuggg says:

Really like that color picker, what is the name of the extension?

Ogun Usluer says:

That looks cool

Himanshu Nahak says:

I sat and watched the entire video and this was very informative!

Kevin M says:

Where can i find the images ?

Aung Khant Ko says:

good shit

priyabrata sahoo says:

which IDE did you use here???

Mukesh Rajpoot says:

Is it HTML5/CSS3

Mitesh Patil says:

need more videos like this thanks freecodecamp

Sylwester Zientara says:

for a beginer explain a lot , and make it easier to understand , spesialy when you learning on #freeCodeCamp.org

coffeend code says:

Learn JavaScript with great example here http://coffeendcode.com/JavaScript/javascript_introduction.htm

Vine game says:

How do you got those emojis??? i tried but it didn’t happen!

bobans says:

Nice tutorial. You should try VS Code instead of Atom, it’s much faster!

Trex_ son says:


Faraz Frank says:

best video uptill now 🙂

Yasser Akbbach says:

I liked the way u dealt with probabilities using switch (y)

4NM15IS025 KISHORE S says:


jjc jjc says:

How can I get those images?

Chit Winton says:

Awesome mate, kept getting confused because you were making mistakes yourself or seen you make a mistake and thought that cant be right until you realised yourself but it shows i am understanding more, extremely helpful video, you seem like you have a passion for it and it really helped me out here’s my version of the game if you fancy a look, most of its your code but ive changed the html and css to how i want it and added a few things, the javascript i still dont fully understand so just copied 😛 https://codepen.io/Snakee06/pen/vQXLqb

Mücahit GENÇ says:

Nice tutorial. I like it.

whatever Iwant says:

best part 42:00.. I finally know what random()*3 does… I just used it before..

ollie says:

cant add an event listener to rock_div because its null. what do you guys suggest ?

iDF-Hagenees says:

Thx for this nice tutorial!

New World says:

This was awesome !!!!

Vô Nghiệm says:

So fantastic. The boy is really humorous. Thanks a lot about helpful tutorial!

Erick Nishimoto says:

Thx from Brazil!!!

Carlo Gimpaya says:

13 dislikes what!??

J_Net Reloaded says:

Code link coming in a few days.? reply when its available

Slightly Moddified says:

Great video

Przemek Waszkun says:

what text editor is that?

Tony Quigley says:

Hi man i know you’re really popular and stuff so you probably won’t have
time to even read this, let alone answer it, I’m trying to learn how to
code in Java and Javascript, following it up with Python. Im not very
good at all at the moment, im wondering, when i eventually do go for an
entry level job in programing or testing or debugging, what kind of
stuff will be expected of me? Because I’m kind of freaked out here, I’m
watching guys creating snake and flappy bird and brick breaker in 6
minutes amd guys who just seem to know how to do everything without
having to look up references… also, can you tell me roughly what i
could expect fir basic pay as a new entry level programmer? Thanks so

 Write a comment


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!