Memory Card Game - JavaScript Tutorial

Рет қаралды 179,084

Күн бұрын

Learn the fundamentals of pure javascript by building a memory card game. No frameworks or libraries, just vanilla JavaScript.
This video will cover how to:
‣ select elements in the DOM with querySelector
‣ iterate through lists with forEach
‣ add/remove an element class
‣ add/remove event listeners
‣ timeout
‣ html5: data-attribute
‣ css3: positioning, flexbox, perspective, backface-visibility, transitions
🔗Demo: marina-ferreira.github.io/mem...
💻Repo: github.com/code-sketch/memory...
💻Finished files: marina-ferreira.github.io/pro...
⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (00:47) Basic Structure / Create the Project
⌨️ (03:53) Board HTML
⌨️ (07:13) Board Styles
⌨️ (12:41) Flip Card
⌨️ (15:53) 3d Effect / CSS3 Perspective
⌨️ (18:25) Store Cards
⌨️ (22:37) Match Cards
⌨️ (25:12) Refactoring
⌨️ (27:27) Lock Board
⌨️ (28:53) Card Double Click
⌨️ (31:04) Shuffling
🎥Tutorial by Code Sketch. Check out the Code Sketch channel for more great tutorials: / @codesketchlab
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org

Пікірлер: 261

@EF2000Typhoon7LWA 4 жыл бұрын

You have taught me more about CSS in 10 minutes than my professor in a whole semester.

@user-ml9lh7zn7d 3 жыл бұрын

ikr that position absolute example was absolutely perfect

@CodingFire 3 жыл бұрын

Yes

@gouderhicham3696 3 жыл бұрын

we don't actually study css in college just backend stuff '_'

@CodingFire 3 жыл бұрын

@@gouderhicham3696 But some college i think teach css a little i mean i am not in college but dont know

@GeorgWilde Жыл бұрын

Why would a professor teach CSS? Lmao. Anyone can learn that alone.

@Maria-zg7yd 4 жыл бұрын

I just love how she explains step by step what she's doing and why. More tutorials like this PLEASE!

@stroodlekitty13 4 жыл бұрын

I wish there was a "Love" button. This is the most concise and clear javascript tutorial I have seen. The animations were extremely helpful.

@vmoney1017 5 жыл бұрын

I've been putting off this same project off for about a year and this is awesome! Thanks for the very thorough explanation on all of the concepts.

@jardix3667 3 жыл бұрын

Absolutely loved this video. More clear and easy to follow than the online course I'm paying for, and you do it free, just to help people out. I love that! Thank you!

@solarflare915 6 жыл бұрын

holy crap that was the best position: absolute / relative explanation I've seen

@hassanbenhajbouih931 6 жыл бұрын

i know right? it blew my mind. and everything made sense

@devonator999 5 жыл бұрын

Time stamp?

@hassanbenhajbouih931 5 жыл бұрын

8:01

@fmontone 5 жыл бұрын

Indeed!

@vincenzosanfratello3034 4 жыл бұрын

😱That's a position tutorial 😅

@kamaboko1 6 жыл бұрын

Fantastic tutorial. It hit on so many different key skill sets to know.

@arturkasprzak659 4 жыл бұрын

I agree!! It touches basic concepts of JS, CSS and HTML but at the same time wraps up enough information so that the project/tutorial is both interesting and somewhat challenging for starters. I really enjoyed it.

@chris-adams-tas 4 жыл бұрын

Brilliant expose! One of the strengths of this presentation is seeing Flexbox, CSS calc, box-sizing, transform and transition explained in a practical and non-verbose way.

@dissid_4676 Жыл бұрын

Just amazing the difference between the manner she demonstrates the process with others tutos. She manages it so well !!!

@prateek7434 5 жыл бұрын

Awesome tutorial!!! I learnt a lot from this - css positioning, dataset framework etc.

@PfalzerGbr 4 жыл бұрын

Fun little tutorial, learnt a lot. Absolute position example was gold, and also really liked the explanation of restructuring. Thank you!

@aidanbenbow6682 4 ай бұрын

