CODING BOOTCAMP

BUILDING, LEARNING & TEACHING OTHERS HOW TO CODE

tiffany@ladieslearningcode.com

tiffany.tse@shopify.com

@tiffany_tse

Create an Account on

thimble.mozilla .org

Create an account on https://thimble.mozilla.org
Click “Create Account” in the top right and type in a username, email address and password for your account

@tiffany_tse

The Internet

How do you think a webpage is made?

Did someone draw it on paper and then scan it into a computer?
Did someone make it using a word processor (like Microsoft Word)?

@tiffany_tse

Nope!

The internet is made with CODE!

HTML

Websites are created using a language called HTML
HTML stands for: Hyper Text Markup Language
Browsers don’t understand English. So we use HTML in order to communicate
When we use HTML, we are telling our browser information about our webpage and what kind of content to display

@tiffany_tse

How do we read and write HTML?

@tiffany_tse

Head

The <head> </head> tags display information about our webpage. One example of this is a title
A title refers to the text you see at the top of a webpage, in a tab, or even in Google search result

@tiffany_tse

Title

In between the open and closed head tags, edit the title to the following:

<title> Welcome to my awesome website! </title>

What kinds of things do you see on a webpage?

Paragraph

<p>
This is a paragraph. We can write all kinds of
stuff in here!
</p>

An opening tag tells the browser what is about to follow.
In this case, <p> stands for paragraph

@tiffany_tse

Describe what your site is all about in a paragraph

@tiffany_tse

Remember...

Computers are picky (and also pretty dumb)!
Always open < > and close </ > each tag, or your computer will think you’re speaking a foreign language!

@tiffany_tse

Debugging Time!

What’s wrong with this?

p> this is my paragraph </p

Tags with attributes

The <a> tag (also known as an anchor), tells a browser to link to another webpage.
But how does it know what URL to link to?!

@tiffany_tse

Attributes

We need to tell the browser more information - to do this, we use an attribute href is an attribute and stands for hypertext reference
In the example below, “http://www.google.ca” is the value of the href attribute and is the URL the link will direct to

< a href = “ http://www.google.ca” >
Click me to go to Google
</a>

@tiffany_tse

Add a link to a website

@tiffany_tse

Images

Images use the <img> tag and like links, also need attributes
The src attribute (meaning source) tells the browser where to find our image

@tiffany_tse

Add your own image

Open up Google and search for your own image!
Once you’ve found an image you like, select it and then click “View image”
Copy the image’s URL, and paste it as your image source

@tiffany_tse

Try combining a LINK and Image to create an image that is linked to a webpage

@tiffany_tse

Image Links

To create an image that is linked to a URL

Put the image tag and it’s src attribute inside the opening link tag with it’s attribute and the closing link tag

@tiffany_tse

Answer

</a>

@tiffany_tse

Are you ready for CSS?

@tiffany_tse

CSS

CSS is our way of making our HTML look pretty!
CSS stands for: Cascading Style Sheets
In a nutshell, HTML handles content while CSS handles design
Where do we put CSS?

@tiffany_tse

CSS

Remember the <head> </head> tags we created in HTML?
CSS must go somewhere in between those two tags (normally we see it at the bottom, just inside the head, after the <title>)
To tell the browser that we are going to start using CSS we use the <style> tag
To tell the browser we are going to stop using CSS we use t he </style> tag

@tiffany_tse

<html> We’re going to start communicating with you using HTML!

<head> Information about our webpage starts here

</head> Information about our webpage stops here

<body> Content to display starts here, browser. Pay attention!

</body> Please stop displaying our content

</html> Our HTML communication with you is over

Writing CSS

Everything you’ve created on your webpage so far can be individually styled!
To do this, we use CSS selectors. Each selector has within it, one or more properties and each property has a value that you can customize

body {
background-color : red;
}

--------

body {
background-color : red;
}

@tiffany_tse

CSS Selectors

Refer to an element in your HTML

CSS selectors use
{ to start making something look pretty and
} to stop
Remember: within { } is our property and value.
To end a value, use ;

** Most code is written with American spelling for things like 'color '

