{"id":13702,"date":"2019-03-13T15:30:00","date_gmt":"2019-03-13T20:30:00","guid":{"rendered":"https:\/\/ourfamilycode.com\/?p=13702"},"modified":"2021-06-04T12:48:14","modified_gmt":"2021-06-04T17:48:14","slug":"how-to-code-a-rectangle-with-javascript","status":"publish","type":"post","link":"https:\/\/ourfamilycode.com\/how-to-code-a-rectangle-with-javascript\/","title":{"rendered":"How to Code a Rectangle with JavaScript"},"content":{"rendered":"<style>img#mv-trellis-img-1::before{padding-top:56.25%; }img#mv-trellis-img-1{display:block;}img#mv-trellis-img-2::before{padding-top:129.41176470588%; }img#mv-trellis-img-2{display:block;}img#mv-trellis-img-3::before{padding-top:131.92%; }img#mv-trellis-img-3{display:block;}img#mv-trellis-img-4::before{padding-top:135.2%; }img#mv-trellis-img-4{display:block;}img#mv-trellis-img-5::before{padding-top:133.76%; }img#mv-trellis-img-5{display:block;}img#mv-trellis-img-6::before{padding-top:133.28%; }img#mv-trellis-img-6{display:block;}img#mv-trellis-img-7::before{padding-top:139.28%; }img#mv-trellis-img-7{display:block;}img#mv-trellis-img-8::before{padding-top:130.4%; }img#mv-trellis-img-8{display:block;}img#mv-trellis-img-9::before{padding-top:128.8%; }img#mv-trellis-img-9{display:block;}img#mv-trellis-img-10::before{padding-top:150%; }img#mv-trellis-img-10{display:block;}img#mv-trellis-img-11::before{padding-top:56.190476190476%; }img#mv-trellis-img-11{display:block;}img#mv-trellis-img-12::before{padding-top:56.190476190476%; }img#mv-trellis-img-12{display:block;}img#mv-trellis-img-13::before{padding-top:56.190476190476%; }img#mv-trellis-img-13{display:block;}img#mv-trellis-img-14::before{padding-top:56.190476190476%; }img#mv-trellis-img-14{display:block;}img#mv-trellis-img-15::before{padding-top:56.190476190476%; }img#mv-trellis-img-15{display:block;}img#mv-trellis-img-16::before{padding-top:56.190476190476%; }img#mv-trellis-img-16{display:block;}img#mv-trellis-img-17::before{padding-top:56.190476190476%; }img#mv-trellis-img-17{display:block;}img#mv-trellis-img-18::before{padding-top:56.190476190476%; }img#mv-trellis-img-18{display:block;}img#mv-trellis-img-19::before{padding-top:133.33333333333%; }img#mv-trellis-img-19{display:block;}img#mv-trellis-img-20::before{padding-top:56.09756097561%; }img#mv-trellis-img-20{display:block;}img#mv-trellis-img-21::before{padding-top:56.25%; }img#mv-trellis-img-21{display:block;}img#mv-trellis-img-22::before{padding-top:52.040175768989%; }img#mv-trellis-img-22{display:block;}img#mv-trellis-img-23::before{padding-top:56.25%; }img#mv-trellis-img-23{display:block;}img#mv-trellis-img-24::before{padding-top:100%; }img#mv-trellis-img-24{display:block;}img#mv-trellis-img-25::before{padding-top:100%; }img#mv-trellis-img-25{display:block;}img#mv-trellis-img-26::before{padding-top:56.25%; }img#mv-trellis-img-26{display:block;}img#mv-trellis-img-27::before{padding-top:132.75862068966%; }img#mv-trellis-img-27{display:block;}<\/style>\n<p>Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity!<\/p>\n\n\n\n<p>This math + art + technology activity is designed to show how <strong>JavaScript<\/strong> programs can be used to make drawings and introduce kids to the <strong>coordinate system<\/strong> used. <\/p>\n\n\n\n<p>Previously, we shared&nbsp;<a href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\"><strong>how to code a circle<\/strong><\/a> with JavaScript and ProcessingJS. This rectangle coding activity will introduce <strong>how to code a rectangle with JavaScript<\/strong> as well as introduce both the point() and line() functions.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript.jpg\" alt=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" class=\"wp-image-13731\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript.jpg 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1200x675.webp 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript.jpg\"><\/noscript><img decoding=\"async\" loading=\"eager\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"data:image\/svg+xml,%3Csvg%20xmlns='http:\/\/www.w3.org\/2000\/svg'%20viewBox='0%200%201920%201080'%3E%3Crect%20width='1920'%20height='1080'%20style='fill:%23e3e3e3'\/%3E%3C\/svg%3E\" alt=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" class=\"wp-image-13731 eager-load\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript.jpg\" id=\"mv-trellis-img-1\" data-src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript.jpg.webp\" data-srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript.jpg.webp 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-teach-your-kids-how-to-code-a-rectangle-javascript-150x84.jpg.webp 150w\" data-svg=\"1\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This rectangle coding activity builds on our <a href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\">previous activity that explored the ellipse() function<\/a>. Like our circle coding activity, this activity emphasizes the importance in the order of code, the coordinate grid, how a rectangle is positioned by its upper left corner, and how to add color.<\/p>\n\n\n\n<p>This activity is designed for kid coders with basic coding experience, but it can be adapted for younger learners as well. <\/p>\n\n\n\n<p>I did this activity with my oldest girls, 6yrs and 11yrs.&nbsp;The trick to keeping it simple with a young kid coder is to treat the activity as more of an exploration and create excitement about <a href=\"https:\/\/ourfamilycode.com\/coding-your-artwork\/\">turning drawings into programs<\/a> on a computer while inserting some key vocabulary.&nbsp;<\/p>\n\n\n\n<p>We also used <a href=\"https:\/\/amzn.to\/3g9uJI1\" target=\"_blank\" rel=\"noreferrer noopener sponsored nofollow\">dry erase pocket sleeves <\/a>in order to reuse our canvas drawing grid for more Javascript coding activities!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large\"><p><strong>Recommended:&nbsp;<a href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\">How to Code a Circle with JavaScript<\/a><\/strong><\/p><\/blockquote>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is p5.js?<\/strong><\/h2>\n\n\n\n<p>This activity uses <a href=\"http:\/\/p5js.org\" target=\"_blank\" rel=\"noopener noreferrer\">p5.js<\/a>,&nbsp;a library and set of tools that make it easy to use the JavaScript programming language for creative coding purposes. <\/p>\n\n\n\n<p>p5.js is&nbsp;based on&nbsp;<a href=\"https:\/\/processing.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Processing<\/a>, a creative coding environment originally developed by Ben Fry and Casey Reas. <\/p>\n\n\n\n<p>One of the primary goals of Processing is to help artists, designers, educators, and beginners learn how to program interactive, graphical applications while also being an impressive tool for experts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Activity Code<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow\">\n<p>This activity introduces and reinforces the following code:<\/p>\n\n\n\n<ul><li>rect(x, y, w, h)<\/li><li>line(x1, y1, x2, y2)<\/li><li>point(x, y)<\/li><li>fill(r, g, b)<\/li><li>background(r, g, b)<\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-pale-cyan-blue-background-color has-background\"><strong>Please Note:<\/strong> This interactive coding activity is best viewed on a desktop or tablet. Mobile devices can be used to complete the lesson with scrolling or in landscape mode.<\/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\"><strong>How to Code a Rectangle<\/strong><\/h2>\n\n\n\n<p>In order for the computer to understand how to draw a rectangle, you&rsquo;ll need to give it information about where to draw the rectangle as well as what size it should be. <\/p>\n\n\n\n<p>This information is given to a computer by using the rectangle function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Coordinate Grid<\/strong><\/h2>\n\n\n\n<p>Before we can plot our rectangles, we need to understand how the canvas grid works. <\/p>\n\n\n\n<p>In math class, a coordinate grid starts with (0,0) in the middle of the grid and the Y value increases as you move up and decreases as you move down. There are also negative numbers. This type of coordinate grid is called the Cartesian Coordinate System.&nbsp;<\/p>\n\n\n\n<p>In a <strong>computer system<\/strong>, the coordinate system is reversed along the y-axis and (0,0) begins in the top left corner of the grid.&nbsp;<\/p>\n\n\n\n<p>You should print <a href=\"https:\/\/ourfamilycode.com\/download\/canvas-drawing-grid-javascript-activities\/\">a canvas drawing grid<\/a> to help you figure out the coordinates for your drawings.<\/p>\n\n\n\n<p class=\"has-text-align-center has-very-dark-gray-color has-pale-cyan-blue-background-color has-text-color has-background\"><strong><a href=\"https:\/\/ourfamilycode.com\/download\/canvas-drawing-grid-javascript-activities\/\">&lt;&lt;CLICK HERE TO DOWNLOAD A FREE CANVAS DRAWING GRID&gt;&gt;<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The canvas size used for this activity is 600&times;600, which means that the center of our canvas is (300,300). <\/p>\n\n\n\n<p>The drawing grid is 60 blocks by 60 blocks, so each block is equivalent to 10 pixels (60 blocks X 10 pixels = 600 pixels). Use this to calculate your width and height.<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-javascript-activities.pdf\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"816\" height=\"1056\" data-pin-description=\"Use this canvas drawing grid to plot the coordinates for your javascript drawing. #teachkidstocode #p5js #codingart\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities.jpg\" alt=\"Use this canvas drawing grid to plot the coordinates for your javascript drawing. #teachkidstocode #p5js #codingart\" class=\"wp-image-13552\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities.jpg 816w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-232x300.jpg 232w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-768x994.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-791x1024.jpg 791w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-735x951.jpg 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"816\" height=\"1056\" data-pin-description=\"Use this canvas drawing grid to plot the coordinates for your javascript drawing. #teachkidstocode #p5js #codingart\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities.jpg.webp\" alt=\"Use this canvas drawing grid to plot the coordinates for your javascript drawing. #teachkidstocode #p5js #codingart\" class=\"wp-image-13552 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities.jpg.webp 816w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-232x300.jpg.webp 232w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-768x994.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-791x1024.jpg.webp 791w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities-735x951.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/canvas-drawing-grid-processing-javascript-activities.jpg\" id=\"mv-trellis-img-2\" data-trellis-processed=\"1\"><\/a><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Points &amp; Lines in JavaScript<\/strong><\/h2>\n\n\n\n<p>A point is the simplest of objects and includes only (x, y) parameters that indicate it&rsquo;s location. To plot your rectangles, you use the upper left point of your rectangle. <\/p>\n\n\n\n<p>Using your coordinate sheet to draw your rectangles is great practice for identifying the top corner point as well as the center point of your rectangles.&nbsp;<\/p>\n\n\n\n<p>The shortest distance between two points is a line. The line function is line(x1, y1, x2, y2) with the parameters identifying the coordinates of the first and second points. <\/p>\n\n\n\n<p>If you wanted to draw a line from (200, 200) to (300, 400), you would call the function: line(200, 200, 300, 400).&nbsp;<\/p>\n\n\n\n<p>You&rsquo;ll notice a function called strokeWeight() used in the following example. This function allows you to set the width of the stroke and is measure in pixels. <\/p>\n\n\n\n<p>It applies to every function called after it, so I&rsquo;ve used it twice to change the strokeWeight back to a thin line right above the line function.&nbsp;<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n\/\/change the\n\/\/parameters to move\n\/\/the points & line\n  strokeWeight(10);\n  point(300,300);\n  strokeWeight(1);\n  line(200,200,300,400);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Parameters<\/strong><\/h2>\n\n\n\n<p>The numbers that go into the parentheses are called parameters. Parameters are information passed to a function to customize it. <\/p>\n\n\n\n<p>In our program, we are calling the rect() function and passing it four parameters to change how the rectangles are drawn. <\/p>\n\n\n\n<p>The first two parameters control the position of the top left corner of the rectangle. The second two parameters control the size of the rectangle in pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Parameter X<\/strong><\/h3>\n\n\n\n<p>The first parameter is called parameter X. It determines the direction the rectangle goes across our canvas from the left side of the canvas. <\/p>\n\n\n\n<p>In this activity, parameter X starts with 0 and ends at 600 and moves left (with numbers closer to zero) and right (with numbers closer to 600). Adjust the first parameter and hit &ldquo;Play&rdquo;.<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n\/\/change the first\n\/\/parameter to move\n\/\/the rectangle left\n\/\/and right\n  rect(200,200,200,200);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Parameter X Grid Drawing<\/strong><\/h4>\n\n\n\n<p>Check out how this rectangle looks on a grid drawing! This rectangle is a square because its width and height parameters are the same. <\/p>\n\n\n\n<p>To tell a computer to draw this rectangle, we call: rect(200, 200, 200, 200).&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1649\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x.jpg\" alt=\"how to code a rectangle in JavaScript parameter x\" class=\"wp-image-13724\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-227x300.jpg 227w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-768x1013.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-776x1024.jpg 776w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-735x969.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-728x960.webp 728w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-819x1080.webp 819w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-910x1200.webp 910w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1649\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x.jpg.webp\" alt=\"how to code a rectangle in JavaScript parameter x\" class=\"wp-image-13724 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-227x300.jpg.webp 227w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-768x1013.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-776x1024.jpg.webp 776w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x-735x969.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JavaScript-parameter-x.jpg\" id=\"mv-trellis-img-3\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Parameter Y<\/strong><\/h3>\n\n\n\n<p>The second parameter is called parameter Y. It determines the direction the rectangle goes down the canvas. It starts at zero up in the top left corner and goes to 600 at the bottom of the canvas.<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n\/\/change the second\n\/\/parameter to move\n\/\/the rectangle up\n\/\/and down\n  rect(200,400,100,100);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Parameter Y Grid Drawing<\/strong><\/h4>\n\n\n\n<p>Check out how this rectangle looks on a grid drawing! The position of this rectangle is (300,400). <\/p>\n\n\n\n<p>Remember that the position of a rectangle is found by using the coordinates of the upper left corner. <\/p>\n\n\n\n<p>To tell a computer to draw this rectangle, we call: rect(200, 400, 100, 100).&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1690\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter.jpg\" alt=\"How to Code a Rectangle Y Parameter\" class=\"wp-image-13728\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-222x300.jpg 222w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-768x1038.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-757x1024.jpg 757w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-735x994.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-710x960.webp 710w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-799x1080.webp 799w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-888x1200.webp 888w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1690\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter.jpg.webp\" alt=\"How to Code a Rectangle Y Parameter\" class=\"wp-image-13728 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-222x300.jpg.webp 222w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-768x1038.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-757x1024.jpg.webp 757w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter-735x994.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Y-Parameter.jpg\" id=\"mv-trellis-img-4\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Width<\/strong><\/h3>\n\n\n\n<p>The third parameter is called width. This changes how wide or thin the rectangle is.<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n\/\/change the third\n\/\/parameter to make\n\/\/the rectangle\n\/\/wide or thin\n  rect(300,300,100,200);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Width Parameter Grid Drawing<\/strong><\/h4>\n\n\n\n<p>Check out how this rectangle looks on a grid drawing! <\/p>\n\n\n\n<p>The position of this rectangle is (300,300). This rectangle has a width of 100 pixels and a height of 200 pixels. <\/p>\n\n\n\n<p>To tell a computer to draw this rectangle, we call: rect(300, 300, 100, 200).&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1672\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter.jpg\" alt=\"How to Code a Rectangle Width Parameter\" class=\"wp-image-13727\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-224x300.jpg 224w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-768x1027.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-765x1024.jpg 765w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-735x983.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-718x960.webp 718w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-807x1080.webp 807w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-897x1200.webp 897w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-240x320.webp 240w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1672\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter.jpg.webp\" alt=\"How to Code a Rectangle Width Parameter\" class=\"wp-image-13727 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-224x300.jpg.webp 224w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-768x1027.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-765x1024.jpg.webp 765w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter-735x983.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Width-Parameter.jpg\" id=\"mv-trellis-img-5\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Height<\/strong><\/h3>\n\n\n\n<p>The fourth parameter is called height. This makes the rectangle taller and shorter.<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n\/\/change the fourth\n\/\/parameter to make\n\/\/the rectangle\n\/\/tall or short\n  rect(300,300,200,100);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Height Parameter Grid Drawing<\/strong><\/h4>\n\n\n\n<p>Check out how this rectangle looks on a grid drawing! The position of this rectangle is (300,300). <\/p>\n\n\n\n<p>This rectangle has a width of 200 pixels and a height of 100 pixels. <\/p>\n\n\n\n<p>To tell a computer to draw this rectangle, we call: rect(300, 300, 200, 100).&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1666\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter.jpg\" alt=\"How to Code a Rectangle Height Parameter\" class=\"wp-image-13723\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-225x300.jpg 225w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-768x1024.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-735x980.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-546x728.webp 546w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-720x960.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-810x1080.webp 810w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-900x1200.webp 900w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-240x320.webp 240w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-360x480.webp 360w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-540x720.webp 540w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1666\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter.jpg.webp\" alt=\"How to Code a Rectangle Height Parameter\" class=\"wp-image-13723 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-225x300.jpg.webp 225w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-768x1024.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter-735x980.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-Height-Parameter.jpg\" id=\"mv-trellis-img-6\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Importance of Command Order<\/strong><\/h2>\n\n\n\n<p>Change the parameters of the rectangles in the editor below to match the parameters you chose above. What happened? <\/p>\n\n\n\n<p>Adjust the parameters until you can see all of the rectangles. Did you notice how the <strong>order of your code matters to the placement of the rectangles<\/strong>?<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1741\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS.jpg\" alt=\"Rectangle Art How to Code a Rectangle in JS\" class=\"wp-image-13729\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-215x300.jpg 215w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-768x1070.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-735x1024.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-689x960.webp 689w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-775x1080.webp 775w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-862x1200.webp 862w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1741\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS.jpg.webp\" alt=\"Rectangle Art How to Code a Rectangle in JS\" class=\"wp-image-13729 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-215x300.jpg.webp 215w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-768x1070.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS-735x1024.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Rectangle-Art-How-to-Code-a-Rectangle-in-JS.jpg\" id=\"mv-trellis-img-7\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Commands run in order from the top to the bottom, so the order of your rectangles matter if you are trying to layer the shapes to make an image. <\/p>\n\n\n\n<p>Do you see how rect(350,350,50,200) is on top of the others in the canvas below? That is because it is the last command to run. Move those parameters to the first rect() function and see what happens.<\/p>\n\n\n\n<p>Change the order of your rectangles until you create a design that shows all rectangles. You can also play with our example below if you&rsquo;d like!<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n  rect(300,300,200,200);\n  rect(200,100,50,50);\n  rect(400,200,100,50);\n  rect(350,350,50,200);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Coding Rectangle Art<\/strong><\/h2>\n\n\n\n<p>Now that we know how to make rectangles, move them around the grid, and order them to create art. <\/p>\n\n\n\n<p>We decided to turn our rectangles into art by adding color. To add color in JavaScript, we use the fill() function. The input for fill() is a color in RGB decimal form.<\/p>\n\n\n\n<p>You can use the <a href=\"https:\/\/www.rapidtables.com\/web\/color\/RGB_Color.html\" target=\"_blank\" rel=\"noopener noreferrer\">RGB Color Codes Chart from Rapid Tables<\/a> to find more colors. You can also change the background color by adjusting the color in the background() command. Change 255 to 0 and see what happens!<\/p>\n\n\n\n<p>To add color to each rectangle, you must call the fill() function before every rectangle. Remember that order is important. See our example below for help.<\/p>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n}\nfunction draw() {\n  background(255);\n  fill(0,0,255);\n  rect(300,300,200,200);\n  fill(0,150,75);\n  rect(200,100,50,50);\n  fill(255,90,0);\n  rect(400,200,100,50);\n  fill(255,0,0);\n  rect(350,350,50,200);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1630\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art.jpg\" alt=\"How to Code a Rectangle in JS art\" class=\"wp-image-13725\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-230x300.jpg 230w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-768x1002.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-785x1024.jpg 785w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-735x958.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-736x960.webp 736w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-828x1080.webp 828w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-920x1200.webp 920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1630\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art.jpg.webp\" alt=\"How to Code a Rectangle in JS art\" class=\"wp-image-13725 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-230x300.jpg.webp 230w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-768x1002.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-785x1024.jpg.webp 785w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art-735x958.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/How-to-Code-a-Rectangle-in-JS-art.jpg\" id=\"mv-trellis-img-8\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Using the Center of a Rectangle<\/strong><\/h2>\n\n\n\n<p>Another way to draw a rectangle is by using the center point, along with width and height. To use this method, you need to add the <strong>CENTER<\/strong> mode before the instruction for the rectangle itself. <\/p>\n\n\n\n<p>p5 is case-sensitive, so make sure to use all caps when using rectMode(CENTER). <\/p>\n\n\n\n<p>Then, use the center point to determine the width and height. For example, a width of 200 pixels would be 100 pixels from each side of the center point.<\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1610\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint.jpg\" alt=\"how to code a rectangle in JS centerpoint\" class=\"wp-image-13726\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint.jpg 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-233x300.jpg 233w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-768x989.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-795x1024.jpg 795w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-735x947.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-745x960.webp 745w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-839x1080.webp 839w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-932x1200.webp 932w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1250\" height=\"1610\" data-pin-nopin=\"true\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint.jpg.webp\" alt=\"how to code a rectangle in JS centerpoint\" class=\"wp-image-13726 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint.jpg.webp 1250w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-233x300.jpg.webp 233w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-768x989.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-795x1024.jpg.webp 795w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint-735x947.jpg.webp 735w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/how-to-code-a-rectangle-in-JS-centerpoint.jpg\" id=\"mv-trellis-img-9\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><script type=\"text\/p5\" data-autoplay=\"\" data-preview-width=\"440\" data-height=\"600\">\nfunction setup() {\n  createCanvas(600, 600);\n  rectMode(CENTER);\n}\nfunction draw() {\n  background(255);\n  fill(0,0,255);\n  rect(300,300,200,200);\n  fill(0,150,75);\n  rect(200,100,50,50);\n  fill(255,90,0);\n  rect(400,200,100,50);\n  fill(255,0,0);\n  rect(350,350,50,200);\n}\n<\/script><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-very-light-gray-background-color has-background\"><strong>Tips to Remember<\/strong>:<br>1. Use one command per line.<br>2. Each function must end with a ; (this is a common mistake!)<br>3. <strong>Commands<\/strong> run in order from the top to bottom.<br>4. Order of <strong>parameters<\/strong> in commands matter.<br>5. Each parameter must be separated by a comma.<br>6. (0,0) is the top left corner of the grid, this is the <strong>origin<\/strong> of the grid.<br>7. All x and y parameters on the grid are positive.<br>8. The coordinates of a rectangle are determined by the location of the top left corner of the rectangle.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow\">\n<p><span style=\"font-size: 20px;\"><strong>PIN THIS IMAGE TO SAVE THIS JAVASCRIPT CODING LESSON FOR KIDS<\/strong><\/span><\/p>\n\n\n\n<div class=\"wp-block-image essb-block-image\"><figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1500\" height=\"2250\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg\" alt=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" class=\"wp-image-13733\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg 1500w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-200x300.jpg 200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-683x1024.jpg 683w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-768x1152.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1024x1536.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1365x2048.jpg 1365w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-735x1103.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-223x335.jpg 223w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-231x347.jpg 231w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-347x520.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-427x640.jpg 427w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-512x768.jpg 512w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-640x960.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-720x1080.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-150x225.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-800x1200.webp 800w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1500\" height=\"2250\" data-pin-description=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg.webp\" alt=\"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! #teachkidstocode #p5js #codingart #homeschool #codinglesson #CSforkids\" class=\"wp-image-13733 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg.webp 1500w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-200x300.jpg.webp 200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-683x1024.jpg.webp 683w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-768x1152.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1024x1536.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1365x2048.jpg.webp 1365w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-223x335.jpg.webp 223w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-231x347.jpg.webp 231w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-347x520.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-427x640.jpg.webp 427w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-512x768.jpg.webp 512w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-640x960.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-720x1080.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-150x225.jpg.webp 150w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg\" id=\"mv-trellis-img-10\" data-trellis-processed=\"1\"><\/figure><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-mv-list\">\t<section id=\"mv-creation-56\" class=\"mv-create-card mv-create-card-56 mv-list-card mv-create-card-style-numbered mv-no-js mv-create-center-cards mv-create-has-image \" style=\"position: relative;\">\n\t\t\n\t\t<div class=\"mv-create-wrapper\">\n\n\t\t\t\n\t\t\t<header class=\"mv-create-header\">\n\t\t\t\t<div class=\"mv-create-title-wrap\">\n\n\t\n\t\t\t<h2 class=\"mv-create-title mv-create-title-primary\">Tech Art Activities for Kids<\/h2>\n\t<\/div>\n\t\t<div class=\"mv-create-description\">\n\t\t\t<p>Find more tech + art activities for kids! <\/p>\n\t\t<\/div>\n\t\t\t\t<\/header>\n\n\t\t\t<div class=\"mv-list-list mv-list-list-numbered\">\n\t\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-13167\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/color-code-mosaic-pi-cityscape\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t1\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Check%20out%20this%20Pi%20Day%20color%20coding%20mosaic%20pi%20skyline%20activity%20that%20works%20on%20basic%20computer%20programming%20skills%20while%20introducing%20Pi%21\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2019%2F02%2FBH-FB-Mosaic-Pi-Cityscape-color-coding-activity-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fcolor-code-mosaic-pi-cityscape%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/color-code-mosaic-pi-cityscape\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/BH-FB-Mosaic-Pi-Cityscape-color-coding-activity.jpg\" id=\"mv-trellis-img-11\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/color-code-mosaic-pi-cityscape\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tPi Skyline: Math + Art + Tech STEAM Activity\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Check out this Pi Day color coding mosaic pi skyline activity that works on basic computer programming skills while introducing Pi!<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/color-code-mosaic-pi-cityscape\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-13545\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t2\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Learn%20how%20to%20code%20a%20circle%20with%20JavaScript%20and%20ProcessingJS%2C%20and%20then%20try%20it%20yourself%20in%20the%20editor%20boxes.\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fbh-fb-code-your-art-circles-free-coding-activity-for-kids-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fhow-to-code-a-circle-with-javascript%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-code-your-art-circles-free-coding-activity-for-kids.jpg\" id=\"mv-trellis-img-12\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tHow to Code a Circle with JavaScript\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Learn how to code a circle with JavaScript and ProcessingJS, and then try it yourself in the editor boxes.<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/how-to-code-a-circle-with-javascript\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-17290\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/make-digital-mondrian-art-in-google-sheets\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t3\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Make%20Digital%20Mondrian%20art%20using%20Google%20Sheets%20with%20this%20Math%20%2B%20Art%20%2B%20Tech%20activity%20perfect%20for%20upper%20elementary%20students%21\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2021%2F03%2Fbh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fmake-digital-mondrian-art-in-google-sheets%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/make-digital-mondrian-art-in-google-sheets\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/03\/bh-fb-digital-mondrian-art-using-google-sheets-free-mondrian-math-worksheet.jpg\" id=\"mv-trellis-img-13\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/make-digital-mondrian-art-in-google-sheets\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tMake Digital Mondrian Art in Google Sheets\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Make Digital Mondrian art using Google Sheets with this Math + Art + Tech activity perfect for upper elementary students!<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/make-digital-mondrian-art-in-google-sheets\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"mv-list-adwrap\"><div class=\"mv_slot_target\" data-slot=\"content\"><\/div><\/div>\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-13132\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/pi-necklace-coding-activity\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t4\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"This%20Pi%20Necklace%20coding%20activity%20is%20the%20perfect%20combination%20of%20math%2C%20binary%2C%20and%20hexadecimal%20coding%20for%20upper%20elementary%20and%20middle%20school.%C2%A0\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2019%2F02%2Fbh-fb-pi-necklace-coding-hexadecimal-binary-coding-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fpi-necklace-coding-activity%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/pi-necklace-coding-activity\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/02\/bh-fb-pi-necklace-coding-hexadecimal-binary-coding.jpg\" id=\"mv-trellis-img-14\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/pi-necklace-coding-activity\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tPi Necklace Coding Unplugged Coding Activity\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>This Pi Necklace coding activity is the perfect combination of math, binary, and hexadecimal coding for upper elementary and middle school.&nbsp;<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/pi-necklace-coding-activity\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-13741\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/coding-fibonacci-rectangles-javascript\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t5\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Learn%20how%20to%20code%20Fibonacci%20rectangles%20with%20JavaScript%20and%20ProcessingJS%2C%20and%20then%20try%20it%20yourself%20in%20the%20editor%20boxes.\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fbh-fb-coding-fibonacci-rectangles-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fcoding-fibonacci-rectangles-javascript%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/coding-fibonacci-rectangles-javascript\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/bh-fb-coding-fibonacci-rectangles.jpg\" id=\"mv-trellis-img-15\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/coding-fibonacci-rectangles-javascript\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tCode Fibonacci Rectangles in JavaScript\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Learn how to code Fibonacci rectangles with JavaScript and ProcessingJS, and then try it yourself in the editor boxes.<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/coding-fibonacci-rectangles-javascript\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-15973\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/how-to-code-a-lion-unplugged-coding-activity\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t6\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Can%20you%20follow%20the%20algorithm%20and%20draw%20a%20lion%20in%20this%20directed%20drawing%20unplugged%20coding%20%2B%20art%20activity%3F\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2020%2F09%2FFI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fhow-to-code-a-lion-unplugged-coding-activity%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/how-to-code-a-lion-unplugged-coding-activity\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2020\/09\/FI-BH-How-to-Code-a-lion-algorithm-art-unplugged-coding-activity.jpg\" id=\"mv-trellis-img-16\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/how-to-code-a-lion-unplugged-coding-activity\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tHow to Code a Lion Directed Drawing Algorithm Art\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Can you follow the algorithm and draw a lion in this directed drawing unplugged coding + art activity?<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/how-to-code-a-lion-unplugged-coding-activity\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"mv-list-adwrap\"><div class=\"mv_slot_target\" data-slot=\"content\"><\/div><\/div>\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-10148\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/coding-your-artwork\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t7\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Introduce%20algorithms%20with%20this%20hands-on%20unplugged%20coding%20activity%20for%20kids%21\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2018%2F10%2Fbh-fb-get-started-with-algorithms-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Fcoding-your-artwork%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/coding-your-artwork\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2018\/10\/bh-fb-get-started-with-algorithms.jpg\" id=\"mv-trellis-img-17\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/coding-your-artwork\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tBitmap Coding Unplugged Coding Activity for Kids\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Introduce algorithms with this hands-on unplugged coding activity for kids!<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/coding-your-artwork\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"mv-art-link mv-list-single mv-list-single-16978\" data-mv-create-link-target=\"false\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/first-100-digits-of-pi-color-wheel\/\" data-mv-create-list-content-type=\"post\">\n\t\t\t\t<div class=\"mv-list-item-number\">\n\t\t\t\t\t<div class=\"mv-list-item-number-inner\" data-derive-font-from=\"h1\">\n\t\t\t\t\t\t8\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-pinterest-btn mv-pinterest-btn-left\" data-mv-pinterest-desc=\"Learn%20the%20first%20100%20digits%20of%20Pi%20with%20this%20color%20wheel%20activity%20that%20helps%20kids%20to%20visualize%20numbers%20of%20Pi%20in%20the%20first%20100%20digits%20and%20learn%20about%20color%20wheels%21\" data-mv-pinterest-img-src=\"https%3A%2F%2Fourfamilycode.com%2Fwp-content%2Fuploads%2F2021%2F02%2Fbh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-735x413.jpg\" data-mv-pinterest-url=\"https%3A%2F%2Fourfamilycode.com%2Ffirst-100-digits-of-pi-color-wheel%2F\"><\/div>\n\t\t\t\t<div class=\"mv-list-img-container\">\n\t\t\t\t\t<div data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/first-100-digits-of-pi-color-wheel\/\">\n\t\t\t\t\t\t<noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-735x413.jpg\" class=\"mv-list-single-img no_pin ggnoads\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-735x413.jpg 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-300x169.jpg 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1024x576.jpg 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-768x432.jpg 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1536x864.jpg 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-480x270.jpg 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-720x405.jpg 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-320x180.jpg 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-335x188.jpg 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-347x195.jpg 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-520x293.jpg 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-640x360.jpg 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-960x540.jpg 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1080x608.jpg 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-150x84.jpg 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1200x675.webp 1200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art.jpg 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art.jpg\"><\/noscript><img aria-hidden=\"true\" width=\"735\" height=\"413\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-735x413.jpg.webp\" class=\"mv-list-single-img no_pin ggnoads lazyload\" alt=\"\" loading=\"lazy\" data-pin-nopin=\"true\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-735x413.jpg.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-300x169.jpg.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1024x576.jpg.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-768x432.jpg.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1536x864.jpg.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-480x270.jpg.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-720x405.jpg.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-320x180.jpg.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-335x188.jpg.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-347x195.jpg.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-520x293.jpg.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-640x360.jpg.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-960x540.jpg.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-1080x608.jpg.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art-150x84.jpg.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art.jpg.webp 1920w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/02\/bh-fb-rgb-color-wheel-activity-first-100-digits-of-Pi-math-tech-art.jpg\" id=\"mv-trellis-img-18\" data-trellis-processed=\"1\">\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"mv-list-item-container\">\n\t\t\t\t\t<h3 class=\"mv-list-single-title\">\n\t\t\t\t\t\t<a class=\"mv-list-title-link\" href=\"https:\/\/ourfamilycode.com\/first-100-digits-of-pi-color-wheel\/\" rel=\"noopener\">\n\t\t\t\t\t\t\tFirst 100 Digits of Pi Color Wheel Activity\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-meta\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mv-list-single-description\"><p>Learn the first 100 digits of Pi with this color wheel activity that helps kids to visualize numbers of Pi in the first 100 digits and learn about color wheels!<\/p>\n<\/div>\n\t\t\t\t\t<button class=\"mv-list-link mv-to-btn\" data-mv-create-link-href=\"https:\/\/ourfamilycode.com\/first-100-digits-of-pi-color-wheel\/\" rel=\"noopener\">\n\t\t\t\t\t\tContinue Reading\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<footer class=\"mv-create-footer\">\n\t\t\t\t\t<\/footer>\n\n\t\t\n\t<\/section>\n\n\t<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"has-x-large-font-size wp-block-heading\" style=\"font-style:normal;font-weight:700\"><strong>Meet Toni, the Maker Mom behind Our Family Code<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-5\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow\" style=\"flex-basis:40%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-mv_trellis_3x4\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"546\" height=\"728\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-546x728.webp\" alt=\"A picture of Toni, the author, wearing a green tie dyed shirt.\" class=\"wp-image-20422\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-546x728.webp 546w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-225x300.webp 225w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-720x960.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-360x480.webp 360w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-240x320.webp 240w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update.webp 750w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update.webp\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"546\" height=\"728\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-546x728.webp\" alt=\"A picture of Toni, the author, wearing a green tie dyed shirt.\" class=\"wp-image-20422 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-546x728.webp 546w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-225x300.webp 225w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-720x960.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-360x480.webp 360w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update-240x320.webp 240w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update.webp 750w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2023\/02\/toni-author-update.webp\" data-mvt-skip=\"src\" id=\"mv-trellis-img-19\" data-trellis-processed=\"1\"><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow\" style=\"flex-basis:60%\">\n<p class=\"has-small-font-size has-medium-font-size\"><strong>Hey there<\/strong>, I&rsquo;m Toni! I&rsquo;m a software engineer and Maker Mom that finds my joy in unleashing my children&rsquo;s curiosity by exploring STEAM concepts with my fantastic five! <\/p>\n\n\n\n<p class=\"has-small-font-size has-medium-font-size\">When I&rsquo;m not chasing toddlers or raising tweens, you can find me tearing things up and putting them back together over here at&nbsp;<a href=\"https:\/\/ourfamilycode.com\/about\/\">Our Family Code<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size\">I am the owner and content creator of multiple educational websites designed to increase access to STEAM &amp; STEM education with a focus on teaching computer science and coding to kids of all ages!<\/p>\n\n\n\n<p class=\"has-medium-font-size\">You can also find out more about me by visiting&nbsp;<a href=\"https:\/\/tonigardner.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">ToniGardner.com<\/a>!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-10\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/steamkidactivities.com\/\" target=\"_blank\" rel=\"noopener\"><noscript><img decoding=\"async\" loading=\"lazy\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo.png\" alt=\"STEAM KID Activities logo\" class=\"wp-image-20232\" width=\"205\" height=\"115\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo.png 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-300x169.png 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1024x576.png 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-768x432.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1536x864.png 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-480x270.png 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-720x405.png 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-320x180.png 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-735x413.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-335x188.png 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-347x195.png 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-520x293.png 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-640x360.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-960x540.png 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1080x608.png 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-150x84.png 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1200x675.png 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo.png.webp\" alt=\"STEAM KID Activities logo\" class=\"wp-image-20232 lazyload\" width=\"205\" height=\"115\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo.png.webp 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-300x169.png.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1024x576.png.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-768x432.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1536x864.png.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-480x270.png.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-720x405.png.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-320x180.png.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-735x413.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-335x188.png.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-347x195.png.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-520x293.png.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-640x360.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-960x540.png.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1080x608.png.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-150x84.png.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo-1200x675.png.webp 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/STEAM-KID-Activities-logo.png\" id=\"mv-trellis-img-20\" data-trellis-processed=\"1\"><\/a><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/brandicionado.com\/\" target=\"_blank\" rel=\"noopener\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo.png\" alt=\"A picture of the logo for Brandicionado.com.\" class=\"wp-image-20233\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo.png 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-300x169.png 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1024x576.png 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-768x432.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1536x864.png 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-480x270.png 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-720x405.png 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-320x180.png 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-735x413.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-335x188.png 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-347x195.png 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-520x293.png 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-640x360.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-960x540.png 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1080x608.png 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-150x84.png 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1200x675.png 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo.png.webp\" alt=\"A picture of the logo for Brandicionado.com.\" class=\"wp-image-20233 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo.png.webp 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-300x169.png.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1024x576.png.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-768x432.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1536x864.png.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-480x270.png.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-720x405.png.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-320x180.png.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-735x413.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-335x188.png.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-347x195.png.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-520x293.png.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-640x360.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-960x540.png.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1080x608.png.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-150x84.png.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo-1200x675.png.webp 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/brandicionado-logo.png\" id=\"mv-trellis-img-21\" data-trellis-processed=\"1\"><\/a><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/rockthesteamteam.org\/\" target=\"_blank\" rel=\"noopener\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1593\" height=\"829\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo.png\" alt=\"A picture of the logo for RocktheSteamteam.org\" class=\"wp-image-20235\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo.png 1593w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-300x156.png 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1024x533.png 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-768x400.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1536x799.png 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-735x382.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-335x174.png 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-347x181.png 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-520x271.png 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-640x333.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-960x500.png 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1080x562.png 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-150x78.png 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1200x624.png 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1593\" height=\"829\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo.png.webp\" alt=\"A picture of the logo for RocktheSteamteam.org\" class=\"wp-image-20235 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo.png.webp 1593w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-300x156.png.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1024x533.png.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-768x400.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1536x799.png.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-735x382.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-335x174.png.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-347x181.png.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-520x271.png.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-640x333.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-960x500.png.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1080x562.png.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-150x78.png.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo-1200x624.png.webp 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/Rock-the-STEAM-TEAM-logo.png\" id=\"mv-trellis-img-22\" data-trellis-processed=\"1\"><\/a><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo.png\" alt=\"A picture of the logo for GetMovingMama.com\" class=\"wp-image-20234\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo.png 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-300x169.png 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1024x576.png 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-768x432.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1536x864.png 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-480x270.png 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-720x405.png 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-320x180.png 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-735x413.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-335x188.png 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-347x195.png 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-520x293.png 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-640x360.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-960x540.png 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1080x608.png 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-150x84.png 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1200x675.png 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo.png.webp\" alt=\"A picture of the logo for GetMovingMama.com\" class=\"wp-image-20234 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo.png.webp 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-300x169.png.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1024x576.png.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-768x432.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1536x864.png.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-480x270.png.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-720x405.png.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-320x180.png.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-735x413.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-335x188.png.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-347x195.png.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-520x293.png.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-640x360.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-960x540.png.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1080x608.png.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-150x84.png.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo-1200x675.png.webp 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/gmm-black-logo.png\" id=\"mv-trellis-img-23\" data-trellis-processed=\"1\"><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/ourfamilycode.com\/\"><noscript><img decoding=\"async\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/05\/Horizontal-OFC-Logo-ggnoads.svg\" alt=\"our family code horizontal logo\" class=\"wp-image-17801\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/05\/Horizontal-OFC-Logo-ggnoads.svg\"><\/noscript><img decoding=\"async\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/05\/Horizontal-OFC-Logo-ggnoads.svg\" alt=\"our family code horizontal logo\" class=\"wp-image-17801 lazyload\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2021\/05\/Horizontal-OFC-Logo-ggnoads.svg\" data-mvt-skip=\"src\" width=\"300\" height=\"300\" id=\"mv-trellis-img-24\" loading=\"lazy\" data-trellis-processed=\"1\"><\/a><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/thiskidcanbake.com\/\" target=\"_blank\" rel=\"noopener\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"1000\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo.png\" alt=\"A picture of the logo for ThisKidCanBake.com\" class=\"wp-image-20236\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo.png 1000w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-300x300.png 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-705x705.png 705w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-768x768.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-720x720.png 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-480x480.png 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-320x320.png 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-200x200.png 200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-735x735.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-335x335.png 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-347x347.png 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-520x520.png 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-640x640.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-960x960.png 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-96x96.png 96w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-150x150.png 150w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"1000\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo.png.webp\" alt=\"A picture of the logo for ThisKidCanBake.com\" class=\"wp-image-20236 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo.png.webp 1000w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-300x300.png.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-705x705.png.webp 705w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-768x768.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-720x720.png.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-480x480.png.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-320x320.png.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-200x200.png.webp 200w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-735x735.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-335x335.png.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-347x347.png.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-520x520.png.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-640x640.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-960x960.png.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-96x96.png.webp 96w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo-150x150.png.webp 150w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/this-kid-can-bake-cake-stand-logo.png\" id=\"mv-trellis-img-25\" data-trellis-processed=\"1\"><\/a><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/tonigardner.com\/\" target=\"_blank\" rel=\"noopener\"><noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo.png\" alt=\"A picture of the logo for tonigardner.com\" class=\"wp-image-20237\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo.png 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-300x169.png 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1024x576.png 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-768x432.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1536x864.png 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-480x270.png 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-720x405.png 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-320x180.png 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-735x413.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-335x188.png 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-347x195.png 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-520x293.png 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-640x360.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-960x540.png 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1080x608.png 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-150x84.png 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1200x675.png 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo.png.webp\" alt=\"A picture of the logo for tonigardner.com\" class=\"wp-image-20237 lazyload\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo.png.webp 1920w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-300x169.png.webp 300w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1024x576.png.webp 1024w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-768x432.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1536x864.png.webp 1536w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-480x270.png.webp 480w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-720x405.png.webp 720w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-320x180.png.webp 320w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-735x413.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-335x188.png.webp 335w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-347x195.png.webp 347w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-520x293.png.webp 520w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-640x360.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-960x540.png.webp 960w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1080x608.png.webp 1080w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-150x84.png.webp 150w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo-1200x675.png.webp 1200w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/toni-gardner-logo.png\" id=\"mv-trellis-img-26\" data-trellis-processed=\"1\"><\/a><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/lodeofcode.com\/\" target=\"_blank\" rel=\"noopener\"><noscript><img decoding=\"async\" loading=\"lazy\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited.png\" alt=\"A picture of the logo for lodeofcode.com\" class=\"wp-image-20239\" width=\"116\" height=\"154\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited.png 810w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-226x300.png 226w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-771x1024.png 771w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-768x1020.png 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-540x720.png 540w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-360x480.png 360w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-240x320.png 240w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-735x976.png 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-252x335.png 252w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-261x347.png 261w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-391x520.png 391w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-482x640.png 482w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-578x768.png 578w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-723x960.png 723w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-640x853.png 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-150x199.png 150w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited.png\"><\/noscript><img decoding=\"async\" loading=\"lazy\" data-pin-nopin=\"true\" src=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited.png.webp\" alt=\"A picture of the logo for lodeofcode.com\" class=\"wp-image-20239 lazyload\" width=\"116\" height=\"154\" srcset=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited.png.webp 810w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-226x300.png.webp 226w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-771x1024.png.webp 771w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-768x1020.png.webp 768w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-540x720.png.webp 540w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-360x480.png.webp 360w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-240x320.png.webp 240w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-735x976.png.webp 735w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-252x335.png.webp 252w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-261x347.png.webp 261w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-391x520.png.webp 391w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-482x640.png.webp 482w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-578x768.png.webp 578w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-723x960.png.webp 723w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-640x853.png.webp 640w, https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited-150x199.png.webp 150w\" sizes=\"(max-width: 760px) calc(100vw - 96px), 720px\" title=\"\" data-pin-media=\"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2022\/07\/lode-of-code-vertical-logo-edited.png\" id=\"mv-trellis-img-27\" data-trellis-processed=\"1\"><\/a><\/figure><\/div><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity! <\/p>\n","protected":false},"author":2,"featured_media":13732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","disable-in-feed":false,"article-schema-type":"","disable-critical-css":false},"categories":[928,788,457,786],"tags":[975,828,947,834,885],"uagb_featured_image_src":{"full":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg",1200,1200,false],"thumbnail":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-705x705.webp",705,705,true],"medium":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-300x300.webp",300,300,true],"medium_large":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-768x768.jpg",768,768,true],"large":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1024x1024.webp",1024,1024,true],"2048x2048":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript.jpg",1200,1200,false],"post-thumbnail":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-728x728.webp",728,728,true],"mv_trellis_1x1":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-728x728.webp",728,728,true],"mv_trellis_1x1_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-728x728.webp",728,728,true],"mv_trellis_1x1_med_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-480x480.webp",480,480,true],"mv_trellis_1x1_med_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-320x320.webp",320,320,true],"mv_trellis_1x1_low_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-200x200.webp",200,200,true],"mv_trellis_3x4":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-546x728.webp",546,728,true],"mv_trellis_4x3":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-728x546.webp",728,546,true],"mv_trellis_16x9":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-728x410.webp",728,410,true],"mv_trellis_srcset-960":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-960x960.webp",960,960,true],"mv_trellis_srcset-1080":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1080x1080.webp",1080,1080,true],"1200x1200":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-1200x1200.webp",1200,1200,true],"mv_create_1x1":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-200x200.webp",200,200,true],"mv_create_1x1_medium_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-320x320.webp",320,320,true],"mv_create_1x1_medium_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-480x480.webp",480,480,true],"mv_create_1x1_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-720x720.webp",720,720,true],"mv_create_4x3":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-320x240.webp",320,240,true],"mv_create_4x3_medium_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-480x360.webp",480,360,true],"mv_create_4x3_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-720x540.webp",720,540,true],"mv_create_3x4":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-240x320.webp",240,320,true],"mv_create_3x4_medium_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-360x480.webp",360,480,true],"mv_create_3x4_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-540x720.webp",540,720,true],"mv_create_16x9":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-320x180.webp",320,180,true],"mv_create_16x9_medium_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-480x270.webp",480,270,true],"mv_create_16x9_high_res":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-720x405.webp",720,405,true],"mv_create_no_ratio":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-735x735.webp",735,735,true],"mv_create_vert":["https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-735x735.webp",735,735,true]},"uagb_author_info":{"display_name":"Toni","author_link":"https:\/\/ourfamilycode.com\/author\/toni\/"},"uagb_comment_info":0,"uagb_excerpt":"Teach your kids to code a rectangle in JavaScript with this hands-on, interactive coding activity!","mv":{"thumbnail_id":13732,"thumbnail_uri":"https:\/\/ourfamilycode.com\/wp-content\/uploads\/2019\/03\/FI-Teach-Your-Kids-How-to-Code-a-Rectangle-JavaScript-300x300.webp"},"_links":{"self":[{"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/posts\/13702"}],"collection":[{"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/comments?post=13702"}],"version-history":[{"count":0,"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/posts\/13702\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/media\/13732"}],"wp:attachment":[{"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/media?parent=13702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/categories?post=13702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ourfamilycode.com\/wp-json\/wp\/v2\/tags?post=13702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}