{"id":35000,"date":"2020-11-12T19:28:50","date_gmt":"2020-11-13T01:28:50","guid":{"rendered":"https:\/\/www.codewizardshq.com\/?p=35000"},"modified":"2025-08-26T04:52:14","modified_gmt":"2025-08-26T10:52:14","slug":"html-css-tutorial-thanksgiving-matching-game","status":"publish","type":"post","link":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/","title":{"rendered":"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game"},"content":{"rendered":"\n<p>Thanksgiving is a great time to gather around the table and spend time with our families. In our household, it\u2019s a tradition to play board games before we eat dinner.<\/p>\n\n\n\n<p><strong>Here\u2019s a chance to practice your HTML and CSS coding skills and give your family a fun activity to do when you get together.<\/strong><\/p>\n\n\n\n<p>Code this Thanksgiving matching game in HTML and CSS and play it with your family and friends this year. It\u2019s a coding and memory challenge! As a bonus, you can also color your own cards using our printable coloring pages.<\/p>\n\n\n\n<p><a href=\"https:\/\/margaret.codewizardshq.com\/x_matching_game\/i_game.html\">Play Thanksgiving Match Game<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"332\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Thanksgiving-Gameplay-Gif.gif\" alt=\"Thanksgiving Coding Activity Gif\" class=\"wp-image-35011\" style=\"width:600px;height:332px\"\/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"iframe-container\"><iframe loading=\"lazy\" title=\"HTML &amp; CSS Tutorial Thanksgiving Match Game\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/aNyi4kupaJg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"printable-activity\"><strong>Printable Thanksgiving Coloring Activity<\/strong><\/h2>\n\n\n\n<p>Before you start, you can print and color your own version of these Thanksgiving images. Simply color the images you want to use in the match game, take a picture of your artwork, then add it to your application as you would any other image.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/drive.google.com\/file\/d\/1IiaK32vgKR3eKz82Nu_B9-rmem0nzMf9\/view?usp=sharing\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"323\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Coloring_activity_banner.jpg\" alt=\"Thanksgiving Coloring Activity\" class=\"wp-image-35053\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Coloring_activity_banner.jpg 620w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Coloring_activity_banner-300x156.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><\/figure><\/div>\n\n\n<p><a href=\"https:\/\/drive.google.com\/file\/d\/1IiaK32vgKR3eKz82Nu_B9-rmem0nzMf9\/view?usp=sharing\">Download Printable Coloring Activity<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>This tutorial assumes you understand basic HTML and CSS. Let\u2019s get started!<\/strong><\/h2>\n\n\n<div class=\"lazyblock-cw1-wide-post-container-Z1FefaT wp-block-lazyblock-cw1-wide-post-container\"><div class=\"wide \"><div class=\"lazyblock-inner-blocks\">\n\n<div class=\"wp-block-atomic-blocks-ab-container table-of-contents ab-block-container\"><div class=\"ab-container-inside\"><div class=\"ab-container-content\">\n<p class=\"title\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#printable-activity\">Printable Thanksgiving Coding Activity &#8211; Color Match Cards<\/a><\/li>\n\n\n\n<li><a href=\"#step1\">Step 1: Add a background image to the page<\/a><\/li>\n\n\n\n<li><a href=\"#step2\">Step 2: Add your game area and title it<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.google.com\/document\/d\/1SsAoKDxe9nAVKPbFiEl5hwC5BGITvl8qoKvjyp5eXIU\/edit#heading=h.ilt4uekk62te\">Step 3: Style you<\/a><a href=\"#step3\">r<\/a><a href=\"https:\/\/docs.google.com\/document\/d\/1SsAoKDxe9nAVKPbFiEl5hwC5BGITvl8qoKvjyp5eXIU\/edit#heading=h.ilt4uekk62te\"> game area and title<\/a><\/li>\n\n\n\n<li><a href=\"#step4\">Step 4: Show the game cards<\/a><\/li>\n\n\n\n<li><a href=\"#step5\">Step 5: Add a gradient to the face of the cards<\/a><\/li>\n\n\n\n<li><a href=\"#step6\">Step 6: Add images to the back of the cards<\/a><\/li>\n\n\n\n<li><a href=\"#step7\">Step 7: Style Images on the back of the cards<\/a><\/li>\n\n\n\n<li><a href=\"#step8\">Step 8: Flip the card<\/a><\/li>\n\n\n\n<li><a href=\"#step9\">Step 9: Add a restart button<\/a><\/li>\n\n\n\n<li><a href=\"#step10\">Step 10: Style the restart button<\/a><\/li>\n\n\n\n<li><a href=\"#thanksgiving-game\">Your game is complete!<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<p><\/p>\n\n<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>What you need:<\/strong><\/h3>\n\n\n\n<p><strong>1. Text editor<\/strong><\/p>\n\n\n\n<p>You can use a simple text editor like Notepad, TextEdit, Sublime Text, etc. You may also use an online text editor like <a href=\"http:\/\/repl.it\">Repl.it<\/a> to write and share your code.<\/p>\n\n\n\n<p><strong>2. Base HTML\/CSS file.<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/drive\/folders\/1IkvA4ZEaBNlVl--8bo6_4P53CE2E7UqI?usp=sharing\">Download the base folder<\/a> and open the game.html file. This folder contains all the images and files you will need to complete your game.&nbsp;<\/p>\n\n\n\n<p>The game functionality is powered by JavaScript in the logic.js file.<\/p>\n\n\n\n<p>CodeWizardsHQ students, you can download the starter files called &#8220;x_matching_game&#8221; in your editor and easily share your project URL with family and friends. That\u2019s what I\u2019m using for my project!<\/p>\n\n\n\n<p class=\"has-small-font-size\"><em><strong>Recommended: <\/strong><a href=\"https:\/\/www.codewizardshq.com\/html-for-kids\/\">HTML &amp; CSS Classes for Kids<\/a><\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step1\"><strong>Step 1: Add a background image to the page<\/strong><\/h2>\n\n\n\n<p>We\u2019re starting with what looks like a blank page.&nbsp;<\/p>\n\n\n\n<p>In your CSS, add a background image property to the &lt;body&gt; element and cover the entire page. By default, the background is repeated.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  text-align: center;\n  background-image: \nurl('autumn.jpg');\n  background-size: 50%;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Step-1-1024x505.png\" alt=\"Thanksgiving Coding Activity - Step 1\" class=\"wp-image-35001\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Step-1-1024x505.png 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Step-1-300x148.png 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Step-1-768x379.png 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Step-1-1536x758.png 1536w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Step-1.png 1653w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Hint: To change the background, use a different JPEG or PNG image file in place of \u2018autumn.jpg\u2019.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step2\"><strong>Step 2: Add your game area and title it<\/strong><\/h2>\n\n\n\n<p>In your HTML, add a div with id game-wrapper and add a &lt;h1&gt; header for your game inside it.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"game-wrapper\"&gt;\n  &lt;h1&gt;Thanksgiving Match Game&lt;\/h1&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/S-IbPYmME7afaMKHWI0kt5YF0Adn46WXampaeMALloVst23C35Lg3PAYBcAgxRYpGd56leZkK-jXdZgZoDrpH6Gau49gPzRP9LSterCDwSynLFNkVljSw_CvInias_C7hNxrrhuq\" alt=\"Thanksgiving Coding Activity - Step 2\"\/><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: Change the text inside the &lt;h1&gt; to give your game a new name.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step3\"><strong>Step 3: Style your game area and title&nbsp;<\/strong><\/h2>\n\n\n\n<p>We\u2019ve already linked the <a href=\"https:\/\/fonts.google.com\/specimen\/Sniglet\">google font Sniglet<\/a> in the &lt;head&gt;, but here\u2019s where you can get creative.&nbsp;<\/p>\n\n\n\n<p>In your CSS, style the &lt;h1&gt; font and color as well as the game wrapper.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  font-family: 'Sniglet', cursive;\n  color: orange;\n  margin: 10px;\n}\n#game-wrapper {\n  width: 760px;\n  margin: auto;\n  margin-top: 40px;\n  padding: 20px;\n  background-color: #ffffff;\n  border-radius: 20px;\n  border: 2px solid orange;\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/5w0t1ns3ikzhaE99skyROe0A5-bJgBELFgAwLPGEjOtu25YHL6F5BqXogORDbrbgiBFelgNFcJgAKUGiNOuRr_Do8VcZlCFCTOxwYzLNuO_F1ZvJQP1B0ztGn_vFewz-GKgIsfCg\" alt=\"Thanksgiving Coding Activity - Step 3\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Hint: Change the background color property or add a background-image to your game wrapper to match your theme.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step4\"><strong>Step 4: Show the game cards<\/strong><\/h2>\n\n\n\n<p>Next, we want to shuffle and then show all of the game cards. We have a JavaScript function that does this, but you need to add the right HTML div for it to work.&nbsp;<\/p>\n\n\n\n<p>In your HTML, after your &lt;h1&gt; add a div called match-grid.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"game-wrapper\"&gt;\n  &lt;h1&gt;Thanksgiving Match Game&lt;\/h1&gt;\n  &lt;div id=\"match-grid\"&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/ciYlTt2yuLF9DvBXJZdNmKzAAftE4jiE_2j5CNscglRuiD3RA_3XjTEpeiULDnahirA5iMUInfTE_Di1E1ZiC7Lyd-Vk5-yV5uPmmoSYB1KaQosDCdjoFNEafkTddXGCqajTwAaH\" alt=\"Thanksgiving Coding Activity - Step 4\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Hint: We show 18 cards, but you can change this in your JavaScript code. In logic.js, change the number 18 in this loop to show more or less cards: for (var i = 0; i &lt; 18; i++).<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step5\"><strong>Step 5: Add a gradient to the face of the cards<\/strong><\/h2>\n\n\n\n<p>Right now, clicking on a card doesn\u2019t do anything and all cards will match. Let\u2019s style the front and back of our card so our code can match the images.<\/p>\n\n\n\n<p>In your CSS, style the face of the cards.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  backface-visibility: hidden;\n}\n\n.card_front {\n  background-image:\n linear-gradient(orange, yellow);\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/wbo92QrZM3xf0Ns2MtHEJlcaIoNaC0Q_dVCxB3OSQhdLP-9zbARmHwTwiLgLcYu0eJCnh5vMGf838-GShioXIhYtVjhfxNtKpnxkVBLIe_qt4Blpq8p41Z7umvoSbxTV-Uiw3lb0\" alt=\"Thanksgiving Coding Activity - Step 5\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: You can change the colors in the background-image or add a link to an image file.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step6\"><strong>Step 6: Add images to the back of the cards<\/strong><\/h2>\n\n\n\n<p>Our images are stored in our JavaScript code. Find the &lt;script&gt; tag at the bottom with the images variable and add your image files inside the quotes.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var images = &#91;\"pumpkin.png\", \n\"boat.png\", \n\"corn.png\"];\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/5-eTupFyVp1C6L8OljPzH15DUlfyF-emilkMzlO_JhmAZEfQd5HOc7oIAKRo6edRKwtmVTNFBev96DHNVcglwVK--3iZjPewb-yM5fsUylcCVNu47Qzg13cu9UNYBIxkMpYsQpLG\" alt=\"Thanksgiving Coding Activity - Step 6\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: You can add more image files using quotations and separating them with commas. The last image file does not have a comma at the end. (Ex: var images = [&#8220;pumpkin.png&#8221;, &#8220;boat.png&#8221;, &#8220;corn.png&#8221;, &#8220;pie.png&#8221;, &#8220;turkey.png&#8221;];)<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step7\"><strong>Step 7: Style Images on the back of the cards<\/strong><\/h2>\n\n\n\n<p>The images are too big and the back is showing!&nbsp;<\/p>\n\n\n\n<p>In your CSS, style the card to flip and the image on the back of the card to fit.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card_back {\n  background: #ffffff;\n  transform: rotateY( 180deg );\n}\n\n.card_back img {\n  width: 80px;\n  height: 80px;\n  margin-top: 10px;\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/6ZvSnq2_2Wj2-JpwSyOPUdJFesi3fazX7dfscQTFcpRSv4qL3LA3vJ9ax6-lYEeGWZ-SWlloesfZi01VkGTnmzJ8tabPGssvwRZU80XwIs3m2L-sqo2AtY9ITZwZJNotOVTsHFcN\" alt=\"Thanksgiving Coding Activity - Step 7\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: You can change the color on the back of the card and the size of the image here.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step8\"><strong>Step 8: Flip the card<\/strong><\/h2>\n\n\n\n<p>Nothing happens when we click. We need to add the \u201cis-flipped\u201d class and a transformation when a div has this class.&nbsp;<\/p>\n\n\n\n<p>In your CSS, add this code then click a card to turn it over. The logic to match the cards should also work now.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.is-flipped {\n  transform: rotateY(180deg);\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/Ovxw3Cb1KZWB4uiqZT_Xljfw2PDUIzYEdxdd0KMAzDQYiGiav07cLFOr1eH1yytoXuSacu5QLBByidHuQU3_xlakQUHshFw462u3E8C8Y6qus0ehOcS40GlSe1rjA3rijo3Vp6hE\" alt=\"Thanksgiving Coding Activity - Step 8\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: We\u2019re using <a href=\"https:\/\/www.w3schools.com\/css\/css3_3dtransforms.asp\">CSS 3D transformations<\/a> to make our card flip on click.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step9\"><strong>Step 9: Add a restart button<\/strong><\/h2>\n\n\n\n<p>When the game is over, we need to reset the board and randomize our cards. Inside the game wrapper, let\u2019s create an anchor element and connect it to our JavaScript using an onclick attribute.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"game-wrapper\"&gt;\n  &lt;h1&gt;Thanksgiving Match Game&lt;\/h1&gt;\n  &lt;div id=\"match-grid\"&gt;\n  &lt;\/div&gt;\n  &lt;a onclick=\"start()\"&gt;RESTART&lt;\/a&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/Yxj7ZiUNKshN4YmOe3FdSn4If0aq31JSLyKO2-SkwSqtp304FMmbYP_fH11LxD4g89toH2da1qbjDpNA6tmhKY44Nhis8vLjHQEbxe2JaTJ_b2ZBXfspLqJWj1mtybwN0uoKrutH\" alt=\"Thanksgiving Coding Activity - Step 9\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: Your button can say anything you want, replace the text inside your &lt;a&gt; tag.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step10\"><strong>Step 10: Style the restart button<\/strong><\/h2>\n\n\n\n<p>You should see your link and it should be working to restart your game. It just looks like text, so let\u2019s change the color, font, and size to create a button.<\/p>\n\n\n\n<p>In your CSS, style your anchor tag to look like a button.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Add this code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a {\n  font-family: 'Sniglet', cursive;\n  background-color: orange;\n  display: block;\n  padding: 10px;\n  margin: 10px;\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/dZdhtb0Jed1vdRrQN94HzaB5TZ0MESgrGVi-lm1Fyw2y6VcW8v_HbfyQBB6Tu7v7BfRYAVnrcYLCziXw1a1mFIFnAIR2NU8dUKj8RcRrfs6xXsCMm7MJ-sLsk-PPUrpg1djHDCSd\" alt=\"Thanksgiving Coding Activity - Step 10\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Tip: You can change the button and text colors to match your theme here.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"thanksgiving-game\"><strong>Your game is complete!&nbsp;<\/strong><\/h2>\n\n\n\n<p>Check out the <a href=\"https:\/\/margaret.codewizardshq.com\/x_matching_game\/i_game.html\">finished product<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/margaret.codewizardshq.com\/x_matching_game\/i_game.html\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"332\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Thanksgiving-Gameplay-Gif.gif\" alt=\"Thanksgiving Coding Activity Gif\" class=\"wp-image-35011\"\/><\/a><\/figure><\/div>\n\n\n<p>We want to see how you\u2019ve styled your Thanksgiving games!&nbsp;<\/p>\n\n\n\n<p><strong>Use #codewizardshq and #NowYouCode to share your project link and show us what you\u2019ve created or post it in our <\/strong><a href=\"https:\/\/www.facebook.com\/groups\/KidWizardsHQ\"><strong>Facebook Group<\/strong><\/a><strong>. <\/strong>All complete projects will be added to this article. Our instructors will also be answering questions and fixing bugs in the <a href=\"https:\/\/www.facebook.com\/groups\/KidWizardsHQ\">Facebook Group<\/a>.&nbsp;<\/p>\n\n\n\n<p>Ready to level up your coding experience? Take a fun <a href=\"https:\/\/www.codewizardshq.com\/html-for-kids\/\">html coding class<\/a> with our live, expert instructors.<\/p>\n\n\n\n<p>This year, we\u2019re grateful for your family reading the CodeWizardsHQ blog and we wish you a very happy Thanksgiving.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.codewizardshq.com\/coding-programs-for-kids\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"219\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/elementary_coding_banner2020-1024x219.jpg\" alt=\"Elementary School Coding Banner 2020\" class=\"wp-image-34893\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/elementary_coding_banner2020-1024x219.jpg 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/elementary_coding_banner2020-300x64.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/elementary_coding_banner2020-768x164.jpg 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/elementary_coding_banner2020.jpg 1052w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Thanksgiving Game Gallery<\/strong><\/h2>\n\n\n\n<p>Play the completed match games and get inspired for designing your game too.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/april.codewizardshq.com\/thanksgiving\/game.html\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"733\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/cwhq_match_game-1024x733.png\" alt=\"Thanksgiving Match Game Theme\" class=\"wp-image-35305\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/cwhq_match_game-1024x733.png 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/cwhq_match_game-300x215.png 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/cwhq_match_game-768x550.png 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/cwhq_match_game.png 1159w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/margaret.codewizardshq.com\/x_pusheen_game\/game.html\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"712\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/pusheen_match_game2-1024x712.png\" alt=\"Thanksgiving Match Game Pusheen Theme\" class=\"wp-image-35304\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/pusheen_match_game2-1024x712.png 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/pusheen_match_game2-300x209.png 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/pusheen_match_game2-768x534.png 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/pusheen_match_game2.png 1172w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Thanksgiving is a great time to gather around the table and spend time with our families. In our household, it\u2019s a tradition to play board games before we eat dinner. Here\u2019s a chance to practice your HTML and CSS coding skills and give your family a fun activity to do when you get together. Code [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":52531,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[10809,4758],"tags":[10808,10815,10741,10814],"class_list":["post-35000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-learn-coding","tag-code-activities","tag-free-activities","tag-html-css","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v26.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML and CSS Tutorial for Kids: Thanksgiving Matching Game<\/title>\n<meta name=\"description\" content=\"Thanksgiving HTML and CSS tutorial for kids to build a matching game. Practice coding and build memory skills plus get a free coloring activity.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game\" \/>\n<meta property=\"og:description\" content=\"Thanksgiving HTML and CSS tutorial for kids to build a matching game. Practice coding and build memory skills plus get a free coloring activity.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeWizardsHQ\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codewizardshq\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-13T01:28:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T10:52:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Thanksgiving-Coding-Activity.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"323\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Margaret Choi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codewizardshq\" \/>\n<meta name=\"twitter:site\" content=\"@codewizardshq\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margaret Choi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Margaret Choi\",\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca\"\n\t            },\n\t            \"headline\": \"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game\",\n\t            \"datePublished\": \"2020-11-13T01:28:50+00:00\",\n\t            \"dateModified\": \"2025-08-26T10:52:14+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\"\n\t            },\n\t            \"wordCount\": 1202,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png\",\n\t            \"keywords\": [\n\t                \"code activities\",\n\t                \"free activities\",\n\t                \"HTML\/CSS\",\n\t                \"tutorials\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Activities\",\n\t                \"Learn Coding\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\",\n\t            \"name\": \"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png\",\n\t            \"datePublished\": \"2020-11-13T01:28:50+00:00\",\n\t            \"dateModified\": \"2025-08-26T10:52:14+00:00\",\n\t            \"description\": \"Thanksgiving HTML and CSS tutorial for kids to build a matching game. Practice coding and build memory skills plus get a free coloring activity.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png\",\n\t            \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png\",\n\t            \"width\": 1600,\n\t            \"height\": 395,\n\t            \"caption\": \"Thanksgiving HTML CSS Activity Banner\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.codewizardshq.com\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/#website\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/\",\n\t            \"name\": \"CodeWizardsHQ\",\n\t            \"description\": \"The leading online coding academy for kids and teens ages 8-18\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.codewizardshq.com\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/#organization\",\n\t            \"name\": \"CodeWizardsHQ\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png\",\n\t                \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png\",\n\t                \"width\": 150,\n\t                \"height\": 108,\n\t                \"caption\": \"CodeWizardsHQ\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/\"\n\t            },\n\t            \"sameAs\": [\n\t                \"https:\/\/www.facebook.com\/codewizardshq\/\",\n\t                \"https:\/\/x.com\/codewizardshq\",\n\t                \"https:\/\/www.instagram.com\/codewizardshq\/\",\n\t                \"https:\/\/www.linkedin.com\/company\/codewizardshq\",\n\t                \"https:\/\/www.pinterest.com\/codewizardshq\/\",\n\t                \"https:\/\/www.youtube.com\/channel\/UC4NM0jfN0LI8_vWtiwLqgGw\"\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca\",\n\t            \"name\": \"Margaret Choi\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g\",\n\t                \"caption\": \"Margaret Choi\"\n\t            },\n\t            \"description\": \"Instructor and marketing manager at CodeWizardsHQ since 2019. She breaks down topics around coding and specific coding languages for kids to understand.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/www.facebook.com\/margaret.choi.3\"\n\t            ],\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game","description":"Thanksgiving HTML and CSS tutorial for kids to build a matching game. Practice coding and build memory skills plus get a free coloring activity.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/","og_locale":"en_US","og_type":"article","og_title":"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game","og_description":"Thanksgiving HTML and CSS tutorial for kids to build a matching game. Practice coding and build memory skills plus get a free coloring activity.","og_url":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/","og_site_name":"CodeWizardsHQ","article_publisher":"https:\/\/www.facebook.com\/codewizardshq\/","article_published_time":"2020-11-13T01:28:50+00:00","article_modified_time":"2025-08-26T10:52:14+00:00","og_image":[{"width":620,"height":323,"url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2020\/11\/Thanksgiving-Coding-Activity.jpg","type":"image\/jpeg"}],"author":"Margaret Choi","twitter_card":"summary_large_image","twitter_creator":"@codewizardshq","twitter_site":"@codewizardshq","twitter_misc":{"Written by":"Margaret Choi","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#article","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/"},"author":{"name":"Margaret Choi","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca"},"headline":"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game","datePublished":"2020-11-13T01:28:50+00:00","dateModified":"2025-08-26T10:52:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/"},"wordCount":1202,"publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"image":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png","keywords":["code activities","free activities","HTML\/CSS","tutorials"],"articleSection":["Activities","Learn Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/","url":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/","name":"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage"},"image":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png","datePublished":"2020-11-13T01:28:50+00:00","dateModified":"2025-08-26T10:52:14+00:00","description":"Thanksgiving HTML and CSS tutorial for kids to build a matching game. Practice coding and build memory skills plus get a free coloring activity.","breadcrumb":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#primaryimage","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner.png","width":1600,"height":395,"caption":"Thanksgiving HTML CSS Activity Banner"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-thanksgiving-matching-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codewizardshq.com\/"},{"@type":"ListItem","position":2,"name":"HTML and CSS Tutorial for Kids: Thanksgiving Matching Game"}]},{"@type":"WebSite","@id":"https:\/\/www.codewizardshq.com\/#website","url":"https:\/\/www.codewizardshq.com\/","name":"CodeWizardsHQ","description":"The leading online coding academy for kids and teens ages 8-18","publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codewizardshq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codewizardshq.com\/#organization","name":"CodeWizardsHQ","url":"https:\/\/www.codewizardshq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2016\/08\/blueVertical@2x-e1572141901928.png","width":150,"height":108,"caption":"CodeWizardsHQ"},"image":{"@id":"https:\/\/www.codewizardshq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codewizardshq\/","https:\/\/x.com\/codewizardshq","https:\/\/www.instagram.com\/codewizardshq\/","https:\/\/www.linkedin.com\/company\/codewizardshq","https:\/\/www.pinterest.com\/codewizardshq\/","https:\/\/www.youtube.com\/channel\/UC4NM0jfN0LI8_vWtiwLqgGw"]},{"@type":"Person","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca","name":"Margaret Choi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7815305d40218c8baa3db95a35d697293aad7b383484ae7e26b6383e0f67b6ba?s=96&d=mm&r=g","caption":"Margaret Choi"},"description":"Instructor and marketing manager at CodeWizardsHQ since 2019. She breaks down topics around coding and specific coding languages for kids to understand.","sameAs":["https:\/\/www.facebook.com\/margaret.choi.3"],"url":"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/"}]}},"modified_by":"Dima","featured_image_src":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner-600x395.png","featured_image_src_square":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Thanksgiving-HTML-CSS-Activity-Banner-600x395.png","author_info":{"display_name":"Margaret Choi","author_link":"https:\/\/www.codewizardshq.com\/author\/margaretchoi\/"},"_links":{"self":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/35000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/comments?post=35000"}],"version-history":[{"count":2,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/35000\/revisions"}],"predecessor-version":[{"id":71669,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/35000\/revisions\/71669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media\/52531"}],"wp:attachment":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media?parent=35000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/categories?post=35000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/tags?post=35000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}