Teaching a 50 Minute Crash Course in Web-Development
There were only 3 days school this week (students got Thursday and Friday off for Easter) so instead of forging ahead with new course material before the break, I decided to put together a lesson on Web Development. The goal was to have students create an HTML page, with a bit of CSS and JavaScript, in a 50 minute class period, with no assumptions of prior knowledge of any of these web languages. Read on to see the lesson plan, and some of the thoughts I had around planning for the day.
Planning
-
Students can either bring their own laptops in from home for class, or use the school provided Macbook Airs. Some students use PCs, others have Macbooks. To reduce the number of variables during the activity, I decided to have all students grab one of the school provided Macbooks for the class period.
-
I wasn’t sure what type of text editors were installed on the school provided Macbooks, so I decided I needed to teach the students about
vimwhich I know comes standard with the mac bash terminal. -
In order to get all of the students in vim, though, this meant I needed to do a bit of a crash course in using the
terminal. I built my lesson under the assumption that no students had actually ever used the terminal before, which turned out to be a correct assumption. -
Class is only 50 minutes long, so I was going to have to really fly through the material…I sent the lesson plan out to my co-teacher prior to class, so he could understand the goals of the lesson before we started. This way, if any students ran in to issues, he could help debug while I continued on with the material.
-
I wanted to motivate building the HTML page with a short lesson on how the web works (high level). I thought this would be helpful for students to understand where the HTML pages live after they are created, and how they make it to the browser. I created some slides with pictures to help with this discussion. I also had students open up Chrome, go to google.com, and use the developer tools to inspect the served html. I deleted the google img tag from the page, then refreshed the page and it reappeared: this helped students understand that the html page they receive in their browser is just a copy of what is on the google servers.
Find notes / steps for my lesson below.
The lesson
How Does the Web Work?
Brief discussion on servers and how URLs are mapped to server addresses (requesting the resource available there).
- Inspect google.com, show what the HTML page looks like
- Delete elements off of the page
- Change text on the page
- Refresh the page, show that our modifications disappear
We didn’t actually change the page on Google’s SERVERS, we just changed the copy of the page that the server shipped to us.
The Terminal
Brief intro on what the terminal is, how to access it, and what it is used for.
type: cd ~
- cd stands for “change directory”. Changing between folders in your computer’s file system.
- ~ is your “home” directory
type: ls
- looks at the files in the current directory.
type: mkdir your_name_web
- mkdir stands for “make directory”. It creates a new folder at the current level.
type: ls
Check: you can see the new directory when you typed ls.
Practice: Change directories in to the directory you just made
Using Vim
type: vim index.html
vimis a very powerful text editor in your terminal.- The above command will put you in to a file called
index.htmlin your current working directory (your_name_web). vimdoesn’t allow you to type like a normal text editor does… It has two modes: navigation mode, and insertion mode.
type: i
- Switches in to insertion mode
Check: You should now be able to type in the file.
Creating an HTML Page
Talk about the high level anatomy of an HTML page.
- create:
<html></html>outer tags - create:
<head></head>tags - create:
<body></body>tags
Talk about structure of html tags (openining and closing a tag). What gets nested inside of what. Spacing properly is important for readability
- create:
<h1></h1>in body - “hello world” inside of the tags - create:
<title></title>tag in head - “My Static Page” inside of the tags - create:
<a></a>tag in body -hrefattribute to school website
Back to Vim
Need to save the file. You can’t just hit cmd+s like normal
type: esc key
- Exits insertion mode
type: :wq + enter
- This tells
vimto save and exit the file
Open the Page
type: ls
- confirm that your new file is there
type: open index.html
- opens the file in your default browser
practice: Have them confirm that the link works, and use the inspector to inspect their web page.
Adding Some Style With CSS
Page is a bit boring…lets add a bit of style to the page using CSS
setup: Go back in to the index.html file with vim. Switch back in to insertion mode.
create: <style></style> tags inside of <head>
- turn the h1 red, center it
- make link have px of 50
h1 {
color: red;
text-align: center;
}
a {
font-size: 50px;
}check: Save the file, and refresh the page in the browser
practice: Create a new h2 tag that is centered below the header of your page. Make it have a text value of 0 (put 0 inside of the tags). Center it, make it yellow.
Adding some Javascript
Browsers read and understand javascript, just like Eclipse understands Java.
setup: Give your h2 element an id attribute of “counter”
create: <script></script> tags inside of <head>
- inside here we will be writing javascript. Three different languages in one file… pretty cool!
Type the following in to the script tags:
var count = 0;
var increment = function() {
count++;
document.getElementById('counter').innerHTML = count;
}Give your h2 an onclick attribute of increment()
check: Save the file, refresh the page, and click on the h2! The h2 should increment each time you click on it by 1.
Additional Resources
For anyone who wants to continue learning about web development languages:
codecademy —> javascript or html/css tracks
Wrap up
We were able to cover all of the material in the 50-minute class period, and every student reached the end goal. Feedback on the lesson was very positive, so I think we will be doing more Web Development type work after the AP exam is over in May.
If anyone has additional questions about this lesson, feel free to shoot me an email!
Comments