SAO' Girls Who Code, projects, women in tech

Ready, Set, Dub-Dub

WWDC is an exciting time, even if this is your first year of a 3rd-5th grade coding club and completing your first app is still a few miles down the road. The breakout sessions, labs, and work groups might be beyond what we’re doing right now, but there will still be a lot of fun news and cool demos when the first virtual version of the conference kicks off.
To get into the Dub-Dub spirit, here’s a fun activity from one of my favorite tech+education gurus, the Tech Rabbi. (He’s also the author of Educated by Design, one of the books used by our Futures Lab for their Design Thinking class.)

He uses Adobe Spark Post in this tutorial, but there’s a link in the video notes to use KeyNote (or, I guess, Slides would also work.)

To get started, you’re going to screenshot the Memoji you create in the iOS Message app. You’re looking for the version with the MacBook. You can use a white background, but if you want to superimpose it over the group shot at the WWDD site, you’ll want to switch your iOS devise over to night mode.

Find the MacBook image, 3D-press to get a bigger view, and use Dark mode for a background that matches the WWDC banner

After that, it’s just a matter of collecting some images to use as laptop stickers (his recommendation of Clean PNG helps a lot, because you don’t have to worry about backgrounds) and then shrinking them down and placing them on the MacBook. You can then screenshot your image to use wherever you need a profile pic.

Collect your sticker images, size them down, and cover your lid with them. Hint: if you put them along the sides, a slight rotation outward looks more realistic.

And if you used a black background, then you can make a group photo by taking a screenshot of the image over at the WWDC Ready, Set, Code page.

I can’t talk about WWDC without reminding everyone that this year Apple has added a Student Swift Project Challenge. Hopefully a lot of the kids in the Futures Lab will get to submit something.

And, speaking of summer student opportunities, another reminder that the Girls Who Code Summer Immersion Program is going virtual this year. Open to all 9th-11th graders, this two-week program teaches girls the computer science skills they need to make an impact in their community while preparing for a career in tech. Participants will get exposure to tech jobs, and join a supportive sisterhood of girls in tech.

SAO' club updates, Girls Who Code, info for parents, lesson notes

GWC Code at Home

Have you been trying any of the weekly Coding at Home activities? I’ll admit, stay-at-home schooling has taken up a way bigger chunk of the day that we had expected when we started this new normal thing. This weekend we made a point of trying one of the longer projects, and I think it’s one that everyone can have some fun with.

Girls Who Code has made these projects available for everyone, so you don’t even need to log into your HQ.GirlsWhoCode account. Start out at the Coding at Home page, and scroll down until you see this:

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 like how to make a TikTok, how to draw a cat, how to make your favorite cookies (our project was making homemade granola), how to land a perfect water bottle flip – no skill is too small! 

Here’s a run-down of the project:

  • Brainstorm you project. Think of a skill that you want to share, and how you want to explain it. Maybe it’s just a list, maybe you need lots of pictures. Are there supplies needed? What kind of preparation do you need, both to explain the project and to follow the instructions?
  • Open a project in Glitch. Take a few minutes to read their getting started page. Then open a “new project,” select “Hello, Webpage,” and check out the README.md file. Glitch is a powerful tool for collaborative app development, but all you really need to know right now is that it lets you live-preview your work as you code. As you add HTML elements, they just show up in a preview window.
  • Intro to HTML. Just follow the steps in the GWC tutorial. Keep it simple. Play around by copy/pasting some text in the existing HTML tags, then changing the tags
  • Intro to CSS. Again, keep it simple. For a starter project, just play around with changing colors and maybe fonts. The project page shows links to W3Schools and Mozilla, but for this week I’d recommend just sticking with the examples on the GWC tutorial.

Here’s what we built this weekend: a recipe page for our award-winning homemade granola.

Like I just said, we kept it simple … very simple. On the HTML side, it’s just paragraphs and unordered lists, and the CSS only changes the background and font colors. The plan is to continue styling it over the next few weeks, add pictures to demonstrate the steps, and then move on to learning about page layouts.

If you want to give it a shot but need help getting started, then give us a shout on Teams. Look up Hope in the directory and we can go over some common stumbling blocks.

And, hey, if you don’t have time to try this yourself … well, then just enjoy the granola!