- Files:
- Contains the example images, JavaScript, CSS and HTML used during the workshop.
- Slides:
- Contains an example slide deck (PDF) used during the workshop.
- README:
- Notes on how the materials are used in the workshop.
- Resources:
- List of online resources for further learning.
The goal of these materials and notes is to give workshop instructors a framework for leading Code and Cupcakes workshop but not lock them into one particular way of teaching. We'll cover the general topics, learning goals and helpful tips for teaching, but instructors should feel free to incorporate their own ideas to provide dynamic experiences for the workshop attendees.
Take time at the start of the workshop to introduce attendees to the venue, the instructor and all the teaching assistants, as well as make sure attendees have comfortable work space, functioning computers and internet connections. Have your slides projected on an easy-to-see surface in the space and share a slide that outlines the workshop schedule (there is an example of this in the provided sample slide deck).
We use the online editor Codepen so that workshop attendees can easily experiment with code without having to set up a complicated environment. However, there is a little setup involved here. Each attendee pair will have to go to the Codepen website and create their own accounts. This is a good activity to do before the workshop begins. Make sure that attendees have windows open for HTML, CSS, JavaScript and a preview window. We'll also need jQuery for the JavaScript section, so make sure that library is enabled.
- Describe the basics of how the internet works
- Identify what HTML is
- Identify what CSS is
- Identify what JavaScript is
- Describe how HTML, CSS and JavaScript work together
Keep your descriptions of how the internet works high-level, just to give some context for how the code attendees will soon write relates to the pages they read on websites. It's often helpful to describe a general server/client relationship. Identify HTML, CSS and JavaScript as different technologies with different purposes. We use the metaphor of a robot: HTML forms the robot's body structure, CSS provides the robot's colors and arrangement and JavaScript makes the robot move.
- Identify an HTML tag
- Write an HTML tag
- Write several HTML tags to create the content of a page
- Research new HTML tags
Note: Take a moment here to check that everyone has a Codepen account created and the environment properly set up (windows open for each language and preview, plus jQuery activated).
Show what a complete HTML tag looks like, then walk through the steps of creating one. Make note of opening and closing tags. Lead attendees in writing several different tags and looking at the results in their preview windows. Direct them to online resources where they can find and use new HTML tags (see Resources for links).
- Identify a CSS rule
- Write a CSS rule
- Write several CSS rules to create a style sheet
- Research new CSS rules
Show what a CSS rule looks like, then walk through the steps of creating one. Lead attendees in writing several different rules and looking at the results in their preview windows. Direct them to online resources where they can find and use new CSS properties (see Resources for links).
- Identify a JavaScript function
- Write a JavaScript function
Show what a JavaScript function looks like. We demonstrate three jQuery functions: fadeOut(), fadeIn() and animate. Show the code and show the effects, then allow attendees to implement it for themselves. JavaScript tends to throw workshop attendees for a loop, so reassure them that we have plenty of time to work through it.
You'll notice that in the slide deck there are a couple of slides to mark breaks. Breaks are important for any new learners but especially when working with kids. Let people get up, get something to drink, use the restroom, stretch their legs, chat with other attendees. If some would rather stay at their computers, that's great too. We've provided a couple of topics attendees can think about or search the internet about during breaks: women in STEM fields and what kind of jobs use the skills in the workshop.
In general, allow plenty of time for practicing and exploring. This workshop is about getting comfortable with new things, so don't worry about rushing through any sort of checklist of topics. Spend time checking in with attendees as they work so you can provide support. If anyone is struggling, ask a teaching assistant to devote more attention to them. If anyone is excelling, suggest some more advanced techniques they could try out.
You can also point workshop attendees to our list of Resources for further learning.
You can also take a look at:
Workshop materials are licensed by a Creative Commons Attribution-NonCommercial-ShareAlike license, which means anyone can use, adapt and share the materials as long as they don't charge money for them or place additional restrictions on them. The idea is to make these workshops accessible to everyone. 🙂