Suggestions to Make the Most of the Day
These workshop materials are divided into the following sections: Content, HTML, Design, and CSS. Each of these four sections contain teaching videos, exercises, and additional resources. A helpful sample site about NASA and some amazing women in space acts as a starting point to translate these ideas into something tangible for attendees.
It is recommended that you play the videos—start with the intro—and follow along with the video exercises. For your convenience—and easy reference—we’ve included the accompanying resources and slides referenced in each training video all in the same section. We suggest allowing six hours for the workshop, with a break for lunch and Q&A about web careers (or play our career videos).
If you have thoughts on how to improve these materials, want to share how you’ve used these resources, or would like an original keynote file to help you customize your day, we’d love to hear from you. In the end, we just want to help enable others to spread this knowledge as far as it can go—and we think you’ll know why at the end of your workshop day when you see young ladies ecstatic to shares their websites!
Introduction Video
Content
Slides: It All Starts With Content
Content is the first step to building a website. It is oh so important to know what you want to communicate—everything else on the page goes back to content.
Video: Gathering Content
A teacher from Sparkbox presents the first section of the day—the content slides—and teaches how to decide what your site should be about.
Resource: Glossary of Terms
We are learning a lot of new words about the web. This glossary will help you quickly identify what means what.
Create a Codepen Account
We are using CodePen to develop our content. Sign up for a free account.
HTML
Slides: HTML Is the Building Block
HTML is a computer language. There are many computer languages, just like there are many spoken languages. In this section, we will focus on HTML and teach the students basic HTML that they will use to build their website.
Video: Coding HTML
A teacher from Sparkbox presents the html slides and demos how to markup your words to build on the foundation of your website.
Resource: HTML Cheat Sheet
It takes time to put these new ideas into memory. This cheat sheet will help you build the site you want to build faster and learn along the way.
Resource: Glossary of Terms
We are learning a lot of new words about the web. This glossary will help you quickly identify what means what.
Design
Slides: Creating Visual Interest
Design enhances the content on a website. There are many components to design. This section walks through the most important basics, used to build any site.
Video: Visual Design
A teacher from Sparkbox presents the design slides and teaches how to start injecting more personality into your site.
Resource: Font Families
Fonts are a fun way to add more personality quickly. Here are a few you might consider using.
Resource: Named Colors
Looking for a color to use? Here are a few you can call by name.
Resource: Glossary of Terms
We are learning a lot of new words about the web. This glossary will help you quickly identify what means what.
Resource: Starter Templates
Browse the starter templates and choose one for your website.
CSS
Slides: Using CSS
Like HTML, CSS is another computer language. CSS can take your design to the next level.
Video: Coding CSS
A teacher from Sparkbox presents the CSS slides.
Resource: CSS Cheat Sheet
It takes time to put these new ideas into memory. This cheat sheet will help you build the site you want to build faster and learn along the way.
Resource: Font Families
Fonts are a fun way to add more personality quickly. Here are a few you might consider using.
Resource: Named Colors
Looking for a color to use? Here are a few you can call by name.
Resource: Glossary of Terms
We are learning a lot of new words about the web. This glossary will help you quickly identify what means what.