Course Syllabus

Course Description / Overview:

Grades:  5th - 8th

In this class, students will focus on learning the basics of web design and coding in HTML and CSS--the premier markup and styling languages of the internet. Students will learn to use HTML tags to create forms, tables, navigation bars, website layouts, and to embed pictures and videos. Near the end of the course, students will also learn about web hosting and will be given the opportunity to upload their work online.

Note:

Classes will be divided into small groups with 1: 6 teacher: students ratio

 

Class Goals/Outcomes:

  • Kids will get in-depth knowledge of HTML and CSS. They will have their own custom web page.

 

Course Outline:

Day 1

Topic: Introduction HTML, CSS

Activity: Create "Hello World" web template
Day 2

Topic: List, form, tables

Activity: Create a web page with these objects
Day 3

Topic: Interacting with media and Inline CSS

Activity: Adding images, videos, youtube links, iframe, weblinks
Day 4

Topic: CSS layout, class, id, <div>

Activity: Float, position, margin, padding, animation, hover
Day 5

Topic: CSS Border and Animation

Activity: Border, hover, transition, opacity, etc
Day 6

Topic: navigation bar, dropdown menu, responsive web page

Activity: interactive menu bar, @media methods
Day 7

Topic: Putting it together

Activity: All About Me Web Page, started
Day 8

Topic: Putting it together

Activity: All About Me Web Page, bring it online

 

Student Expectations / Classroom Policies:

  • Decent typing skills

  • Kids should know how to use some keyboard shortcuts-

    Windows Commands:

    CTRL /            to comment and uncomment on repl.it

    CTRL z           to undo

    CTRL c           to copy

    CTRL v           to paste

    CTRL +           to make the font bigger on repl.it

    CTRL -            to make the font smaller on repl.it

     

    Mac Commands

    COMMAND /             to comment and uncomment on repl.it

    COMMAND z            to undo

    COMMAND c            to copy

    COMMAND v            to paste

    COMMAND +            to make the font bigger on repl.it

    COMMAND -             to make the font smaller on repl.it

     

  • Some Zoom Feature:

                How to screen share on zoom

                How to use chat for text message on zoom

  • Before class starts, create an account on repl.it.

    We will use an online editor for this class Repl.it. Below is the link for an editor. Kids will require to create a login to use it. 

     (Links to an external site.)Repl Online Editor Link (Links to an external site.)

    Video tutorials on how to use repl.it

     

     

    Progressive Kids Lesson Setup Video:

 

What Should I bring to Class?

  • Access to windows or Mac laptop
  • Internet access