Web Development (LightHouse)
Introduction to Web Development
Block 2, winter 2021 (January – March)
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!
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.
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!
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!
(subject to change)
|Week 1||5 Jan.
Intros, What is the Internet?
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
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.
Inline CSS styles, named colors
Text formatting elements
More page elements: lists & tables
Digital color: pixels, additive & subtractive color, RGB↔︎HEX
|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
|Week 5||2 Feb.
External CSS stylesheets; containers & labels; padding, borders, and margins
Introduce midterm project
|Due Thurs: Work on your
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.||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.||25 Feb.||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.||4 Mar.
|No homework this week!|
|Week 10||16 Mar.
Final project announcement; more JS response to HTML inputs.
|18 Mar.||Due Thurs: A plan for your project, including:
Over the weekend: Write most or all of your HTML so that you can focus on the JS in class.
|Week 11||23 Mar.||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
- HTML containers & labels
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!