All of the code and assets for this video are available on my GitHub github.com/WebDevSimplified/Mix-Or-Match, and you can play the game live here codepen.io/WebDevSimplified/pen/EdEjyx. Also, make sure to checkout part two on PortEXE's channel th-cam.com/video/3uuQ3g92oPQ/w-d-xo.html.
Excellent tutorial, I loved following along. My mind exploded a bit at the 17:30 mark, not sure what kind of CSS magic that was. All together, beautiful, easy to follow, and an excellent looking product. Thanks!~!
Thanks for the feedback. 3D CSS is quite confusing, but I have another tutorial that covers 3D CSS rotation in further depth if you want to check it out here. th-cam.com/video/_isJ_SpN7T0/w-d-xo.html Hopefully that will help make things easier to understand.
Thank you for this tutorial, Kyle. I've been taking a beginners web development class and your videos have really helped to consolidate my learning. I'm working on my final project now and thanks to your explanations everything is starting to make sense!
I've had this pinned forever and just now got around to going through it. Great walk through as always and such a fun project. Also enjoyed putting my own spin on it since it's not Halloween at the moment ;). Thanks for making coding fun, Kyle! Enjoyable projects make the concepts stick so much easier. Now, onto the JavaScript.
superb. the code works perfect. thank you so much. you made my day and saved me from the last moment assignment submission. also the explanation provided by you is very clear and easy to understand. keep uploading such videos and keep helping us. Cheers!!!
at about 25:40, rotation, they must have changed CSS core since this video; the perspective is not being inherited to children anymore I guess (checked final version as well), but this brings 3D back: .card { transform-style: preserve-3d; }
Had this tutorial bookmarked since Halloween and finally came around to do it. Really good pace to follow along, good job. Now time to head over to part 2. :)
Just a suggestion called “speed dating” instead of Shoppee link It is matching a couple , not matching the same ... how to describe / draw a 情侣装couple , hairstyle? Clothing? Emotion? Face? Hobbies? Wow... you scored high marks 😍 .... all the best in your love journey 🥰🥰🥰
Web Dev Simplified I appreciate the replys! I am coding it and typing comments, as I go through this video. I double checked and copied your code verbatim. @9:00 when you do the grid-template-column: repeat(4, auto); this code is applied to the game-container. game-container contains game-info-container and then 16 x cards; When I, use the grid-template-column: repeat(4,auto);... Because game-container contains game-info-container, the auto=width is set to the width of the game-info-container, so there is a rather large horizontal gap between the cards. The grid-gap:10px works fine for the "top-margin" between cards; It's just for whatever reason, each column of display: grid is the width of the game-info-container, and not the cards like in your video. Do you have any idea why? What I may have missed/done wrong/or a workaround? I agree with everyone else, these are great videos, and you can really tell with the high likes, to very very low dislike ratio! I'm looking forward to watching more, once I figure this out ; )
What I'm seeing is that, since column 1 has game-info-container; which has game-info x 2; one of which is Time: 100 game-container sets it's auto width to the width of Time: 100's game-info div, like in the video, @9:12; but then, the remaining columns, 2, 3, and 4 use that same width, even though Time: 100 is above only the first column. I have tried commenting out the display flex, and justify-content: space-between, etc. backtracking, and that is where I am stuck! I thought maybe that, it had to do with your viewport's width, however, my elements will go off screen, they don't resize (and that makes sense as at this point there hasn't been any media queries, or % based widths.) TEMP WORKAROUND: I added a max-width to html of 100vw; I feel that as the video progresses, that the card layout will be addressed. I'm just confused why your cards are so compact and all on the screen, and why mine were stuck with large gaps, and half were off the screen copying the code verbatim.
LOL; literally 5 seconds later when you justify-content: center @10:33; it all lined up super perfect,.... STILL - I'm trying to understand for when I'm designing, even though it worked out here. : )
I believe the reason yours are so spread out is that your screen size is larger than mine and by default the cards are spreading out to fill the full width of the screen thus having large gaps. The justify center forces the container to not fill the full screen width which pushes all the cards as close as possible.
Really an interesting and useful video, I have some kind of problem when I try to apply the grid-template-columns, at 9:07 , doesn't change anything in my page what's happening?
This is great video, i have been able to create the game with my own pictures, on the computer it is working in all browers but not IE, when trying on my Iphone and ipad I see the pictures in mirror and not the background. Wehn click on picture you see other cards turn to the back side of the card and turns back again. I have downloaded edge and chrome on my iphone and have to same issue, I added the animation browser code in css. When checking the virtual iphone it is working, but not on my owns. Any ideas what I am missing? The sounds is working, except the one running out of time. The picture are dancing when matched,😫😩
Awesome tutorial 😍😍😍😍. Can you please help on below question? Upon refreshing the page, we call see the front face of all cards. How can we prevent that?
How would you create a quantity of cards for a given number instead of copying the code that many times? I know in Angular there is ng-for, so is there another way to do it?
Apparently this complete game will not work on my ipad. The flipping transition has some issue though. All the cards by default will be at front. Nevertheless, great tutorial
Can the trees looked like combination of balls 🎾? If you watering it will become light green... otherwise dark green ... if watering partial then some balls are light greens some are dark green ... So that when you look at the trees 🌳 Very clear in first sight that how many more water you need to fulfill
There is a small glitch that is bugging me. When you find a match the silhouette of the card value appears before the card is done flipping. Do you know how to solve it?
It is because the transform of the rotation is being overridden by the animation. Off the top of my head I am not sure of an easy way to fix it with CSS, but you can fix it by adding the matched class to the card after a delay in the JavaScript and then remove the delay from the animation. setTimeout(() => { //Add Match Class }, 500)
@@WebDevSimplified I dropped by here because I was looking for Matching games on Android Studio and I realize later that this channel is about web...nice because I`m learning that too...thx Bro !!!
Very good tutorial ^^ Just I have a little problem, I can see the texts overlay in small, even if they not set to visible. Can someone help me fix it ?
@@WebDevSimplified damn thank you for the quick reply! I will have to look into it - (I'm really new to all this, are there sites you happen to know about, or did you just do a google search for like halloween stock images?) They all look like they are from a similar set/style - that's why I ask. Also, thank you so much for this video! It's very well put together, and has so many great functions illustrated. I need to spend like a week, making sense of everything in it : )
I found them all in a single icon set. I dont remember the site but I found it just by googling for Halloween icon sets. The icons are all in my GitHub repo if you want to pull them down.
@@WebDevSimplified Thank you very much you have a great channel ! I , I already subscribed :) By the way my name is ALON and i live in Israel nice to know you, you have really good skills keep it up ! :)
Line 24 doesn't have any symbols on it. Line 13 has an asterisk symbol. Other than that I am not sure what you are talking about. Is there a specific time in the video this shows up?
I really like your videos, thanks. I have a question if there is a way to plant the current HTML file and display the game on the site. All attempts to plant HTML files after finishing work on my site failed. I would be happy to help maybe someone knows some way, thanks
All of the code and assets for this video are available on my GitHub github.com/WebDevSimplified/Mix-Or-Match, and you can play the game live here codepen.io/WebDevSimplified/pen/EdEjyx.
Also, make sure to checkout part two on PortEXE's channel th-cam.com/video/3uuQ3g92oPQ/w-d-xo.html.
Geniooo. Saludos desde Argentina
Tries your codepen on my ipad and same issue as in my other comment. All cards showing face up. Any solution? On the computer it is working fine
Broh..I have to give one task to uh doo.can comment yes or noo
Please provide a abstract for this project
Excellent tutorial, I loved following along.
My mind exploded a bit at the 17:30 mark, not sure what kind of CSS magic that was.
All together, beautiful, easy to follow, and an excellent looking product. Thanks!~!
Thanks for the feedback. 3D CSS is quite confusing, but I have another tutorial that covers 3D CSS rotation in further depth if you want to check it out here. th-cam.com/video/_isJ_SpN7T0/w-d-xo.html
Hopefully that will help make things easier to understand.
Thank you for this tutorial, Kyle. I've been taking a beginners web development class and your videos have really helped to consolidate my learning. I'm working on my final project now and thanks to your explanations everything is starting to make sense!
I've had this pinned forever and just now got around to going through it. Great walk through as always and such a fun project. Also enjoyed putting my own spin on it since it's not Halloween at the moment ;). Thanks for making coding fun, Kyle! Enjoyable projects make the concepts stick so much easier. Now, onto the JavaScript.
Took me almost all afternoon, as this is my first big project, but well worth it! Thank you!
superb. the code works perfect. thank you so much. you made my day and saved me from the last moment assignment submission. also the explanation provided by you is very clear and easy to understand. keep uploading such videos and keep helping us. Cheers!!!
I'm really glad I could help.
Garishma G do your homework loser ..!
Found this very easy to code alongside. Thank you for going through the nitty-gritty details and explaining why as you went.
Thanks! Just watched part 2 and that's really good. Glad I found this.
Ok
Thank you for this! Really puts what I learned in beginner Web Dev into perspective : )
Haven't watched part 2 yet but thanks for this. As usual with your longer walkthroughs I've learned an absolute ton. Thanks dude.
at about 25:40, rotation, they must have changed CSS core since this video; the perspective is not being inherited to children anymore I guess (checked final version as well), but this brings 3D back:
.card {
transform-style: preserve-3d;
}
Awesome video. You can tell you are very skilled with HTML and CSS. Thanks for the great walkthrough :)
Had this tutorial bookmarked since Halloween and finally came around to do it. Really good pace to follow along, good job. Now time to head over to part 2. :)
Thanks! I'm really glad you enjoyed it. I hope part two is just as helpful.
Wow this is very helpful, thank you!
I'm trying to do a Vocabulary-Learning Game with words and pictures...will see if it pans out as planed. :D
amazing.....
I'm learning something new every day from your vidoes
Thank you for your love
I pray for you
all the best
awesome video, has been a great help
learned so much from this. Thank you!
fantastic video very clear and useful thanks
You are welcome! I am really glad you enjoyed the video.
Thanks man you help me a lot!!!
... which is exactly what we want
Awesome---Awesome-----Awesome.....Thanks...!!!
Just a suggestion called “speed dating” instead of Shoppee link
It is matching a couple , not matching the same ... how to describe / draw a 情侣装couple , hairstyle? Clothing? Emotion? Face? Hobbies?
Wow... you scored high marks 😍 .... all the best in your love journey 🥰🥰🥰
How to play the game live on Github without downloading its files to my computer.
Where the game link usually is?
❤
Github
Can you also pin abstract for this project
Web Dev Simplified I appreciate the replys!
I am coding it and typing comments, as I go through this video.
I double checked and copied your code verbatim.
@9:00 when you do the grid-template-column: repeat(4, auto);
this code is applied to the game-container.
game-container contains game-info-container and then 16 x cards;
When I, use the grid-template-column: repeat(4,auto);...
Because game-container contains game-info-container,
the auto=width is set to the width of the game-info-container,
so there is a rather large horizontal gap between the cards.
The grid-gap:10px works fine for the "top-margin" between cards;
It's just for whatever reason, each column of display: grid is the width of the game-info-container, and not the cards like in your video.
Do you have any idea why? What I may have missed/done wrong/or a workaround?
I agree with everyone else, these are great videos, and you can really tell with the high likes, to very very low dislike ratio!
I'm looking forward to watching more, once I figure this out ; )
What I'm seeing is that, since column 1 has game-info-container;
which has game-info x 2; one of which is Time: 100
game-container sets it's auto width to the width of Time: 100's game-info div, like in the video, @9:12;
but then, the remaining columns, 2, 3, and 4 use that same width, even though Time: 100 is above only the first column. I have tried commenting out the display flex, and justify-content: space-between, etc. backtracking, and that is where I am stuck!
I thought maybe that, it had to do with your viewport's width, however, my elements will go off screen, they don't resize (and that makes sense as at this point there hasn't been any media queries, or % based widths.)
TEMP WORKAROUND: I added a max-width to html of 100vw;
I feel that as the video progresses, that the card layout will be addressed.
I'm just confused why your cards are so compact and all on the screen, and why mine were stuck with large gaps, and half were off the screen copying the code verbatim.
LOL; literally 5 seconds later when you justify-content: center @10:33; it all lined up super perfect,....
STILL - I'm trying to understand for when I'm designing, even though it worked out here. : )
I believe the reason yours are so spread out is that your screen size is larger than mine and by default the cards are spreading out to fill the full width of the screen thus having large gaps. The justify center forces the container to not fill the full screen width which pushes all the cards as close as possible.
Really an interesting and useful video, I have some kind of problem when I try to apply the grid-template-columns, at 9:07 , doesn't change anything in my page what's happening?
What browser are you using? Older browsers like internet explorer do not support grid.
@@WebDevSimplified thank for the reply, the problem was in my HTML structure, I like the explanation you give while coding, I subscribed.
Thanks. I'm glad you figured it out
I've got the same problem, how did you solve it? Please help me😫😫
Really awesome...
This is great video, i have been able to create the game with my own pictures, on the computer it is working in all browers but not IE, when trying on my Iphone and ipad I see the pictures in mirror and not the background. Wehn click on picture you see other cards turn to the back side of the card and turns back again. I have downloaded edge and chrome on my iphone and have to same issue, I added the animation browser code in css. When checking the virtual iphone it is working, but not on my owns. Any ideas what I am missing? The sounds is working, except the one running out of time. The picture are dancing when matched,😫😩
Everyone need 💓
So use love as a purpose
Awesome tutorial 😍😍😍😍. Can you please help on below question?
Upon refreshing the page, we call see the front face of all cards. How can we prevent that?
How would you create a quantity of cards for a given number instead of copying the code that many times?
I know in Angular there is ng-for, so is there another way to do it?
Nice
Apparently this complete game will not work on my ipad. The flipping transition has some issue though. All the cards by default will be at front. Nevertheless, great tutorial
Could you make object fall game with score? And score would update images . Can't find on youtube proper one.
Thankyou very much. cool tutorial. Would you make it multyplayer with socketio? It would help a lot. thanks ahead.
Great tutorial, so happy to try and recreate this as a beginner. I usually avoid using grid, can I do this using flexbox? Will it cause issues in JS?
Can the trees looked like combination of balls 🎾?
If you watering it will become light green... otherwise dark green ...
if watering partial then some balls are light greens some are dark green ...
So that when you look at the trees 🌳
Very clear in first sight that how many more water you need to fulfill
You're the best🙌🙌
Hi can you please make a scoreboard or Highscore and a Webstorage with that ..would be practically helpful!
Thanks much
🔥🔥
Does this not work on mobile? Card backs do not show on codepen on mobile only faces
Should I use google web designer or Unity?
how can I have instead of images when turning the cards that I have text
Provide subtitles also
It will help us for more understanding 🙂
great project
Thanks! I'm really glad you enjoyed it.
@@WebDevSimplified this is great
is there eny way to add win count
how we can convert this code in reactjs please help anybody , thanks
awesome
Where is the next part?
Solid!
Hi, just so you know when the card game is played on a mobile or Ipad device the cards are already revealed/turned over.
That is not good. This appears to work on the mobile dev tools of Chrome so I am not sure what the issue is.
Same on Safari
have you found a solution to this problem?
There is a small glitch that is bugging me. When you find a match the silhouette of the card value appears before the card is done flipping. Do you know how to solve it?
It is because the transform of the rotation is being overridden by the animation. Off the top of my head I am not sure of an easy way to fix it with CSS, but you can fix it by adding the matched class to the card after a delay in the JavaScript and then remove the delay from the animation.
setTimeout(() => {
//Add Match Class
}, 500)
@@WebDevSimplified It works! Thanks!!
Very cool and beautiful
The game is open source with no rights, is that true?
Why didn't you use canvas?
Very good video....how about to create one memory game on Android Studio ? It will help a lot of people...u are sharp as a tack !!! Thx Bro !
I am not a fan of mobile development so I don't plan to cover it on this channel.
@@WebDevSimplified I dropped by here because I was looking for Matching games on Android Studio and I realize later that this channel is about web...nice because I`m learning that too...thx Bro !!!
Very good tutorial ^^
Just I have a little problem, I can see the texts overlay in small, even if they not set to visible. Can someone help me fix it ?
Sameeee, how did you fixed that?
sorry to disturb but im new in coding and i don't know how to make assets in vs can someone help me
What is the software used here
My biggest question is - where do you design/develop the images you use?
All of these images were actually completely free to use. I just found them while searching for Halloween icons.
@@WebDevSimplified damn thank you for the quick reply! I will have to look into it - (I'm really new to all this, are there sites you happen to know about, or did you just do a google search for like halloween stock images?)
They all look like they are from a similar set/style - that's why I ask.
Also, thank you so much for this video!
It's very well put together, and has so many great functions illustrated. I need to spend like a week, making sense of everything in it : )
I found them all in a single icon set. I dont remember the site but I found it just by googling for Halloween icon sets. The icons are all in my GitHub repo if you want to pull them down.
I am unable to download any of the files, from GitHub. I even made an account.
09:50 Don't understand how it's fix the columns and the rows??
This is because using grid-column: 1 / -1 makes the row that we use it on span all of the columns which pushes all the other elements into place.
@@WebDevSimplified Thank you very much you have a great channel ! I , I already subscribed :)
By the way my name is ALON and i live in Israel nice to know you, you have really good skills keep it up ! :)
The column I've created won't split, no matter what I do...
plz add a music off button in the codepen.io project
is it ok if I don't know anything about postExe...it looks fun...i also want to create it😅
That is perfectly ok. He makes some quality videos so I would checkout his content.
why is this cool tutorial not on c#?((((
what is the first symbol on line 24 in css
Line 24 doesn't have any symbols on it. Line 13 has an asterisk symbol. Other than that I am not sure what you are talking about. Is there a specific time in the video this shows up?
@@WebDevSimplified I looked at your code for a better view and just found out that that that was just a period. Sorry!
هاد البلاي ليست حبيتها
i LOVED THIS PLAYLIST
repeat min: 17:50
Your codepen is broken. The images and audio aren't working
Thanks for the heads up. This is now fixed. I accidentally deleted the GitHub branch where the files were being pulled from.
The stupid trees 🌲 trees 🌳 layout compared to taobao is D vs A+
damnit i missed the live stream
☝👆You were that close. Hopefully next time you can make it!
good
I really like your videos, thanks.
I have a question if there is a way to plant the current HTML file and display the game on the site. All attempts to plant HTML files after finishing work on my site failed. I would be happy to help maybe someone knows some way, thanks
@24:20
And this need times to look seriously ... not as fast as matching the “same”
The Javascript part was a fraud.
You should have collaborated with someone else.
I'm sorry you feel that way. I have collaborated with both Dev Ed and Kevin Powell as well if you want to check those out.