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

  Рет қаралды 926,273

freeCodeCamp.org

freeCodeCamp.org

5 жыл бұрын

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: / @whatsdev
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org

Пікірлер: 959
@suraj-ram7488
@suraj-ram7488 5 жыл бұрын
Honestly, one of the best videos that show how to combine your HTML, CSS and JS skills
@kmz16
@kmz16 5 жыл бұрын
is there any projects like this in yt?
@abdelrahmanelshemy3841
@abdelrahmanelshemy3841 5 жыл бұрын
F
@_.sunnyraj._
@_.sunnyraj._ 4 жыл бұрын
Thx
@TheLifeOfMarcus
@TheLifeOfMarcus 3 жыл бұрын
Yea. I have learned js but never really used it in a website because I didn’t know how to
@discjrolli
@discjrolli 3 жыл бұрын
U r right ram bro
@pjsingh569
@pjsingh569 5 жыл бұрын
I love that he shows how the page looks after every step has been applied. very detailed.
@prointernetuser
@prointernetuser 2 жыл бұрын
I like how he tests with console.log every time he writes a function. That's good coding discipline.
@manishgarhwal7119
@manishgarhwal7119 5 жыл бұрын
Man,,, I gotta say it.... I FOUND THE BEST TEACHER OF ALL. THE WAY YOU EXPLAIN ( EVERY MINOR DETAIL). DAMN BRUH.
@hodgepodge3923
@hodgepodge3923 5 жыл бұрын
Just ran through the entire tutorial now. Thank you so much for the upload, learnt quite a bit and really excited to be adding interactivity to my own website soon. Keep up the good work.
@moea.9120
@moea.9120 5 жыл бұрын
When we know HTML, CSS and JS, we can do almost everything in terms of web design.
@JohnLow7627
@JohnLow7627 5 жыл бұрын
@@RyeRob.isnt it node is base on javascript?
@flumiie
@flumiie 5 жыл бұрын
Anything that encompass front-end, including desktop app like electron for example @@JohnLow7627 NodeJS as the name says.
@WinterSnowism
@WinterSnowism 5 жыл бұрын
Node brings Javascript out of the browser. Which means Javascript can now be used for anything (server, desktop, mobile, web, games, etc.)
@mr_wormhole
@mr_wormhole 5 жыл бұрын
wrong, you have to know frameworks(react,vue,angular, bootstrap,etc...) of js to be able to do some serious stuffs or your web design will be close to 90s and 80s.
@nomatter56
@nomatter56 5 жыл бұрын
@@mr_wormhole 😩is that so!? Nevermine, even you can do a huge efficient and an effective web using bootstrap css html. Java script also. All these were very easily found! So can easily do.
@IsraelHernandez-fq9dy
@IsraelHernandez-fq9dy 5 жыл бұрын
I love how he combines HTML , CSS , and javascript and explains his whole thought process. Some other videos the person just writes codes and doesnt explain why they did it. . Really good video
@bob-ny6kn
@bob-ny6kn 3 жыл бұрын
Real coders comment their code.
@IsraelHernandez-fq9dy
@IsraelHernandez-fq9dy 3 жыл бұрын
@@bob-ny6kn god coders don’t need comments
@bob-ny6kn
@bob-ny6kn 3 жыл бұрын
@@IsraelHernandez-fq9dy Good coders comment. You are referring to people who think they are irreplaceable, but are not. I did loads of unpacking code so it could be reused or modified.
@IsraelHernandez-fq9dy
@IsraelHernandez-fq9dy 3 жыл бұрын
@@bob-ny6kn it was a joke my guy , get the stick out of your ass
@bob-ny6kn
@bob-ny6kn 3 жыл бұрын
@@IsraelHernandez-fq9dy oops. sry.
@saidsaid-nn1qk
@saidsaid-nn1qk 3 жыл бұрын
This is so good, clear and short with no gibberish or unnecessary explanation , I just love it !
@jonhatfield9902
@jonhatfield9902 2 жыл бұрын
This is like one of the small, select few KZfaqrs that actually do high quality teaching. Thank you so much for your excellent videos.
@navalkumarshukla9447
@navalkumarshukla9447 3 жыл бұрын
Wow man, total respect for ya. Especially the way he explained his thinking process (in a fun way) was super duper fun to watch. It was such a pleasure to write a code with something like him.
@santigogaming8630
@santigogaming8630 3 жыл бұрын
i'm proud of saying: I made the game in my computer and learned a lot of things. Thank you!
@sarahrose7198
@sarahrose7198 4 жыл бұрын
Great video! Very easy to follow, explained thoroughly, straightforward, and your tangents didn't branch too far off; just enough to learn helpful little tips, then right back to the point. The upbeat attitude kept me more engaged, excited, and absorbing more info than KZfaqrs with monotone voices who speak rather quickly
@mytwins5653
@mytwins5653 11 ай бұрын
Best video of making rock paper scissors ever. So simple and easy to understand. I like the way he explains what he is doing and why. Much better than many other people just writing without explaining. Thank you.
@outis99
@outis99 4 жыл бұрын
I followed all the HTML CSS and then did the entire Javascript almost on my own, I looked to see how to use event listener some function ideas but the mechanics I coded on my own and it was really fun how we did it basically the same! Awesome tutorial!
@LUCKYYT-fq6xq
@LUCKYYT-fq6xq 6 ай бұрын
where i can get png images
@TbirdEnergy
@TbirdEnergy 4 жыл бұрын
Love how fast this is. I'm working on my own projects, so this was perfect to help me learn to tie things together more eloquently. Deepened my understanding on a couple things such as the DOM. Thanks! Also reminded me to look for immediate feedback after every step by refreshing the index page. Great quality and well spoken. Learned a few more css tools as well :]
@abdouseck4894
@abdouseck4894 4 жыл бұрын
learning to interact with the dom is a great way to get into javascript
@danielmadison4451
@danielmadison4451 4 жыл бұрын
Very nice. Coming from a 30 year background Assmbly, Fortran, Pascal, C, C++ and now learning Web Design HTML5, CSS, JS, PHP , Servlets. GREAT VIDEO... Does it all. Thanks
@HimanshuKumar-xz5tk
@HimanshuKumar-xz5tk 3 жыл бұрын
While following the tutorial, I developed my own code, and it was working fine. Then I saw yours. It had better readability and was done in less number of lines. Plus I didn't know we could access a CSS class in JS. I used style.border in JS itself. Today, I learnt a lot. Thank you so much,
@willurban837
@willurban837 5 жыл бұрын
Thank you for the tutorial, it was my first time using HTML, CSS and JS all together. I really had a good time following this video and learned a lot.
@MuhammadArshad
@MuhammadArshad 5 жыл бұрын
Thank you man, this is my first JS tutorial, coming from Python, you made it quite easy for me. Appreciate it. :)
@nicolasazoidis9064
@nicolasazoidis9064 5 жыл бұрын
Bro you are the best teacher in plain English! I think i would learn programming just hanging out with you and talking...my respects. You should become the main teacher at FCC.
@kenhsu4229
@kenhsu4229 4 жыл бұрын
This is really a fantastic intro for web developing beginners. Even though I have no basic knowledge about JS, it's still easy to understand by what the hoster instructed or explained in the video(for those people who are watching this, I recommend you pause the video and search those unfamiliar methods or functions by yourself when you are stuck). This is an absolutely rare masterpiece that can be so simple to learn but simultaneously maintain its complexity. Great job! Please keep making these types of thorough tutorials. I believe that it will definitely benefit more people, especially students and beginners!
@Ginfio
@Ginfio 4 жыл бұрын
This is like a movie episode. I can’t stop watching.
@martinmecir2548
@martinmecir2548 4 жыл бұрын
1:19:40 You know he is programmer, when he start counting seconds from 0 BTW Thanks for great tutorial!!!
@lplache
@lplache 4 жыл бұрын
HAHA lol!
@samixpunch9678
@samixpunch9678 3 жыл бұрын
hahaha I am not a real programmer but I get it lol
@trumpgaming5998
@trumpgaming5998 3 жыл бұрын
@@samixpunch9678 no its because you actually count from 0 in programming
@cluelessdev3851
@cluelessdev3851 2 жыл бұрын
okay, 11 minutes in and this is amazing! This is probably among the best tutorials so far. I already know how to programm so it is a bit tedious to look at more beginner tutorials so this is amazing. Thanks a lot man
@mhnarun
@mhnarun 3 жыл бұрын
What a fantastic video! Please continue to keep doing these short and crisp videos!
@lueizack6639
@lueizack6639 5 жыл бұрын
brother you nailed this tutorial i mean nothing could be better than ur explanation awesome job bro keep learning for our learning
@IQUBE
@IQUBE 4 жыл бұрын
For those of you getting this error : Uncaught TypeError: Cannot read property 'addEventListener' of null Do this: on the first line of app.js add this piece of code : document.addEventListener('DOMContentLoaded', () => { // all code goes inside here // all code goes inside here }) Hope this helps :)
@funnybro6504
@funnybro6504 4 жыл бұрын
You saved my life dude!! I was stuck in this for so looooong!!
@emailbot3278
@emailbot3278 4 жыл бұрын
Oh this worked!! Thanks
@gamerpro-ke9pi
@gamerpro-ke9pi 4 жыл бұрын
Thanks a lot man!! I couldn't find anything in Stack Overflow but I found your comment and it worked
@jevitamariasaldanha1618
@jevitamariasaldanha1618 4 жыл бұрын
Just to clarify, paste the entire code of the file inside this function guys.
@a.n.7338
@a.n.7338 3 жыл бұрын
hi i am getting error at function rock.addEventListener("click", function()) can someone help me?
@hochingcheung7020
@hochingcheung7020 4 жыл бұрын
I am a beginner of JS. Your explanations are very clear and detailed. Like the debugging parts. Learn a lot from this video. Thank you very much :)
@3xxiled
@3xxiled 4 жыл бұрын
dude, great video; fast paced learning is what I'm all about. A lot of other tutorials spend way too much time re-explaining concepts, which I agree is important for people. But for me, I just need to grab the important details and move on.
@md.akib5124
@md.akib5124 5 жыл бұрын
52:40 switch (userChoice + computerChoice) { case 'rs': case 'sp': case 'pr': console.log('User wins'); console.log(userChoice, computerChoice); break; case 'rp': case 'ps': case 'sr': console.log('Computer wins'); console.log(userChoice, computerChoice); break; default: console.log('Match drawn'); console.log(userChoice, computerChoice); } this reduces some extra line
@MrStealthWarrior
@MrStealthWarrior 5 жыл бұрын
@@MilanDrazic There are only 9 possible combinations. How in the world there could be more draws when 6 options are covered?
@MrStealthWarrior
@MrStealthWarrior 5 жыл бұрын
@@MilanDrazic Then it's just the way random works.
@iBakoBence
@iBakoBence 5 жыл бұрын
Man, You teach pretty damn well! Thank you! :)
@DougieNMySnuggy
@DougieNMySnuggy 5 жыл бұрын
Amazing job explaining everything! I'm new to CSS/Javascript, but not new to coding in general so this was perfect for me.
@kriete2883
@kriete2883 5 жыл бұрын
This video litearlly was the source that helped me figure out how to put a score board onto my js pong game for my class. Learning how to make a html/js/css into one note pad file was thanks to you man!
@pshreekumar
@pshreekumar 5 жыл бұрын
Positioning that 'user' and 'comp' badge was cool! That was super cool!! Dhanyawad!
@sounak2009
@sounak2009 5 жыл бұрын
"I am never losing. I think there's something wrong there" LOL
@anuragchitnis9330
@anuragchitnis9330 5 жыл бұрын
I am following your channel from a long time... And this is one of the few channels where I like the video then I will watch it..... Thanks for amazing content freecodecamp guys
@TheAznBeaner
@TheAznBeaner 10 ай бұрын
your ability to explain what you're doing is very considerate and clear, thank you
@sal_amat498
@sal_amat498 5 жыл бұрын
Good job very nice tutorial, and well presented.. make more tutorial sir. Tnk u
@life_is_music7686
@life_is_music7686 3 жыл бұрын
Just saying, if you use Visual Studio Code, there is an extension called live server so basically whenever you save, it shows up on the localhost ur working of :)
@ksc5552
@ksc5552 3 жыл бұрын
you just explained all concepts really clear that I felt confused when I saw other videos about this topic html, css, javascript. Thank you so much !!
@Hirand2349_3
@Hirand2349_3 3 жыл бұрын
Woah! what an explanation and u beautifully combined HTML,CSS,JS ... Hats off u
@ErickNishimoto
@ErickNishimoto 5 жыл бұрын
Thx from Brazil!!!
@PedroHenrique-es8rv
@PedroHenrique-es8rv 5 жыл бұрын
​@@fabioleonam Entra no canal dele e olha.
@nabilfahimi9061
@nabilfahimi9061 5 жыл бұрын
where di you get the images fomr?
@shantanumaitra8192
@shantanumaitra8192 5 жыл бұрын
Great!👍 I Wish My College had Teachers like you who explains so well🙌🙌
@sathvikvutukuri9179
@sathvikvutukuri9179 4 жыл бұрын
I have followed each and every step along with some extra features i have added. Great tutorial from which i learned a lot.
@chandanswroop3932
@chandanswroop3932 5 жыл бұрын
Well Nice video.!!! But next time tried to write code in bit larger Font size in bright screen which helps in to make more understandable.. Good Explanation.. Keep it up.
@jaydon.2833
@jaydon.2833 5 жыл бұрын
bright? thats R A C I S T
@prateshtamhankar3568
@prateshtamhankar3568 5 жыл бұрын
hi, i really like this tutorials, it is like a spoon feeding , please let me know from where i can get those icons. thank you
@himanshunahak5105
@himanshunahak5105 5 жыл бұрын
I sat and watched the entire video and this was very informative!
@alenahalota5593
@alenahalota5593 5 жыл бұрын
That was fun and a great exercise for practicing. I also appreciated that you showed some ES6. Thanks!
@lucasreis49
@lucasreis49 5 жыл бұрын
const choices = ['Rock', 'Scissors', 'Paper']; const getComputerChoice = () => {return choices[Math.floor(Math.random() * choices.length)]}; function game(userChoice){ let compChoice = getComputerChoice(); if(userChoice === compChoice){ draw(userChoice, compChoice); }else{ if( ((choices.indexOf(userChoice)+1)%3) === choices.indexOf(compChoice) ){ win(userChoice, compChoice); }else{ lose(userChoice, compChoice); } } } This reduces some lines. Also you don't need to use convertToWord anymore, you can just use: `${userChoice} beats ${compChoice}. You win!` for example.
@bradliu1891
@bradliu1891 4 жыл бұрын
One Important question: where to download those three png files? Thks!
@firdauz7413
@firdauz7413 4 жыл бұрын
i'm using another clip art, the result not as exact as it should, but it's fun because i need some modification and i'm happy for that, this is my new skill during quarantine xD.
@clownn7267
@clownn7267 4 жыл бұрын
u are literally the best dude on this platform for tutorials.. nice job
@linhbebu912
@linhbebu912 2 жыл бұрын
I don't normally comment on KZfaq Videos but this is a great tutorial with all the explanations. Thanks so much!
@marcozapata6984
@marcozapata6984 5 жыл бұрын
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)?
@PunyuPunyuMunyu
@PunyuPunyuMunyu 5 жыл бұрын
He know and he mention that on video
@orpheuzdevelopment4098
@orpheuzdevelopment4098 5 жыл бұрын
or just add it to the body element
@nomatter56
@nomatter56 5 жыл бұрын
Check out my chanel
@ShivamPanchbhai
@ShivamPanchbhai 4 жыл бұрын
he removed the hover function while explaining javascript give us the art work please watch dom tutorial videos first for the javascript part in this video he is using atom code editor in dev mode and had installed the following packages in it: file-type-icons atom-html-preview atom-css-comb color-picker atom-beautify open in browser(cnrl-alt-o)
@samoguz
@samoguz 4 жыл бұрын
Your explanations are outstanding. It truly shows how knowledgeable you are. Thank you!
@cyberbiosecurity
@cyberbiosecurity 5 жыл бұрын
best tutorial video on web dev i've seen so far
@EduardoLeviBC
@EduardoLeviBC 4 жыл бұрын
excellent tutorial, congrats! just couldn't do the classList.. it showed "Uncaught TypeError: Cannot read property 'classList' of null"
@brendanleighton
@brendanleighton 4 жыл бұрын
You ever figure this out?
@stspapergenius
@stspapergenius 3 жыл бұрын
@@brendanleighton did you ever figure it out? lol. I'm so stuck
@brendanleighton
@brendanleighton 3 жыл бұрын
@@stspapergenius Sorry, I don't remember this at all. I probably found an answer through Google. Literally, just copy and paste the error message into Google and you will probably find the answer.
@ausglobeman
@ausglobeman 5 жыл бұрын
omg what was that app that tells you the color of something I NEED IT
@qsmfoui
@qsmfoui 4 жыл бұрын
sip color picker
@omaralsayed6842
@omaralsayed6842 2 жыл бұрын
Easiest way used to explain Javascript . Hope I can find more videos like that..
@csking9929
@csking9929 3 жыл бұрын
Thanks for the tutorial! this makes me clearly know how html, css, javascript work with each others in a very fun way!
@marufawal
@marufawal 5 жыл бұрын
Hi I'm a newbie how did all you guys get the rock paper scissor images?
@marufawal
@marufawal 5 жыл бұрын
@Lucas thanks fam
@marufawal
@marufawal 5 жыл бұрын
@Martin Bekus thanks fam
@EyesReye
@EyesReye 5 жыл бұрын
Could have just renamed the Div ID's to Rock Paper Scissors instead of writing a whole new function for it.
@muhayminkhan7063
@muhayminkhan7063 4 жыл бұрын
Wow i am a beginner in Javascript but i understood every single word here because his explanation is so good. Thanks you for this video. It really help me a lot
@krisztinapap4208
@krisztinapap4208 5 жыл бұрын
Thank you for the wonderful tutorial! It's so great to have the opportunity to see the entire development process from beginning to finish!
@bobans
@bobans 5 жыл бұрын
Nice tutorial. You should try VS Code instead of Atom, it's much faster!
@Silverjerk
@Silverjerk 5 жыл бұрын
Atom and VSCode are both built on Electron and perform very similarly. Although I use VSCode myself, I was an Atom user for years and it's still an amazing editor. Github and Microsoft have also collaborated heavily on development, so while the "Use VSCode" recommendation is an extremely popular response, it is often based on the notion that everyone should be using the most popular editor at the time, because both editors are now on similar roadmaps. It took me almost 6 months to transition away from Atom, due to how heavily invested I was in that environment, how much tweaking and theming work I had done, and how effective I was at using it. Before that I had similar challenges switching from Textmate to Sublime. So although I do love VSCode, if it weren't for some of the built-in functionality I'd probably still be using Atom, as I do run into some issues with VSCode that make me regret switching from time to time. Sometimes using an editor isn't as easy as "use what's popular;" for a professional developer working full-time on a team, shipping and looking at deadlines on the horizon, the notion of switching can be a daunting, and potentially hazardous one.
@bobans
@bobans 5 жыл бұрын
@@Silverjerk nice response. Very well documented and clear. You are right about the switch from an editor to another, because the learning curve takes time and time is not something to take for granted in 2018.
@Silverjerk
@Silverjerk 5 жыл бұрын
​@@bobans Definitely. And despite what I said above, I'm happy to be living in a world where deciding between editors is a difficult choice, because many of them are making good arguments for themselves. I've been through my share of frustrating experiences, so I always try and check myself a bit when I start complaining about this or that feature, remembering there was a time when I was writing HTML in Notepad.
@Silverjerk
@Silverjerk 5 жыл бұрын
@@ShelterDogs Again, there just isn't that much of a difference between the most popular editors to justify a shift in workflow if it's not a requirement (e.g., if you're part of a dev shop that imposes ubiquity between its team members' tools). And even your own point is self-defeating. We can't ALL be on the same page, since VSCode has about 40% of the market right now, with Atom taking up 20%, and Sublime another 30%. So yes, it is about personal preference. Your argument would be valid if everyone was using the same editor, but the reality is that MORE people are using editors that AREN'T VSCode. And here's the thing, I think VSCode is probably the best editor that's come to market, and one of the best products Microsoft has ever released, but your "ugh" reaction seems to be based more on why this guy isn't using the FOTM editor, rather than any real argument against Atom, which is still an amazing editor in its own right (and is even using a shared roadmap with VSCode). Something to also keep in mind is that no tool is perfect. I ran into an issue with VSCode's Prettier plugin during the last update, as it broke formatting in several document types. I ended up working in Atom for a couple of weeks as the workaround was a bit hacky and kind of a pain in the ass. It took me about 10 minutes to install some of the additional plugins I was using in VSCode and the experience was almost identical. The only thing I missed was my Monakai Pro theme.
@Darkthuggg
@Darkthuggg 5 жыл бұрын
Really like that color picker, what is the name of the extension?
@sob3ygrime
@sob3ygrime 5 жыл бұрын
agreed!
@mystickid1
@mystickid1 5 жыл бұрын
@Darkthuggg it's called "Sip" on the mac. FInd it at sipapp.io/
@sakshammanocha640
@sakshammanocha640 5 жыл бұрын
Colorzilla for windows
@sob3ygrime
@sob3ygrime 5 жыл бұрын
@@sakshammanocha640 thanks so much got it added to my tool belt :)
@Silverjerk
@Silverjerk 5 жыл бұрын
Frank Deloupe is also a great, minimal app as well.
@mellepella
@mellepella 4 жыл бұрын
The explaining of all the code in this video is good and understandable, but one thing I find important to teach new coders is how to organize all the code. If they don't do that they will find out that the hard way by needing to scroll down thousands of lines of code to find whatever you want to change. You organized HTML, CSS and Javascript separately and that's good, but you have to organize it a little more specific, for example: styles (folder) > typography.css (where you will find the CSS for things like font-family, text color, font-size and so on). Other than that, great video!
@yakeanvanv8737
@yakeanvanv8737 4 жыл бұрын
Thank you man I finally finished this tutorial was super fun found a new interest!!
@jaimebastida8956
@jaimebastida8956 5 жыл бұрын
Which is the name of the color picking tool?
@trungpvq8181
@trungpvq8181 5 жыл бұрын
u can use Colorzilla extension on chrome
@jaimebastida8956
@jaimebastida8956 5 жыл бұрын
@@trungpvq8181 Thanks!
@Kidaar
@Kidaar 5 жыл бұрын
Full screen please
@nomatter56
@nomatter56 5 жыл бұрын
Check out my chanel
@Amolang991
@Amolang991 4 жыл бұрын
thank you for this video, this doesnt even have any advertisement.
@suhailmalik8248
@suhailmalik8248 5 жыл бұрын
You are a great teacher. I didn't get bored. Thanks for tut.
@navalkumarshukla9447
@navalkumarshukla9447 3 жыл бұрын
If anyone's looking up for the code reference, here's the one that I have written (which is almost the same that has been given in the video): github.com/NKShukla/rock-paper-scissors
@chasethrillzdafantac
@chasethrillzdafantac 3 жыл бұрын
thanks a bunch if it counts 5 months later
@tobiaschristensen9896
@tobiaschristensen9896 5 жыл бұрын
34:56 for me it says in console "Uncaught TypeError: document.GetElementById is not a function at app.js:3"
@sakshammanocha640
@sakshammanocha640 5 жыл бұрын
It should be document.getElementById
@MrDaLeX-gc1zg
@MrDaLeX-gc1zg 5 жыл бұрын
js is sensitive document.GetElementById *WRONG*: _*RIGHT*_: document.getElementById()
@MrDaLeX-gc1zg
@MrDaLeX-gc1zg 5 жыл бұрын
@@rosenclosed that what i was saying for two months xD
@MrDaLeX-gc1zg
@MrDaLeX-gc1zg 5 жыл бұрын
@@rosenclosed and we have a saying that means if your hungry eat.... thats a nice saying right xD?
@juanandresrodriguezpedreir8922
@juanandresrodriguezpedreir8922 4 жыл бұрын
Thanks for the tutorial. Learned a lot, and also could finish it completely.
@emilie1977
@emilie1977 5 жыл бұрын
Thank you! You are a very super teacher please register the video in 1080p. Not very sharpen
@emorgan0085
@emorgan0085 5 жыл бұрын
16:58 that's what she said
@andrewthomas3467
@andrewthomas3467 5 жыл бұрын
What is that color picking tool he used lmao it was magic
@nakamuraSakahashi
@nakamuraSakahashi 3 жыл бұрын
you can use pixie
@daniyalkhan9702
@daniyalkhan9702 3 жыл бұрын
oh man u just nailed it. 🔥 The way you telling these all things in the simplest way. Love it
@narendrasudrik5073
@narendrasudrik5073 2 жыл бұрын
Excellent solution oriented video on html, css, JS. !!! The way you explained is awesome. Many thanks.
@siema32
@siema32 5 жыл бұрын
1:11:27 -> it do what he says! OMG
@nomatter56
@nomatter56 5 жыл бұрын
Check on me
@oufcena5092
@oufcena5092 4 жыл бұрын
@@nomatter56 Don't be such a beggar! Ew
@ryanjin6638
@ryanjin6638 5 жыл бұрын
What is the name of the color picking software?
@jupiter4264
@jupiter4264 5 жыл бұрын
Ryan Jin you mean the software to code this, If so it is called HTML 5
@ryanjin6638
@ryanjin6638 5 жыл бұрын
@@jupiter4264 No I meant the color picking tool
@andresbf830
@andresbf830 5 жыл бұрын
@@ryanjin6638 dont know ... I use ColorZilla
@ryanjin6638
@ryanjin6638 5 жыл бұрын
@@andresbf830 Thx man!
@andresbf830
@andresbf830 5 жыл бұрын
@@ryanjin6638 happy to help! :)
@vittor1235
@vittor1235 11 ай бұрын
i love the way you do the logic of the game, the first think is use various if
@sankamohottala6778
@sankamohottala6778 3 жыл бұрын
This is really good. i watched the entire video and did the coding. really good intro to the whole web development thing. thanks guys.
@SonGoku-ic6hi
@SonGoku-ic6hi 5 жыл бұрын
how can i get these images?
@alphamega7121
@alphamega7121 5 жыл бұрын
i don't know i search too
@zemenlezemen6160
@zemenlezemen6160 5 жыл бұрын
Search for hand emojis on google images
@teamnoob9380
@teamnoob9380 5 жыл бұрын
I have uploaded all your code too codepen until you upload it: codepen.io/255994/pen/qQaByN I put reference links back to this tutorial. Really great tutorial! I wish it was in higher quality though, but none-the-less very cool and interesting to watch you piece it all together. I particularly liked when you explained how you can improve the old way of writing functions compared to the new way of writing ES6 functions.
@st.petesburg9882
@st.petesburg9882 5 жыл бұрын
Thanks, dude! Appreciate that!
@jindani
@jindani 5 жыл бұрын
Thank you very much bro
@erk03k81
@erk03k81 5 жыл бұрын
You forgot the cursor property dude XD
@claudiovisual209
@claudiovisual209 4 жыл бұрын
Great - super easy to follow along, well explained - loved it!
@AlexG-wk3nh
@AlexG-wk3nh 3 жыл бұрын
i knew to use cases but wasnt familiar enough with them, didnt know you could use multiple cases before breaking out, good stuff, a lot less code than my attempt before i watched, Good Tutorial!
@JNET_Reloaded
@JNET_Reloaded 5 жыл бұрын
Code link coming in a few days.? reply when its available
@thecommentary
@thecommentary 5 жыл бұрын
available
@JNET_Reloaded
@JNET_Reloaded 5 жыл бұрын
@@thecommentary direct link to the actual page?
@madeyeatreides4055
@madeyeatreides4055 5 жыл бұрын
@@JNET_Reloaded Did you find it?
@JNET_Reloaded
@JNET_Reloaded 5 жыл бұрын
@@madeyeatreides4055 no, neeed a direct link to it im not signing up.
@AnuragsharanTG
@AnuragsharanTG 5 жыл бұрын
codepen.io/255994/pen/qQaByN
@dosendusche4049
@dosendusche4049 5 жыл бұрын
*declares a const* "we gonna update this later, depending on who wins and stuff [...]" - oh god pls no, don't do this. Time: 27:39
@mellepella
@mellepella 4 жыл бұрын
Hahaha, that was exactly what I thought xP
@duynguyenthanh3281
@duynguyenthanh3281 5 жыл бұрын
So fantastic. The boy is really humorous. Thanks a lot about helpful tutorial!
@m.o.o.n.c.a.k.e
@m.o.o.n.c.a.k.e 4 ай бұрын
I will be doing this at night to keep practicing my skills, I'm so excited!
@nicholasmeyer152
@nicholasmeyer152 5 жыл бұрын
Why does this look like Python?
@imnotlmao
@imnotlmao 5 жыл бұрын
How fucking dumb do you have to be to think JS looks like Python.
@raoaleemakhtar8903
@raoaleemakhtar8903 3 жыл бұрын
You could have used rock, paper and scissors in the array and the switch and the IDs(and wherever else you used r, p and s). That would've made line: 27, 28, 29 much more neater and the switch much more readable. and are also HTML tags. By the way your code is super super neat.
@yasserakbbach7342
@yasserakbbach7342 5 жыл бұрын
I liked the way u dealt with probabilities using switch (y)
@ProgrammingwithPeter
@ProgrammingwithPeter 4 жыл бұрын
Pretty good tutorial for web development beginners! He is good at talking too.
@gunjanchimariya1902
@gunjanchimariya1902 5 жыл бұрын
thank you sir you make it really easy and the thing you said "the difference between good and great is little extra" blow my mind You are amazing sir love from Nepal
@jimchan7352
@jimchan7352 5 жыл бұрын
I mean this is probably the best combination tutorial of web design. It's better than a one-week book reading...
@kristiansmurds2067
@kristiansmurds2067 5 жыл бұрын
Great! Just what I was looking for! Thank you!
@Elantry
@Elantry 5 жыл бұрын
Great guide! I'm going to add difficulty settings.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 922 М.
تجربة أغرب توصيلة شحن ضد القطع تماما
00:56
صدام العزي
Рет қаралды 53 МЛН
Этот Пёс Кое-Что Наделал 😳
00:31
Глеб Рандалайнен
Рет қаралды 3,5 МЛН
One moment can change your life ✨🔄
00:32
A4
Рет қаралды 15 МЛН
Generative AI in a Nutshell - how to survive and thrive in the age of AI
17:57
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Рет қаралды 611 М.
Learn CSS Animations In 20 Minutes - For Beginners
21:22
Slaying The Dragon
Рет қаралды 991 М.
how to make every day special
9:42
Timofey
Рет қаралды 26 М.
Cool Tech You’ll LOVE!
21:41
Snazzy Labs
Рет қаралды 72 М.
How to Learn to Code FAST (Do This or Keep Struggling)
11:00
Andy Sterkowitz
Рет қаралды 695 М.
How do computers read code?
12:01
Frame of Essence
Рет қаралды 3 МЛН
I Challenged The CSS King To A CSS Battle
37:45
Web Dev Simplified
Рет қаралды 1,3 МЛН
How I'd Learn Web Development (If I Could Start Over)
6:55
Dylan Cole
Рет қаралды 511 М.
تجربة أغرب توصيلة شحن ضد القطع تماما
00:56
صدام العزي
Рет қаралды 53 МЛН