This is amazing, lots of stuff I haven't seen elsewhere!

@lydialind5115 4 жыл бұрын

This was a really great tutorial! Super clear and pedagogical. Thank you so much.

@EitanPeles 3 жыл бұрын

The best explanation about memory game in js! Great job!

@mohyak76 4 жыл бұрын

this is the best explanation for position: absolute and relative. thanks!

@anders8638 3 жыл бұрын

One of the best js tutorials I've seen! Much

@TechnologyAcademy_CS Жыл бұрын

This video is super informative and the instructions are clear and coherent. Really found this video constructive and enjoyable. Following along with the instructions and hearing the explanation made programing a lot more approachable. Thank you.

@samirthegentlewind 2 жыл бұрын

Undoubtedly the best tutorial video I've ever seen. You're amazing !

@Skaxarrat 5 жыл бұрын

I love this tutorial a lot. I feel like an idiot because I didn't knew half of what I saw here but I liked it a lot. I insta-subscribed to Code Sketch. Waiting for more videos!

@arunkaiser 6 жыл бұрын

Very clear and detail explanation. Awesome 👌

@svitlana6420 Жыл бұрын

Absolutely amazing, great explanation! 👍

@joshuaa3200 3 жыл бұрын

Hands down the best CSS JS I've ever heard TT.

@alptug Жыл бұрын

This is one of the best and cleanest explanation i have ever seen

@carlosalbertouehara3099 6 жыл бұрын

it's amazing, pretty work!!

@ajutantable 4 жыл бұрын

You do a great job of making this easy to understand. Thanks!

@chacalfmp Жыл бұрын

thanks for the class! i love it!

@plankalkulcompiler9468 4 жыл бұрын

Great tutorial! It gave me a hype to develope a badass memory card game.

@krissichan3127 6 жыл бұрын

You remind me of bmo from adventure time! Thanks for the tut.

@the_coder241 5 жыл бұрын

So clear and easy to understand!! Thank you so much!!

@Stuepp 4 жыл бұрын

Thanks for the video, I'm pretty noob in coding but I could learn a good amount, and this help with my studies, really thank you very much.

5 жыл бұрын

Amazing tutorial. Thanks for your time!

@emalfiza3386 4 жыл бұрын

the most awesome simple explanation of the position absolute and relative...ur so sweet

@luisedudias 3 жыл бұрын

Beautiful!!! Great tutorial. Thanks

@tl8796 5 жыл бұрын

This is the best tutorial so far, Thank you teacher

@waltermitty6446 5 жыл бұрын

Great tutorial. Thanks!

@muhammeteser8914 6 жыл бұрын

Thanks for this great Tutorial.

@PrincessCarrieGraham 3 жыл бұрын

Marina, you beautiful soul, THANK YOU!!!! This is a fantastic tutorial, the files are awesome, and for someone just learning to script, I can't thank you enough :-)

@mikadini88 5 жыл бұрын

wow she explain perfectly the box-sizing concept !!!

@AbateRedQueen 6 жыл бұрын

Great tutorial. Thank you!

@JaydRobinson-xx5yx 4 жыл бұрын

Really good tutorial. great explanation of position. made it so clear.

@josue2323 6 жыл бұрын

Marina tu é Zika :)

@EnglischLernen123 4 жыл бұрын

Thank you very much for that! Keep up the good work!

@giladsefti301 4 жыл бұрын

Greate video with basic things about css, html and javascript. Thanks a lot

@navinkandpal6767 3 жыл бұрын

No one like u explain this in a such a good way 👍 very satisfied 😁

@JoseRodriguez-zn9wh 2 жыл бұрын

I really have fun doing this. Thank you

@pierreci2378 4 жыл бұрын

Thanks for your help . I am french but you speak slowly and I understood a lot thanks to you

@yevheniibaburin4667 4 жыл бұрын

Very cool and very nice tutorial! Thank you, very much!

@vaso.beruashvili.94 5 жыл бұрын

Fantastic tutor. Thanks!

@Sina-hr9fv 4 жыл бұрын

