🌸 Free Coding Games to Improve your Front End Skills ☕️

🌸 Free Coding Games to Improve your Front End Skills ☕️

Views:48|Rating:5.00|View Time:16:46Minutes|Likes:4|Dislikes:0
hey guyssss, your friendly neighborhood coder here with a new video!

today i thought we should focus on some resources that are SUPERRR handy for new coders/people who may be wanting to practice front end related things!!

hope you enjoy it!


△ Instagram:
△ Twitter:


🎧 “Doge-wave” // 1 HOUR MIX #4 // FREE USE, No Copyright! // Synthwave, New Retro, Outrun, EDM!

psttt… don’t forget to subscribe ^_^!

hello everyone and welcome back to my channel wet today we're gonna be looking at some curtain games which can be helpful if you're a beginner if you're new to coding or you're advanced and you simply want to brush up on some concepts so I made a list and we're gonna look at some of these today so let's dive right in and get started okay so I am now in my browser and again please ignore this I don't know how to get rid of it I've tried I guess I need to research a little bit more but I've literally tried to activate my windows a million times it won't let me so again let's just let's ignore that but the first resource that I have is CSS dinah now this is super helpful if you're wanting to practice like selective inheritance type things and stuff like that so you can see that it starts off with a prompt for you so it says select the plates help I'm stuck I don't know why that's that it's gonna tell you on the side to what you need to do so select elements by that type so in this case plates so we could look at our HTML here and say okay we can see inside the div with the class table that we have two plate elements so you would come over here type in plate and press ENTER and you have completed the first problem so once you're done with the first one another one comes up so again type selector you can see here that it's asking you to select the bento or Bend – I don't know how to pronounce that but bento boxes so we type that in hit enter now things have changed up a little bit it's asking you to select the ID selector so select this fancy plate if we hover over it you can see that this is the element that has the ID of fancy on it so of course come in here again fancy as the ID and hit enter and you can see that we go on and on we get deep in with descendant selectors I don't think that's what I meant to say instead of inheritance icon remember I had a descendant selectors so we need to select the Apple on the plate so plate Apple enter okay but now we're going to move on to the next one so this is a flexbox froggy and it is super helpful if you're wanting to practice or learn or get a bit more used to how CSS works when you're using flexbox okay so I've just removed my code real quick and you can see that there are 24 levels so a ton of time to practice and you can see here that we're going to need to get our frog each time over to the lily pad so it's letting us know over here that we need to use the justify content property so we can then dive into this section and think about which of these we would need to pull that frog if it was lily pad so to do that we could use flex tot which aligns the item to the left side of the container selects end which aligns the items to the right side of the container so in this case I'd be like okay hey this seems pretty right so it put in just for content flex and and boom you have done it so then the next one begins again you can see that every time I probably should have removed this so can justify content center to push the let's just go pin basis to push the green and yellow frog over to the lily pad and so on so forth now this one you can see it's a little bit more complicated so justify content it's removed the also I know I'm typing like this but like my mic is annoying so I'm just gonna have to roll with that as again as always like with everything but we could say maybe space between and nope that's too much so we could say okay maybe space evenly and that doesn't seem right either so again space around and we have done it so that is the second resource next we have flexbox defense now this gives you two towers that you have to position in order to defend a caramel boy you're defending but you've got waves that you need to defend against so your stuff does not get destroyed and so I mean you can see here that it really tells you okay your job is to stop the incoming enemies from getting past your defenses unlike other tower defense games you must position your towers using CSS so it starts with container properties so it lets you know that there are two accesses AXI accesses for your flexbox container so we have the main axis and we have the cross axis so again justify content flexed a flex and flex sent a space between and space around so try justify Content Center for example to move the containers towers to the center of the main access so let's try that bus so justify content center so you'd hit enter and then they are there in the center but I don't know like what are we defending here but who knows okay okay use justify content property to move these two towers into position I kind of don't like them both being in the same spot so let's see space between okay this gives them room to shoot from here and from here again you can see that this video is totally professional and I know what I'm doing okay so let's start the wave just as an example so we have points I don't hear any sound but look they're not even shooting no can we change it okay cancel wave cancel cancel okay let's try this again justify content yeah let's send to them okay now let's stop the wave maybe I should have listened okay Oh destroy him okay so we have successfully blocked everything off and we won yay okay so let's try the next wave oh my gosh okay well like crap let's just copy this into okay I know I know okay so let's do for this one with center out that's where it is isn't it Oh cannot reach there and I felt though let's do flex and for this one okay this one but what am i doing no my not Center yup and this one should we do flex and also let's try it okay yay let's stop the wave you can do this little guys plenty of room for them to shoot okay we're gonna beat that cuz it's kind of like this really loud I've been on even getting through to the last one some guessing this was a success but again you can see that this is just a fun resource to play around with her a 100 points okay so the next one I'm not gonna like do play all of them but can I just wanted to do the first view the next one is code combat so with this there are different languages that you can use but these are all locked so you can see like simple AI scripting while I'm still uh keep learning HTML learn HTML and scripting and etc but I don't know if you have to go through all of these to unlock them but this one you can see who are the win oh wait I think yeah you set your language here okay so you've got Python you can do JavaScript or CoffeeScript so we're gonna go with JavaScript you can already it cool card win nothing to it I dodge bullets I have to subscribe to unlock my blade is yours come on not already okay so these four three men let's do JavaScript is it said you can customize a character you can equip stuff and then you can use get my volume is like way too long and then you can use your language can you move your character grab the trash and grab the trash you can use these methods okay so we already know that so we need to move our hero to the other already move to the right so we would move them down run that I'm gonna get here and you can see what obviously gonna need one more to move out load tell me if I drown okay come on now this was horrible okay move right move down I know what am i doing I'm literally confusing myself okay then move right okay Gary okay yeah then we continue and you can go through the next level so just a really great way to practice your coding next we have codon coding game so you can practice here compete contribute okay that's there you contribute on lands so there's a ton of cool things you can do here a ton of different languages CSS JavaScript for basics HTML even so let's take a look at this so exercises HTML it's not in English okay what why is this okay let's just go to the practice that right you can see that you can click into any of these games you can practice loops conditions arrays loops conditions conditions and there's just a ton of puzzles that you can do ranging from easy to very hard so this is another cool site now this one is kind of for basically beginners so you're not actually using a language here but I do think that this is a really good resource because it teaches you the fundamentals of how a program works so let's take a look at this real quick we'll just click in one so use your mouse to draw trampolines when you're done drawing press space to drive the bowl to get it to the flag well that's way but there's a ton of different fun things ok let's do let's do this alright ok let's try this one but you can see I always stop ok I don't think it's gonna let me go see inside ok so you can see that although it's not using a programming language it is implementing steps and things that are similar so we have switch here you can see that we have if statements in here so it does have that fundamental that goes behind all the fundamental building blocks that go into actually learning how to program and how the programs work so I do think that this is super helpful also you can see if you're making your own that you have lots of different things you can use motions you can make things say stuff you can use sounds now the events and the controls so like if something then else so just basic syntax for regular programming so I think this is a really good resource if you're beginning to code and you kind of just want to understand how programming works and how to implement certain things and how the pieces link together so we highly recommend scratch now there's two more I'm going to just show you real quick which is fight code which you can use JavaScript to build your own robots and then you watch them fight so let's see let's look at crazy tank versus somebody so this is all what somebody has programmed I wish I could like look behind the scenes and you have how do I write my robot so introduction you have putting your robots is very easy and should be natural if you've had any JavaScript experience so this is an example of a simple robot so function you got a prototype here just stuff like that so this is probably not super beginner but if you're wanting to practice your JavaScript and you already use JavaScript a lot this would be perfect for you now the last one is code monkey now this is C usually I think it's used yeah for kids but because of that I do think it's a great resource especially again if you're a beginner nope this one it does use CoffeeScript and then with that you would learn to code and then you'd go on to build your own html5 games which is super dope so you can start a trial I'm not quite sure how exactly this one's works actually so you could probably sign up yeah you could sign up and just try that out but again super good resource I think usually if it's used for kids that it's gonna be especially helpful because I like to think that if it's for kids they're gonna explain things really well unlike with some courses that are aimed at adults or something like that if that makes sense so yeah that is all the resources and you can see that it has awards and achievements and stuff like that and yes okay so I think these will come in handy especially if you are practicing your front and or anything that's JavaScript based or you wanting to kind of jump into the pool lightly and test out coding for yourself and seeing if you want to learn it but that is it for this video I hope that this helped and you got something helpful out of it if not I apologize but yeah I'm gonna leave it there I think and I'll see you guys in the next video you

Leave a Reply

Your email address will not be published. Required fields are marked *