Module 1 - Basic Web Pages: HTML, CSS, and JavaScript

Time to get your hands dirty. In this module you are going to work with the three basic building blocks of web programming: HTML, CSS and JavaScript. In parallel you are going to gain experience with some important tools for web programming, namely GIT, VS Code, and NodeJS. In addition to the code you will turn in, the steps below also encourage you to learn through controlled experimentation. Try different things out. The web is evolving rapidly, and experimentation is an important meta-skill to develop as a web developer.

This learning module is scheduled for January 20, 2021 through February 2, 2021.

Readings

These readings/videos are suggested to help give you an overview of the important concepts for this learning module.

• Background
  • Information Management: A Proposal by Tim Berners-Lee (the original proposal for the web)
  • The Crazy and Wonderful State of Web Development by Lee Falin (especially the last section "Advice for Staying Sane")
  • How Internet Infrastructure Works by Jeff Tyson from HowStuffWorks.com (without the ads)
• Technical
  • A Visual Guide to Version Control using GIT (or as videos)
    
• Web Concepts
  • Readings from Learn Web Development (or as videos from The Web Demystified)
    • What is HTML?
    • What is CSS?
    • What is JavaScript?

Suggested Schedule

You can work at your own pace, but here is our suggested schedule (i.e., as if this were a typical in-person class with "lab meetings").

• Friday, January 22
  • Install Software
• Monday, January 25
  • Study and experiment with HTML example
  • Access GIT and push changes
  • Post Introductions assignment, Part 1 on Gitlab Pages
• Wednesday, January 27
  • Study and experiment with CSS example
  • Try the CSS exercise
• Friday, January 29
  • Post Introductions assignment, Part 2 on Gitlab Pages
• Sunday, January 31
  • Study and experiment with JavaScript examples
  • Start JavaScript exercises
  • Plan out image filter you plan to implement for Introductions assignment, Part 3
  • Take practice Quiz 1 and Quiz 2
• Monday, February 1
  • Finish JavaScript exercises
  • Take Quiz
• Tuesday, February 2
  • Post Introductions assignment, Part 3 on Gitlab Pages

We strongly discourage waiting until the last minute since working with the web can range from awkward to tricky to downright frustrating — please leave yourself plenty of time for unforeseen complications!

Examples

These examples are provided to help you see our expectations for your code to get you started.

• Source code for you to clone
• Live web sites so you can see the expected results

We strongly encourage you to experiment with these examples interactively to see how changes affect the results.

Exercises

These exercises are provided to help you practice with the important concepts in a controlled way.

• Working with GIT (and as video)
• Styling a Web Page
• A Basic Quiz
• Implementing an Image Filter
   
• Source code to get you started
• Videos of the working example so you can see the expected results

While we will not be explicitly checking that you have completed all parts of all of these exercises, we strongly believe doing the minimum (and more!) will help make doing the primary assignment easier.

Quizzes

These are similar to the content of the quiz for this module and should help you understand our expectations for its scope.

• Practice Quiz 1
• Practice Quiz 2

Install Visual Studio Code and NodeJS

While it is not required, we recommend using Visual Studio Code as your development environment since it has a variety of features to help make it easier to work with your browser to develop web applications.

• Download the current stable version of Visual Studio Code and install it by dragging it into the primary folder where you keep your desktop applications
• Download the LTS version of NodeJS and install it by double clicking on it and following its instructions

When installing these programs, unless otherwise noted, we suggest following the default options.