fantastic instructive video! thank you

@leonstone3443 Жыл бұрын

old video but still holds true and works great! thanks!

@exploretheworld9111 3 жыл бұрын

simply the best tutorial. wow thank you for your great contribution.

@Beredor Жыл бұрын

Very cool and helpful tutorial. Thx very much.

@worldtok6064 5 жыл бұрын

Great and fantastic tutorial.

@allanalbrecht3112 Жыл бұрын

Wonderful explanation of CCS commands. More tutorials please. For example, this same project, but the class "memory-game" is entirely with javascript rather than a predefined HTML page.

@joinCENAtion 5 жыл бұрын

Amazing tutorial - thank you

@sumanshukumarshaw8157 3 жыл бұрын

Awesome Explanation

@jdevcast6527 5 жыл бұрын

Great explanation. I learned quite a bit from it.

@Anna-cb6rt 4 жыл бұрын

Great tutorial, thank you so much!

@more2learn279 Жыл бұрын

I have to create a memory game for a group assignment, this is helping. thank you.

@AbhishekKumar-mq1tt 6 жыл бұрын

Thank you for this awesome video

@singhgagandeep955 2 жыл бұрын

amazing way of teaching thanks for the video

@mikejakusz1493 Жыл бұрын

Great video!

@manalalkallas4781 4 жыл бұрын

Awesome. Thank you. :)

@gazwanhayat2637 4 жыл бұрын

Thank you very very much, this was an extremely good help, you have my gratitude.

@fredrikullman9349 3 жыл бұрын

Awesome tutorial, thanks : )

@tiagovasconcellos4209 2 жыл бұрын

Thanks. That was excelente. Obrigado Marina! :)

@cagethemouse 6 жыл бұрын

Amazing, you are so cool and smart!!!!

@mejiagrey830 Жыл бұрын

Well explained tutorial. Thank you for your time

@sakraissat9194 2 жыл бұрын

Good job i learned way more than what i learned with the teacher thank you a lot

@stefanrakonjac8158 5 жыл бұрын

You are amazing. Thank you :)

@vijoletaobradovic7996 3 жыл бұрын

absolutely great!

@ralfspinoza 5 жыл бұрын

very good work. A lot a good stuff. Thank you very much for that.

@n.g.9705 6 жыл бұрын

Good tutorial!

@HarshPatel-dv3hm 3 жыл бұрын

great tutorial. thank you for uploading.

@TheMBHassan 5 жыл бұрын

Brilliant tutorial

@Nasmablu 2 жыл бұрын

great explanation for flex

@StraLo90 2 жыл бұрын

great stuff!

@Alexa-jo8lv 3 жыл бұрын

Muito Obrigado!!! Very clear explanation, thank you so much!

@kindasport 2 жыл бұрын

Thank you very much for this tutorial!

@danielagospodinova9107 2 жыл бұрын

hey do you know what is that "workspece" she is showing at 0:50? I would be really greateful if you could help me.

@loicrutabana1884 Жыл бұрын

Great Vid!

@niebboycyrax 6 жыл бұрын

Congrats for this awesome tut'.

@taricov4662 3 жыл бұрын

The best by far! thanx

@deborahd4949 3 жыл бұрын

Thank you very much. It's very interesting and instructive.

@mustafaosama1157 4 жыл бұрын

We need a channel from you especially for the css.

@lukaa08 3 жыл бұрын

Hi, you are amazing. I like so much your video and helped so much to my work. Thank you ♥♥

@GermanEmmanuel 2 жыл бұрын

What a great tutorial, relaxing and interesting at the same time

@danielagospodinova9107 2 жыл бұрын

hey do you know what is that "workspece" she is showing at 0:50? I would be really greateful if you could help me.

@GermanEmmanuel 2 жыл бұрын

@@danielagospodinova9107 Hello Daniela, I think the "workspace", at least as I interpret it, it's just a name for the folder or working directory on your PC (it can be for example any folder in "My Documents")

@danielagospodinova9107 2 жыл бұрын

@@GermanEmmanuel thank you so much