Introduction to Web Development

Block 2, winter 2021 (January – March)
Tuesday/Thursday
9:00-10:30 a.m.

instructor: Emmett Wald (they/them pronouns)
ewald@lighthouseteens.org

Welcome to the class headquarters. All course information, assignments, code examples, etc. will be found (or found linked from) here. This is a living document, so bookmark it and check back regularly for updates!

Jump to current week in the schedule »

Course Description

Learn the basics of web development. Students will learn how to create a simple static webpage using only HTML, how to customize appearance and layout with CSS, and how to add interactive elements using JavaScript. These skills will be applied to building a real, working website over the course of the block! This class is intended for beginners—no previous web development or coding experience necessary.

The goal of this course is to introduce web development concepts and practices (HTML page structure, tags, formatting & styles, IDs & classes, hyperlinks) as well as to teach syntax and structures specific to HTML, CSS, and JavaScript. We will also cover how the Internet works, how to make sense of URLs, website builders like WordPress, looking at source code of webpages, and other topics. I hope students will leave this course with the confidence to create and maintain their own websites, an appreciation for how the internet works, and a desire to keep learning web development.

Remote Learning Format

This course is entirely remote. Class will be taught at the scheduled times via Zoom. Log in to Alma to get the Zoom info! In order to foster a sense of community, all students are expected to have their cameras on for the duration of class.

We’ll use a blend of lecture, demonstration, guided coding, collaboration in Repl.it Multiplayer, and regular homework assignments to learn and practice web development.

Tardiness & Absence Policy

I understand that you might not always be able to make it to class. If you know that you are going to be late or miss class, please email me as soon as you know.

  • More than 5min late = tardy
  • More than 20min late = partial absence
  • Less than 24hrs’ notice = unexcused (unless you’re sick, see below)

I want to help you succeed in my class. This means that I need you to communicate with me about when you’ll be gone, so that I can help you catch up on what you missed.

  • If you’re sick, I need you or a parent/guardian to email me no later than the end of that day to let me know, otherwise it will be marked as an unexcused absence.
  • If you expect to have several absences during the block, please let me know now so that we can make a big-picture plan to make sure you don’t fall behind.
  • If you miss part of class due to tech issues, ask in class or email me to find out what you missed.
  • If you’re late for or missing class, I still expect you to complete your homework and submit it to me by email.
  • If you miss class, you will probably need to do some makeup work. Please be proactive about emailing me to find out how to make up missed class time.

TL;DR ~ If you’re going to miss any class, please email me ASAP, and please stay caught up on classwork.

Accessibility

Please let me know if there are any accommodations you need to participate fully in this class. If you’ve had an IEP or 504 in the past, tell me what kind of support is helpful for you.

I know that a Zoom-taught computer programming class has a lot of inherent accessibility barriers. However, please let me know if there’s anything I can do to make this course more accessible for you, or if you need my help figuring out how to make it more accessible!

Course Materials

No textbook required! (If you’d like a supplemental text, feel free to check out the free ebooks mentioned on my resources page.)

You’ll need a computer with high-speed internet connection; a microphone, speakers, and webcam; and an up-to-date browser to participate in class. A full-sized keyboard is strongly recommended. Tablets are not recommended. A second monitor or device is very helpful, but not necessary.

Students will need to create a free Repl.it account (we will go over this during the first week of class). Repl.it is an online coding platform that supports dozens of programming languages, and it also lets you build and host a website for free!

Course Schedule

(subject to change)

Jump to current week »

Mid-block evals

Tuesday Thursday Homework
Week 1 5 Jan.

Intros, What is the Internet?

Our class notes, today’s code

7 Jan.

Internet Privacy & Cyber Security

Due Thurs: (Optional) Watch longer video about how the Internet works: part 1, part 2.

Over the weekend: fill in the definitions of your assigned terms.

Week 2 12 Jan.

HTML Basics: today’s code

14 Jan.

Image resizing, title attribute, title element

w3schools!

Webpage inspection tool

Due Thurs: Write a simple HTML document with headings and paragraphs about something that interests you.

Over the weekend: Use the inspector to check out a webpage. Write down or take a screenshot of something interesting you find.

Week 3 19 Jan.

HTML lang

Inline CSS styles, named colors

Text formatting elements

More page elements: lists & tables

21 Jan.

YouTube video about digital images

Digital color: pixels, additive & subtractive color, RGB↔︎HEX

Nifty tools:

Due Thurs: Create a page with styled text. Add tables, lists, and/or other new elements to a page.

Over the weekend: Create a color palette for a webpage. Choose the title color, main text color, background color, hyperlink color, and at least one other accent color. Get the RGB and HEX values for each color.

Week 4 26 Jan.

Internal styling with CSS

28 Jan.

NO CLASS

Due Thurs Over the weekend: Finish adding CSS styling in the head of your webpage. Find a CSS property we didn’t talk about and add it as well.
Week 5 2 Feb.

External CSS stylesheets; containers & labels; padding, borders, and margins

Sample webpages: plants and Emmett bio

4 Feb.

Introduce midterm project

Sample webpage

Due Thurs: Work on your div or add a new one. Play around with margin, border, and/or padding.

Over the weekend: Decide what topic you want to do for your midterm project.

Week 6 9 Feb.

Units of size in HTML/CSS

11 Feb.

Jump links, nav bar, fixed top menu

Work on midterm projects

Due Thurs: Research for your project. Save the urls of all the webpages or other sources you get information from.

Over the break: Work on your project. Finish your research!

February Break! No class 16 and 18 Feb.

Week 7 23 Feb.

Work on midterm projects

25 Feb.

Work on midterm projects

Mid-block evals

Due Thurs: Work on your project. Try to finish styling and implement any classes/ids/divs/spans so that we can troubleshoot in class.

Over the weekend: Finish your midterm project!

Week 8 2 Mar.

Midterm project sharing & evaluations

JavaScript preview: video & sample code

4 Mar.

Intro to JavaScript

What is the DOM?

Today’s code

No homework this week!
Week 9 9 Mar.

JavaScript variables, operations, and functions

11 Mar.

HTML inputs & JavaScript response

Over the weekend: Add a couple new & different input elements and make your JavaScript respond to them.
Week 10 16 Mar.

Final project announcement; more JS response to HTML inputs.

18 Mar.

Work on final project.

Due Thurs: A plan for your project, including:

  • what inputs you’ll use
  • how the JS will modify the HTML
  • theme/topic

Over the weekend: Write most or all of your HTML so that you can focus on the JS in class.

Week 11 23 Mar.

Work on final project.

25 Mar.

Last day of class! Project share-out.

Due Thurs: Finish your project!

Topics to be covered include:

  • HTML page structure
  • formatting & styles
  • digital color
  • CSS
  • HTML containers & labels
  • hyperlinks
  • JavaScript

Help & Resources

Class notes: Google doc with all the notes we take in class.

One of your best online resources is w3schools, which has a wealth of information (tutorials and references and examples) about web development. I also encourage you to check out the links on my Programming Resources page ~ there are lots of great websites, references, ebooks, and more listed there.

I don’t have scheduled office hours, but please email me if you need anything or want help with an outside-of-class programming project and we can set up a time to talk/Zoom/Skype/Facetime/whatever!