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
Tags
- We use tags to start and stop a dialogue with our browser
@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
<img
src = "http://girlslearningcode.com/banner.png"
>
@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
href=”http://www.google.ca”
>
<img
src=”http://girlslearningcode.com/banner.png
>
</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
<link rel="stylesheet"> Connects CSS file to webpage
</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;
}
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;
}
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
@tiffany_tse
LADIES LEARNING CODE
@tiffany_tse
HOUR OF CODE
@tiffany_tse
Thanks!
tiffany@ladieslearningcode.com
tiffany.tse@shopify.com
@tiffany_tse
Coding Bootcamp
By tset
Coding Bootcamp
Coding Bootcamp - HTML & CSS 101 - Building, Learning and Teaching Others How to Code.
