Girl Code, week 1: HTML & CSS

Girl Code

Part 1: HTML & CSS

Who are we?

(mentor introductions)

Who are you?

Let's say our names + a website we couldn't live without

What is a web app?

A web page

that does stuff

(post updates, buy products, chat, search…)

What is Girl Code?

We're going to teach you everything you need to know to build a web application.

…then, we're going to build a web application!

The Girl Code Experience

Real industry tools
Team project
super challenging? but we're here for you!

We looked at a lot of other courses that teach people to code or build websites, and we deicided to do things a bit differently. 1. Actual skills that are used in Industry. That means we won't be using beginner tools like Scratch, Alice, or AppInventor. Why? - Better idea of what it's like in industry - skills you might use again after the course Tradeoff: - slower, more challenging learning curve --- secondly --- A lot of courses have you building your own project by yourself. We're going to get everyone to work on the same project together. A lot of the interesting parts of working on software are how we work together, communicate ideas, even just how two people can work on the same code at the same time without rewriting each other's changes. You don't experience any of that if you only work by yourself. The tradeoff - you need to learn MORE tools - it's more challenging --- so, challenging --- So, we made a lot of choices that make this course more challenging. And some of it may be tricky. But we're all in this together, we're here to help and you're here to help each other. There's no magic or bad luck in programming. If something goes wrong, there's always a reason why and there's always a way to fix it. Sometimes it can be frustrating, there are lots of mental tricks that coders use to help get in a good state of mind the figure out problems, and we'll teach you some of those during the course.

Course Outline

Week 1

Learn

HTML & CSS

Week 2

Learn

JavaScript

Week 3

Learn

Git and Node

Week 4 – Week 7

✨Build an app✨

Week 8

Release it!

Slack

A messaging app for teams

very popular right now

girlcodeakl.slack.com

(we will sent out invites in a moment!)

Week 1

Two Coding Languages

HTML and CSS

HTML


<body>
	Girl Code
	Girl Code is a coding course…
</body>

I define a document, like writing on a page 📄

I am a tree structure 🌲

My name is made from pointy letters, and I like pointy brackets <> 👌

CSS


p {
	color: blue;
	border: 10px solid red;
}
a {
	text-decoration: underline;
}

I list rules for how to draw things:
colour, size, style 💜💛💚💙

I make HTML look good 😎

My name is made from curly letters, and I like curly brackets { } 👍

Computer time?

almost…

First, let's talk about trees 🌲

Computer time!

Make a web page using HTML and CSS

http://girlcode.co.nz/course/1/