Web Development Workshop at the Spring Camp - Technovation Tunisia, March 18-21st, 2018
CSS HTML JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
lib
practice
reference
.gitignore
LICENSE
README.md
class1.html
class2.html
class3.html
class4.html
favicon.ico
index.html
package.json

README.md

code-camp-18

This is an overview of all possible activities for remixing and use for the Web Development Workshop at the Spring Camp - Technovation Tunisia, March 18-21st, 2018. This includes a collection of exercises and slides for a one-day workshop covering an intro of HTML/CSS/JavaScript for 50 women between ages 12-19.

Description

This is a respository of material for a 4-part, multi-hour course in Introduction to Web Development.

This beginner course will guide you through the basics of HTML, CSS, and Javascript. By the end of the class, you will have developed a first version of your own website.

In this workshop, we'll build skills to make this profile page, for a zebra, or anyone!

Screenshot of a sample page

Prerequisites:

No previous experience is required.

Tech requirements:

This workshop provides a library of materials that can be used and perused with or without the following materials, but active participation and completion of all activities would ideally involve the following:

  • Your laptop (Mac, PC, or Linux are all okay).
  • A modern web browser - either Chrome or Firefox with Firebug installed.
  • A text editor. We recommend Sublime Text 2 (free; available for Mac, PC, and Linux).

Classes

Class 1: Intro to HTML

Introduction to HTML. What is it? Why does it matter? You will go through the basic history of HTML, including how it interacts with the browser and why that matters. Then you will discuss the layout of an HTML page, including html, body, head and nesting. Finally, you will go through many of the basic HTML elements. Students will begin to make a personal portfolio page with HTML elements and no styling.

Class 2: Intro to CSS

Introduction to CSS. Colors? Styles? What? It's all true. And you thought we are going to make you live your life in black and white. You will go through most of the css styles, including font changes, layout, size, and color. You will show how to connect them to html selectors. The CSS file will be an external file. Students will add CSS styling to their portfolio.

Class 3: HTML/CSS Structure

Introduction to divs, spans, ids and classes. You didn't think we would just leave you with paragraphs and lists did you? No, my friends. We are going to dive into these super valuable container elements. Then learn how to have id and class selectors in our CSS. Who wants all paragraphs to look the same. Students will start customizing their portfolio with all sorts of goodies.

Class 4: HTML/CSS Layout

Box model? Floating? Columns? What is this sorcery? You've brought people through the core of html and css. Now give them the next steps to be pros. Students will add columns, footers and headers to their portfolios.

Resources

Credits

This is adapted from the Girl Develop It Core HTML/CSS/JS curriculum. It was developed through the contributions of Pamela Fox, Alexis Goldstein, Erin M. Kidwell, Izzy Johnston, Jen Myers, and modified by Sylvia Pellicore and Aurelia Moser.