{"id":22222,"date":"2019-12-24T03:52:14","date_gmt":"2019-12-24T09:52:14","guid":{"rendered":"https:\/\/www.codewizardshq.com\/?p=22222"},"modified":"2023-10-06T22:49:01","modified_gmt":"2023-10-07T04:49:01","slug":"html-css-tutorial-holiday-card","status":"publish","type":"post","link":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/","title":{"rendered":"HTML and CSS Tutorial for Kids: Holiday Card"},"content":{"rendered":"\n<p><strong>Happy holidays to all of our students and friends. <\/strong>Instead of buying a card this year, use our HTML and CSS tutorial for kids and your programming skills to code a personalized holiday card for your friends and family. <\/p>\n\n\n\n<p>It\u2019s not the same boring card everyone else is buying, you can personalize this card with your style or match the recipient\u2019s. <strong>This is an easy HTML and CSS tutorial for kids or anyone starting to learn. <\/strong>We\u2019ll be building this simple holiday card that opens when you hover over it.<\/p>\n\n\n\n<!--more-->\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"230\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-card-opening.gif\" alt=\"html tutorial for kids, card opening\" class=\"wp-image-22299\" style=\"width:680px;height:323px\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">This tutorial assumes you understand basic HTML and CSS. Let\u2019s get started!<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"#add-bg\">Step 1: Add a background image to the page<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#add-front\">Step 2: Add an image to the front of the card<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#add-frontmsg\">Step 3: Add a message to the cover of your card<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#style-frontmsg\">Step 4: Style the message on the cover of your card<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#add-backmsg\">Step 5: Add a message on the back of your card<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#style-backmsg\">Step 6: Style the message on the back of your card<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#add-logo\">Step 7: Add your picture or logo to the inside page<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"#final-card\">Finished card!<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What you need:<\/strong><\/h3>\n\n\n\n<h6 class=\"wp-block-heading\">1.<strong> Text edito<\/strong>r <\/h6>\n\n\n\n<p>You can use a simple text editor like  Notepad, TextEdit, <a href=\"https:\/\/www.sublimetext.com\/3\">Sublime Text<\/a>, etc.&nbsp; You may also use an online text editor like <a href=\"https:\/\/codepen.io\/\">Codepen<\/a>. Please use the link to set up your account.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">2.<strong> Base HTML\/CSS file.<\/strong><\/h6>\n\n\n\n<p><strong><a href=\"https:\/\/drive.google.com\/open?id=1nDQ9_FJjMcMJDgbiU-gepAA5ufZWIwzM\">Download the base folder<\/a> and open the holiday_card.html file<\/strong>. This folder contains all the images and files you will need to complete your card.<\/p>\n\n\n\n<p>Edit the <strong>holiday_card.html<\/strong> file inside of any text editor: for example, Notepad on Windows, TextEdit on Mac, or <a href=\"https:\/\/www.sublimetext.com\/3\">Sublime Text<\/a>. You can also use an online text editor like <a href=\"https:\/\/codepen.io\/\">Codepen <\/a>to edit and run this code. <strong>The base files will set up a blank card that opens when you hover over it. <\/strong><\/p>\n\n\n<p style=\"background: none repeat scroll 0 0 #ecf3f6; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #011e41; padding: 16px;\"><span class=\"ttfmake-icon mceNonEditable fa\">\ud83d\udcbb<\/span><small><strong> Prepare your child for success: <\/strong> If you are looking for your child to learn to code, explore our live, teacher-led coding classes. <a href=\"https:\/\/www.codewizardshq.com\/coding-programs-for-kids\/\">View Programs.<\/a><\/small><\/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 and CSS 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<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\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=\"add-bg\"><strong>Step 1: Add a background image to the page<\/strong><\/h2>\n\n\n\n<p>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 has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n      background-image: url('bg.jpg');\n      background-size: cover;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-wood-background-1024x536.jpg\" alt=\"HTML holiday card tutorial, step 1\" class=\"wp-image-22245\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-wood-background-1024x536.jpg 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-wood-background-300x157.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-wood-background-768x402.jpg 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-wood-background.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i> Hint: To change the background, use a different JPEG or PNG image file in place of \u2018bg.png\u2019.<\/i><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-front\"><strong>Step 2: Add an image to the front of the card<\/strong><\/h2>\n\n\n\n<p>Add a background image property and a background-size to .front. This adds a nice image to the front of our card.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-preformatted\">.front {\n      background: url('winter_scene.jpg') \nno-repeat center darkred;\n      background-size: cover;\n    }\n<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"323\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front.jpg\" alt=\"html tutorial for kids, front\" class=\"wp-image-22280\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front.jpg 620w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front-300x156.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<p> We also want the same image on the inside front of the card. Instead of creating a separate style for .page, we will add it to the styles for .front.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>.front, .page {\n      background: url('winter_scene.jpg') \nno-repeat center darkred;\n      background-size: cover;\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<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"323\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-page.jpg\" alt=\"html tutorial for kids, page\" class=\"wp-image-22281\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-page.jpg 620w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-page-300x156.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i> Hint: To change the cover image, use a different JPEG or PNG image file in place of &#8216;winter_scene.jpg&#8217;. <\/i><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-frontmsg\"><strong>Step 3: Add a message to the cover of your card<\/strong><\/h2>\n\n\n\n<p>Add a message on the cover using an H1 element inside .front. Include your own holiday message. <\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"front\"&gt;\n &lt;h1&gt;Happy Holidays!&lt;\/h1&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"323\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-unstyled-header.jpg\" alt=\"html tutorial for kids, unstyled header\" class=\"wp-image-22282\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-unstyled-header.jpg 620w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-unstyled-header-300x156.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i> Hint: To change the message, replace \u2018Happy Holidays\u2019 with a personalized message.<\/i><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-frontmsg\"><strong>Step 4: Style the message on the cover of your card<\/strong><\/h2>\n\n\n\n<p>Style your &lt;h1&gt; element. We\u2019ve added the <a href=\"https:\/\/fonts.google.com\/specimen\/Cookie\">Google font \u201cCookie\u201d<\/a> in our &lt;head&gt; element.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n font-family: 'Cookie', serif;\n font-size: 40px;\n margin-top: 40px;\n color: white; \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<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front-message-1024x536.jpg\" alt=\"html tutorial for kids, front message\" class=\"wp-image-22242\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front-message-1024x536.jpg 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front-message-300x157.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front-message-768x402.jpg 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-front-message.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i> Hint: To change the font, replace \u2018Cookie\u2019 in the font-family property. Select from these <a href=\"https:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp\"> web safe fonts.<\/a><\/i><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-backmsg\"><strong>Step 5: Add a message on the back of your card<\/strong><\/h2>\n\n\n\n<p>Inside of .back, add a &lt;div&gt; element with class \u2018message\u2019 to hold your headings and paragraph.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"back\"&gt;\n    &lt;div class=\"message\"&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"323\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-page.jpg\" alt=\"html tutorial for kids, page\" class=\"wp-image-22281\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-page.jpg 620w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-page-300x156.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p> Inside of .message, add a personalized message to your friend or family member with &lt;h5&gt; and &lt;p&gt; elements. <\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"message\"&gt;\n   &lt;h5&gt;Dear Friends,&lt;\/h5&gt;\n   &lt;p&gt;'Tis the season of giving and\n gratitude. Thank you for your continued \nsupport. We wish you and your family a\n joyous and happy holiday season. &lt;\/p&gt;\n   &lt;h5&gt;CodeWizardsHQ Team&lt;\/h5&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<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"323\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-unstyled-message.jpg\" alt=\"html tutorial for kids, unstyled message\" class=\"wp-image-22283\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-unstyled-message.jpg 620w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-unstyled-message-300x156.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i>  Hint: To change the message, replace the content inside your H5 and p elements. <\/i><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-backmsg\"><strong>Step 6: Style the message on the back of your card<\/strong><\/h2>\n\n\n\n<p> Add the following styles to .message and text elements. <\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>.message {\n  margin-top: 30px;\n  color: #900909;\n}\n\nh5 {\n  font-family: 'Cookie', serif;\n}\n\np {\n   font-size: 10px;\n}\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<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-inside-message-1024x536.jpg\" alt=\"HTML holiday card tutorial, inside text\" class=\"wp-image-22243\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-inside-message-1024x536.jpg 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-inside-message-300x157.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-inside-message-768x402.jpg 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-inside-message.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i> Hint: You can change the color of the font by changing the color name or hex property of .message (<a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\">List of colors<\/a>)<\/i><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-logo\"><strong>Step 7: Add your picture or logo to the inside page<\/strong><\/h2>\n\n\n\n<p>Add an &lt;img&gt; element inside of .page<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"page\"&gt;\n   &lt;img src=\"cwhq_logo.png\"&gt;\n&lt;\/div&gt;\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<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-1024x536.jpg\" alt=\"html tutorial for kids, logo\" class=\"wp-image-22244\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-1024x536.jpg 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-300x157.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-768x402.jpg 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p>Style your &lt;img&gt; element by decreasing the size and flipping it.<br><\/p>\n\n\n\n<div class=\"wp-block-columns has-2-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<h6 class=\"wp-block-heading\"><strong>Add this code:<\/strong><\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>img{\n   margin-top: 60px;\n   width: 90px;\n   transform: scaleX(-1);\n}\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<h6 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-1024x536.jpg\" alt=\"html tutorial for kids, logo\" class=\"wp-image-22244\" srcset=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-1024x536.jpg 1024w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-300x157.jpg 300w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo-768x402.jpg 768w, https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-logo.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<p style=\"background: none repeat scroll 0 0 #ececec; clear: both; margin-bottom: 18px; overflow: hidden; border: 1px solid #eeeeee; padding: 13px;\"><strong><i> Hint: You can change the image by linking a different JPG or PNG file in the src attribute of the <img> element.<\/i><\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-card\">Your card is complete! <\/h2>\n\n\n\n<p>Check out the <a href=\"https:\/\/margaret.codewizardshq.com\/holiday_card\/i_card.html\">finished product<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"230\" src=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-tutorial-for-kids-card-opening.gif\" alt=\"html tutorial for kids, card opening\" class=\"wp-image-22299\" style=\"width:680px;height:323px\"\/><\/figure><\/div>\n\n\n<p><strong>Download the <\/strong><a href=\"https:\/\/drive.google.com\/open?id=11xaS6suL7gw9QNYa5Yo6x0Z_EhITUafz\"><strong>completed HTML and CSS code<\/strong><\/a><strong> and open the  i_holiday_card.html for the final card project.<\/strong><\/p>\n\n\n\n<p>Customize this code to create your own holiday card! It\u2019s that easy. Now you can dazzle your friends and family with your coding skills and a thoughtful card too.&nbsp;<\/p>\n\n\n\n<p><strong>Did you code your own card?<\/strong> <a href=\"https:\/\/www.facebook.com\/codewizardshq\">Share<\/a> a picture or link and use #CodeWizardsHQ or tag us to be featured on social media.  <\/p>\n\n\n\n<p>Learn more about building games and websites in our live <a href=\"https:\/\/www.codewizardshq.com\/html-for-kids\/\">HTML coding classes<\/a> for kids.<\/p>\n\n\n\n<p><strong>Ready to level up your child\u2019s learning experience?<\/strong>&nbsp;See our coding programs for kids ages 8-18:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.codewizardshq.com\/coding-classes-elementary-school-students\/\">Elementary School Coding Program<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.codewizardshq.com\/coding-classes-middle-school-students\/\">Middle School Coding Program<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.codewizardshq.com\/coding-classes-high-school-students\/\">High School Coding Program<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Happy holidays to all of our students and friends. Instead of buying a card this year, use our HTML and CSS tutorial for kids and your programming skills to code a personalized holiday card for your friends and family. It\u2019s not the same boring card everyone else is buying, you can personalize this card with [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":52532,"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":"yes","_lmt_disable":"","footnotes":""},"categories":[10809,4758],"tags":[10742,10744,10745,10808,10815,10741,10814],"class_list":["post-22222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-learn-coding","tag-1-4-years-old","tag-11-13-years-old","tag-14-years-old","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: Holiday Card | CodeWizardsHQ<\/title>\n<meta name=\"description\" content=\"Create a customized holiday card using our HTML and CSS tutorial for kids and teens. This is an easy HTML and CSS tutorial for kids starting to learn.\" \/>\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-holiday-card\/\" \/>\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: Holiday Card\" \/>\n<meta property=\"og:description\" content=\"Create a customized holiday card using our HTML and CSS tutorial for kids and teens. This is an easy HTML and CSS tutorial for kids starting to learn.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/\" \/>\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=\"2019-12-24T09:52:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-07T04:49:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-css-holiday-coding-tutorial-for-kids.png\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"326\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"6 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-holiday-card\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/\"\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: Holiday Card\",\n\t            \"datePublished\": \"2019-12-24T09:52:14+00:00\",\n\t            \"dateModified\": \"2023-10-07T04:49:01+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/\"\n\t            },\n\t            \"wordCount\": 876,\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-holiday-card\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png\",\n\t            \"keywords\": [\n\t                \"1-4 Years Old\",\n\t                \"11-13 Years Old\",\n\t                \"14+ Years Old\",\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-holiday-card\/\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/\",\n\t            \"name\": \"HTML and CSS Tutorial for Kids: Holiday Card | CodeWizardsHQ\",\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-holiday-card\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png\",\n\t            \"datePublished\": \"2019-12-24T09:52:14+00:00\",\n\t            \"dateModified\": \"2023-10-07T04:49:01+00:00\",\n\t            \"description\": \"Create a customized holiday card using our HTML and CSS tutorial for kids and teens. This is an easy HTML and CSS tutorial for kids starting to learn.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#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-holiday-card\/\"\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-holiday-card\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png\",\n\t            \"contentUrl\": \"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png\",\n\t            \"width\": 1600,\n\t            \"height\": 395,\n\t            \"caption\": \"Christmas HTML CSS Activity Banner\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#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: Holiday Card\"\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: Holiday Card | CodeWizardsHQ","description":"Create a customized holiday card using our HTML and CSS tutorial for kids and teens. This is an easy HTML and CSS tutorial for kids starting to learn.","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-holiday-card\/","og_locale":"en_US","og_type":"article","og_title":"HTML and CSS Tutorial for Kids: Holiday Card","og_description":"Create a customized holiday card using our HTML and CSS tutorial for kids and teens. This is an easy HTML and CSS tutorial for kids starting to learn.","og_url":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/","og_site_name":"CodeWizardsHQ","article_publisher":"https:\/\/www.facebook.com\/codewizardshq\/","article_published_time":"2019-12-24T09:52:14+00:00","article_modified_time":"2023-10-07T04:49:01+00:00","og_image":[{"width":620,"height":326,"url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/html-css-holiday-coding-tutorial-for-kids.png","type":"image\/png"}],"author":"Margaret Choi","twitter_card":"summary_large_image","twitter_creator":"@codewizardshq","twitter_site":"@codewizardshq","twitter_misc":{"Written by":"Margaret Choi","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#article","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/"},"author":{"name":"Margaret Choi","@id":"https:\/\/www.codewizardshq.com\/#\/schema\/person\/0d1794273fcc4d0b634d50375e00e1ca"},"headline":"HTML and CSS Tutorial for Kids: Holiday Card","datePublished":"2019-12-24T09:52:14+00:00","dateModified":"2023-10-07T04:49:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/"},"wordCount":876,"publisher":{"@id":"https:\/\/www.codewizardshq.com\/#organization"},"image":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png","keywords":["1-4 Years Old","11-13 Years Old","14+ Years Old","code activities","free activities","HTML\/CSS","tutorials"],"articleSection":["Activities","Learn Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/","url":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/","name":"HTML and CSS Tutorial for Kids: Holiday Card | CodeWizardsHQ","isPartOf":{"@id":"https:\/\/www.codewizardshq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#primaryimage"},"image":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png","datePublished":"2019-12-24T09:52:14+00:00","dateModified":"2023-10-07T04:49:01+00:00","description":"Create a customized holiday card using our HTML and CSS tutorial for kids and teens. This is an easy HTML and CSS tutorial for kids starting to learn.","breadcrumb":{"@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#primaryimage","url":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png","contentUrl":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner.png","width":1600,"height":395,"caption":"Christmas HTML CSS Activity Banner"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codewizardshq.com\/html-css-tutorial-holiday-card\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codewizardshq.com\/"},{"@type":"ListItem","position":2,"name":"HTML and CSS Tutorial for Kids: Holiday Card"}]},{"@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":"Margaret Choi","featured_image_src":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-HTML-CSS-Activity-Banner-600x395.png","featured_image_src_square":"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2019\/12\/Christmas-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\/22222","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=22222"}],"version-history":[{"count":1,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/22222\/revisions"}],"predecessor-version":[{"id":69063,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/posts\/22222\/revisions\/69063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media\/52532"}],"wp:attachment":[{"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/media?parent=22222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/categories?post=22222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codewizardshq.com\/wp-json\/wp\/v2\/tags?post=22222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}