We release activities weekly on Mondays — some online, some offline, of varying levels of difficulty. Each activity features a woman in tech who pioneered innovative technology.
Part 5 of our Summer Series – you made it to the final lesson in our Summer series! At this point your website is looking great with the CSS you added in the last activity! For this part of the series, we will explore responsive design. In this lesson, you will learn how to make sure your website looks great on different screen sizes like laptop, tablet, and mobile devices.
Part 4 of our Summer Series is all about CSS! Now that you have some HTML written for your website, it’s time to beautify it with some CSS, or Cascading Style Sheets! CSS, describes what kinds of presentation rules – or styles – should be applied to HTML elements. For example, if you wanted to make the text larger or smaller you would do that using CSS. CSS allows you to change the way content on your website looks, including text color, text size, the fonts used, background colors or images, and so much more. There are so many different ways you can style your website but in this tutorial, we will show you how to style the text, images, navigation bar, and take action checklist.
Part 3 of our Summer Series, is an introduction to HTML. You created a wireframe and mockup for your website. Now it’s time to take those ideas to the screen. In this activity, we will explore the basics of HTML and its role in building a static web page. HTML, which stands for Hypertext Markup Language, helps to organize and categorize content on a website. By content, we mean things like text, images, videos, etc. We will walk you through building a sample project for the remaining activities. You can follow along with our design and customize components like fonts and images or you can create an entirely new design.
At the end of Part 1, you synthesized your experience, ideas, and research about your cause into a message and call to action. Now it’s time to start planning the visual design of your website using two new tools: a wireframe and a mockup. You will use the wireframe to brainstorm and choose a layout. Once you have selected your layout, you will use a mockup to choose your design elements, things like the color palette, fonts, images, text, and more. Both of these will serve as roadmaps for you once you start building the website in Part 3.
Since its inception, activists have been using the web to organize around causes they care about and share ways that people can connect and take action. This summer we are building an activist toolkit! In this project, you will learn the basics of project planning, HTML, and CSS to build a website around a cause that is important to you. In Part 1 of this project, you will analyze advocacy websites, identify and research a cause you care about, brainstorm the message you want to share about that cause, and create an action item list for your audience to get involved.
Have you ever wanted to make your own website to store your memories? Are you looking for a way to create a digital yearbook for you and your friends? If so, this activity is for you! Digital media like photos, audio, and video are important ways of remembering the people, events, and places that we love. In this activity, we will be mainly coding in HTML and CSS to build and design your digital memory book.
In this Code at Home activity, you’re going to learn how to build a website wireframe. A wireframe is a high-level plan for your website. Like a blueprint! It will act as a guide when you begin programming.
In this activity, you will start thinking like an entrepreneur! Our CEO Reshma always says “If you teach a girl to code, she will change the world.” Oftentimes that starts with a spark of an idea that unlocks the “big idea.” This activity could be the spark! You will invent and pitch a product using just a noun and adjective.
In this activity, we’re giving you the materials for a Virtual Game Night! What’s the name of the game? “This or That.” It’s one of our favorites—and can be played many ways unplugged, or using one of your favorite drawing apps like Google Drawing or Sketch.io.
In this activity, you will read the second chapter of the Friendship Code, Coding Club’s First Activity. After reading the chapter you can reflect and discuss what you read with a friend or family member before diving into the Chapter Challenge (with a plugged and unplugged option)!
In this activity, we will dive deeper into what it means to be brave, not perfect when coding! Just because a program may not work as expected doesn’t mean that it is a failure. There are many skills that we can learn and apply to fix mistakes and improve our products or projects. Debugging is a strategy that computer scientists use to find and fix problems, or bugs, in their program. In this activity, you will help to debug, or fix, three programs in Scratch!
In this activity you will read the first chapter of the Friendship Code, Lucy Goes to Coding Club. After reading the chapter you can reflect and discuss what you read with a friend or family member before diving into the Chapter Challenge (with a plugged and unplugged option)!
In honor of Earth Day, we encourage you to explore and celebrate some of your favorite places in the outdoors. Where would you like to go and what would you want to do and see on your outdoor adventure? In this tutorial, learn how to use JavaScript to create a virtual hike, so you and your friends can visit a national park, explore a state park, or even travel to a different country! The possibilities are endless!
We love games! Not only are games a great way of connecting with other people, but they are also a chance to be playful and adaptive in the face of a challenge. In this unplugged game, you will create algorithms – or instruction sets – by telling a player how to recreate a drawing you made. In a program, algorithms are how we communicate to the computer what we want it to do. Once you’ve played a few rounds, we’ll show you how to mod the game to make it your own!
In this activity, you will be exploring basic computer science concepts in Python while learning how to help your community by creating a chatbot, or an automated help system! You have probably interacted with a chatbot before, maybe without even realizing it. Some common chatbots include: Apple’s Siri, Amazon’s Alexa, Google Assistant, Lyft’s help-bot, and most recently the World Health Organization has built one for COVID-19 facts.
A computer scientist works to write code, or instructions, for a computer to do a task. It may be surprising to know that most programmers, or people who write code, actually spend most of their time debugging, or fixing problems, in their code! In this activity, you will get a chance to debug code that is supposed to move a character through a maze. You will also get a chance to write your own code and challenge a friend to debug it!
It’s important to remain positive and keep our spirits lifted during times of stress and uncertainty. Through this unplugged activity, girls will be able to create bracelets that share positive and uplifting messages by using binary code!
One of the ways people lift each other up is through storytelling. Learn to program a digital story with Scratch to share an uplifting tale, a funny story, or important information to help people during challenging times.
During uncertain times, it’s important to take a break to focus on and share something that brings you joy! Learn how to use HTML and CSS to build a tutorial that teaches someone how to do something. How to make a TikTok, how to draw a cat, how to make your favorite cookies, how to land a perfect water bottle flip – no skill is too small!
