LESSONS

video_1_Lessons.mp4

The lesson progression is meant to provide an example of how the class might flow. It is highly customizable based on your interests, student progress, etc.

The main flow is starting off with Linux basics, progressing to using SSH to remote into the Raspberry Pi server and then adding HTML and CSS to start building pages that culminate in a basic three page website based on student interests.

Linux

LESSON 1

Talk about Linux OS, show introduction videos and have a discussion about hardware & software
Terminal description and how it works
Demonstrate basic linux commands like pwd, ls, cd and so on

LESSON 2

Have a discussion about paths and how to navigate files systems
Show Mac OS GUI finder window side by side with Linux "ls" of same directory
More exploration of basic Linux commands

LESSON 3

Continued exploration of basic commands through exercises
Some call and response type quizzes or polling quizzes are fun to see where everyone is at in comprehension
Exercises to shore up gaps

LESSONs 4

Introduction to SSH command, IP addresses and connecting to remote computers
Discussion of IP address and how it's like a postal address
Class remotes into Raspberry Pi server and continues with exploration of basic commands creating files, navigating the server and other exercises remotely

LESSON 5

Continuation of SSH + basic commands making remoting into the server a routine task

LESSON 6

SSH + basic commands repetition
Introduction of Nano text editor
Discussion of file extensions
Discussion of how everything is a file inside a computer

HTML & CSS

LESSON 7

HTML & CSS introduction discussing what each do and syntax
Introduction to DNS and relationship to IP address and why DNS is useful
Create first web page in Nano by copying and pasting example code
Have students change content to start personalizing the code

LESSON 8

Explore basic HTML tags, what they do and how to use them
Examples: <html> <head> <title> <style> <body> <h1> <h2> <h3> <p>

LESSON 9

Explore basic HTML tags, what they do and how to use them
Examples: <html> <head> <title> <style> <body> <h1> <h2> <h3> <p>
Now introduce CSS syntax
Discussion of CSS box model
Start exploring basic CSS styling
Examples: color, background-color, size, font-family, margin, border, padding, height, width, display
Introduce hexadecimal color picker: https://htmlcolorcodes.com/color-picker/

LESSON 10

Introduce adding images to web pages using the <img> tag
Show examples using images from the internet as well as adding your own images from your computer
Introduce the scp command to copy images from student computer to the web server

LESSON 11

Introduce adding videos to web pages using embedding
Show examples using videos from the YouTube as well as adding your own videos from you computer
Introduce the scp command to copy vidoes from student computer to the web server

LESSON 12

Spend a class refining the web pages students have built combining all these elements
Maybe have some quizzes or polling to sample comprehension
Use this time for students to customize and time for the teacher to troubleshoot and help catch students up

LESSON 13

Introduce concept of website consisting of multiple pages linked together with navigation
Introduce the concept of a header, content and footer area of a page
Use the template web site code that has three div's for header, content and footer

LESSON 14

Add anchor tags with links to each page of the website
Add image icons for each page as navigation

LESSON 15-16

Continue building all three web pages with student driven content
Give lots of time for them to refine colors, structure, content
Teacher uses this time to help with problems and debug student code if they are stuck

LESSON 17

Students or teacher presents each site on the screen to show off the work.
Students add links to each site with a reflection to a portfolio or content management system for sharing to parents, etc.

Report abuse