Course Description
This course focuses on the fundamental technologies, techniques, and methodologies of web site design development. The goal of this course is to provide students with the knowledge and skills to write valid, accessible code for web pages given a typical design document. Core technologies include learning to write HTML, CSS, and basic JavaScript (JS). The course will include an introduction to local development environments and version management software.
This course is meant for beginner students who wish to form a foundation in core web languages and technologies. Students who complete this course may extend their learning with advanced JS, front-end frameworks, and server-side code techniques.
Schedule
This class is meant to run a full school year. I find a double-block (1.5 – 2 hours) schedule is the right amount of time to introduce a topic and allow for hands on labs. Typically, each lesson is completed within one week of classes.
Resources
Crucial tools for beginner web developers include:
- VSCode – A code editor used by professional web developers
- Learn Web Development – An E-book from the Mozilla Development Network (MDN). This will be the primary textbook for this course.
- w3schools.com – A web reference resource that is highly accessible for beginners. It’s like the Wikipedia of HTML and CSS.
- css-tricks.com – A great source of thoughtful CSS examples and research.
Methodology
This course is meant to be student-driven. Although we will use an E-book, reference information about HTML, CSS, and JS has minimal value to students without practical examples.
For example, instruction on making images responsive is best understood and retained after a student asks, “How can I make my image look good on my phone browser? It’s way too big!” I know this because I have given lessons on responsive images, only to hear this question from everyone in the room during the hands on lab.
The Learning Journal
Information on demand is crucial for hands-on learning. But we also need a primer before writing code. To strike this balance, I use a learning journal. Before each lab I assign the e-book unit, and ask the students to write outline notes. Outline notes help students identify key topics, jot down questions or expectations, and keep their notes minimal.
During the hands-on labs, I assume the facilitator role. When students run into unknown ideas and I can direct them to the section of their notes that discusses what they are trying to implement. Finally, I provide any additional clarification or my own “two-cents” about the topic.
The Labs
The labs are a mix of coding assignments. Some are straight from the e-book, others are homemade. When assessing the labs, I prefer a demonstration and an explanation from the student about the code, the objective, challenges, and ultimately how it works (or doesn’t work). In this course, the most valuable product is not the code students write. The most valuable product is their understanding of their code.
Assessment
In use a weighted system for assessment. Typically it looks like this:
- Learning Journal: 30%
- Labs: 30%
- Participation: 30%
- Documentation: 10%
I check Learning Journals at the beginning of every week. Labs must be assessed in class by the end of the week. Participation includes class discussion, peer teaching, and student collaboration. Documentation is simply including clear readable comments in your code.
Code “The Hard Way”
In the great book, “Learn Python 3 The Hard Way,” author Zed Shaw discusses the challenge performing tedious tasks and the value of perseverance. The Copy/Paste function is so handy. But you will never build the muscle memory and precision of writing code by hand.
Writing code by hand is error prone, which is good if you’re a student. I always tell my students, “You will learn more from the code that fails, than you will from the code that runs perfectly the first time.” Copy/pasting code robs you of the experience of deciphering errors, hunting down the problem, and implementing a solution that leads to a greater understanding of coding.
Programming is an art. If you want to master it, you have to put in the work. This is something all black belts learn. Coding the hard way doesn’t mean the code is complex or hard to understand. Coding the hard way means putting in the work. Diligently typing things out. Even when it’s tedious.
Lessons