Google's Made With Code: How To Create A Simple, Fun Meme with HTML

In the Unites States, 74% of girls express interest in STEM (Science, Technology, Engineering and Math) during middle school but by high school, only .3% of girls plan to major in computer science. The data is staggering. According to Made With Code, encouragement from peers and adults is the most important contributor in deciding whether a girl majors in computer science or not.

Google launched Made With Code

"because even though increasingly more aspects in our lives are powered by technology, women aren’t represented in the companies, labs, research, creative arts, design, organizations, and boardrooms that make technology happen." -Made With Code

Made With Code has pretty impressive backers like MIT Media Lab, Mozilla, Shapeways, Sew Electric, Girl Scouts of The USA and Girls Inc. The grantees and supporters of Made With Code amount to over 15 different organizations. The website is well-designed has an extensive amount of fun projects that anyone can do.

Parents of girls mean well, but they don't always have the proper knowledge to help them adapt and learn new technologies. Many parents don't have a lot of extra time to devote to their own tech learning, so they don't know where to begin as far as helping their daughters explore these fields. Even though Made With Code is aimed at girls, I think it has enormous potential to teach parents, as well.

Instead of just telling you about the website, I decided to try out one of the projects on the Made With Code website to see how easy it is to use. I may not be an average parent because I taught myself HTML in the early 2000's when I first built websites, but I haven't actively been coding since then, so a lot has changed, obviously. Now I only know enough to get by as I only use a little HTML and Markdown language on the Steemit website.

Ok, so let's dive into the website and see what it has to offer as far as projects go. For all you parents out there, this is an easy and fun one to do with your kid. I chose to make a meme using HTML and I'll walk you through the steps so you can see how easy it is for you both to do.

Here's the completed meme that I made using HTML and the how-to section is right below it:

[Image Source: Leah Stephens via Mozilla]

STEP 1: On the main home page, click on the 'RESOURCES' button at the far right upper corner.

STEP 2: Click on 'SEE PROJECTS' under the PARTNER PROJECTS section.

[Image Source: Made With Code]

STEP 3: Click on 'LAUNCH' in the MAKE A MEME section.

[Image Source: Made With Code]

STEP 4: After the page loads, click on the 'REMIX' button.

STEP 5: Use the HTML editor on the left to change different aspects of the meme. To make the "INTERESTING ENGINEERING IS COOL!" meme, I typed in the words, changed the text and drop shadow color and size of the text. I also changed the background color to cyan. Start experimenting with the HTML code, and if it's not correct, it will change to a pink color to alert you that something is not right. This is a great way to become immediately familiar with HTML without spending a huge amount of time reading manuals.

[Image Source: Leah Stephens via Mozilla]

So, basically, within about 15 minutes, you can create your own meme using HTML. This is a very introductory HTML project that anyone can easily do. You can, of course, decide to use your own image instead of the one that's loaded as the default. As you or your child goes through the projects, mastering each level, there are other more advanced areas of the website to explore and do.

The Made With Code website's mission can be summed up in this one sentence:

"Girls start out with a love of science and technology, but lose it somewhere along the way. Let’s help encourage that passion." -Made With Code

Leah Stephens writes under the pseudonym, Stellabelle. She is an artist/researcher who writes books and you can connect with her here. 

SEE ALSO: Project Bloks: Google’s Open Platform to Change Coding Forever