@tiffany_tse

HEX Codes

The word “ red” will only ever display one shade of red for us. But there are so many other shades available on our screens!
A hex code is a made up of 6 numbers or letters and is just another way of saying a specific color.

@tiffany_tse

Hex Codes

We use the # sign before our 6 digits to tell our browser we are referring to a hex code
Example: the hex code # 984E48 is another way of saying a specific shade of red
Try adding your using own hex code to background-color using
http://www.colorpicker.com

@tiffany_tse

Fonts

There are a number of font families that are considered "web safe.”
A few of them are:
Arial, Times New Roman, Georgia, Courier
Fonts can also have a specific font-size (in the example below, this number is in pixels!) and a specific color

font-family: Helvetica ;
font-size: 18px ;
color: #FFFFFF;

@tiffany_tse

What else can we style?

Okay, so we’ve styled the body. But what if we want all our paragraphs to be a different color than what the body is?
Recall the <p> </p> HTML tags we used earlier
We can use ' p ' as a CSS selector

@tiffany_tse

Styling a paragraph

To change the font color of a paragraph, we use the following:

p {

color : #FFFFFF;

}

Try adding your own color hex code, font-family and font-size

@tiffany_tse

Now...back to our HTML

@tiffany_tse

div

HTML has a neat little tag called the <div>
On it's own, this tag actually does nothing, its just a transparent box. But if we make the div unique, we can better organize and style our content
Adding an id attribute makes a <div> unique for styling
Adding a class attribute makes a <div> unique for styling

id

An id is an attribute that can only used once on a webpage with its specific name
For example, we can wrap all of our paragraphs, links and images inside a label called main content and then style it using CSS.
If we then use the id as our selector in CSS, the style for it will only ever be seen once on our webpage

id

Find where you created your first HTML paragraph/link/image
Above that line of code, add the following:

<div id = “ maincontent ” >

Now, find where you created your last paragraph/image/link
Below that line of code, add the following:

</div>

Styling an id

To style an id in CSS, we always put # before the name of the id
Add the following in between your two style tags :

#maincontent {

background-color: #FFFFFF;

}

Bonus:

text-align: center;

border-top: 10px solid #000;

border-bottom: 10px solid #000;

class

A class is an attribute that can be used multiple times on a webpage with its specific name.
For example, we have one paragraph and one image and want to wrap each one in it’s very own box - the catch? The boxes need to look exactly the same. Although these two boxes contain completely different content, we can use a class so that they have the same style

class

Find a paragraph/link/image that you want to place in it’s own box. Above that line of code, add the following:

<div class=“box” >
Below that line of code, add the following: </div>

Find a second paragraph/link/image that you want to place in it’s own box. Above that line of code, add the following:

<div class=“box” >
Below that line of code, add the following:
</div>

Styling a class

To style a class in CSS, we always put
. before the name of the class
Add the following in between your two style tags :

.box {

background-color: #E9F7A0;
}

Bonus:

border-width: 2px;

border-style: solid;

border-color: #FF2D6A;

More CSS ideas

img {

border-width: 2px;

border-style: solid;

border-color: #000000;

}

a {
text-decoration: none;
}

body {

padding: 20px;

}

Congratulations!

You’ve made your first webpage! Be sure to click “Publish” in the top right and share the link with your friends and family!
If you would like to edit your published webpage, simply go to webmaker.org, sign in, and hover over your username in the top right
Select “My Makes” from the drop down menu, hover over your project and select the pencil icon
Happy webmaking!

TEACHING CODE

@tiffany_tse

CREATE SHARED VALUE

@tiffany_tse

PROJECT BASED

@tiffany_tse

BUILD, BREAK, AND FIX THINGS TOGETHER.

@tiffany_tse

COMMUNITY

@tiffany_tse

RESOURCES

@tiffany_tse

ONLINE RESOURCES

@tiffany_tse

LADIES LEARNING CODE

@tiffany_tse

HOUR OF CODE

@tiffany_tse

Thanks!

tiffany@ladieslearningcode.com

tiffany.tse@shopify.com

@tiffany_tse