Weekly Breakdown of Classwork

Jump to current week.

Introduction to class

Week 1 + January 26|28

TUESDAY | Web Survival Guide

We will go over the basic class requirements, syllabus and expectations.


Web Publishing Toolkit

When we work on web publishing we need a set of software tools to help us.

Text Editors

Sometimes referred to as code editors, they can be dedicated to just HTML or many different forms of code. Notepad comes built-in to Microsoft Windows. It does not provide any help when coding. TextEdit comes built-in to Apple macOS also does nothing much to help you, but they are there if you just need something.

  • Atom Editor Created by the people from GitHub it is available for all 3 operating systems* and is free.
  • Visual Studio Code is Microsoft's entry into free code editors, available to all.
  • Brackets is Adobe's Opensource editor focused more on HTML than general coding. Available to all.
  • Sublime Text is commercial software with an endless free trial. Currently one of the most popular editors in use.

There are other choices, if you are a die hard Linux user you can try using VI or VIM. Windows users like Notepad++ and for Macintosh people there is BBedit. I am currently using Nova from Panic software that is a brand new replacement for CODA.

Another thing you might have never considered, there are lots of typefaces designed to help you read code in an editor.

  • Hack is an open-source typeface designed for coding.
  • iA has created their own version of IBM's Plex font called Duo. Check them out.

Where to begin

We are going to talk about the basic parts that include and support HTML. I strongly suggest that you take notes. Either now or by skimming through the recorded lesson later. Make a master folder/directory on your system and keep your notes with your work. If you are a hand writer dump images into a sub-folder. Otherwise use your text editor, its good practice.

Week 2 + FEBRUARY 2|4


This week we really start the process of making HTML pages.

I have 2 text files with my own favorite filler text ozymandias.txt and jabberwocky.txt.

Things for your toolbox

So you don’t get in trouble search images under CC copyright.

HTML elements reference

HTML5 test page on GitHub

Introducing Semantic Elements


This week, I would like you to read through Chapter 4 Creating a Simple Page. Pages 49–70. We will come back to the first 3 chapters later.


These are links to the main sites. Keep these in your toolbox. More often than not a Google search will lead you strait to one of their pages.

THURSDAY | An Interweb of Cats

We have an html page that sits by itself. Now we add the H of HTML and hyperlink things.

The cat because the World Wide Web was created by cats for cats.

I mentioned before that all HTML is just a text file. That fact never changes. When we start adding things like images and other media or links to jump somewhere else we still only have a text file, nothing is ever embedded into it.


We are talking about links and the image tag is a kind of link that pulls an image onto the rendered page.


So what is a hyperlink? A clickable thing that takes your to a different place.

So you should have a basic understanding of the structure of an html page. A short set of tags that let you format your page. Now you can add a simple image and make hyperlinks.

LAB ASSIGNMENT: Stupid web poetry. I want to you create a series of webpages, all linked together as a narrative (minimum of 3 pages). All pages need to have the correct structure and elements. All links must work. You may choose to use images or not. I also want you to make a set of navigation links separate from the narrative that allow someone to move from any of your pages to any other pages.

Week 3 + FEBRUARY 9|11

TUESDAY | HTML5 semantics and structure

Today will with follow along chapter 5 in the book (page 71). I will be giving you a textfile of content to play with that I borrowed from Wikipedia about Murial Cooper. We are going to use it to break down formatting, structure and semantics.

THURSDAY | The Cascade of Style

We went over a lot on Tuesday and I left you to work though trying to markup the text of Muriel Cooper's bio. We will revisit this and review.

We are now going to introduce the style sheet. We refer to it as CSS or Cascading Style Sheet. When we talk about CSS we need to expand our understanding of Web Publishing and how the browser renders a page including things like the DOM or Document Object Model. The other big concept is that of the 'cascade' which we deal with when we add styles in different ways.

If you are caught up on reading chapter 5 and have no personal life to speak of, you can read chapter 11 in the book introducing CSS.

Note: Next week are going to start talking about the web and internet and web servers and how you will be running your own local development server.

Week 4 + FEBRUARY 16|18

TUESDAY | Running your own local Webserver!

Running your own local server

We are only going to serve static pages meaning html and css.

The original web server was called httpd. We call background processes servicesi now, but UNIX called them Demons (Deamons) like Beastie the BSD demon.

The first working web server ran on a NEXT machine so many of the World Wide Web’s conventions are UNIX flavored.

LAMP stack

The most common web server system is called a LAMP server. Linux Apache MySQL PHP. You will see P interpreted as Python and lots of other scripting languages. There are lots of competing ’stacks’ now. If you have ever worked with WordPress or its cousins you have used a LAMP system.

Set up your own

The easiest to install and available to all platforms is XAMPP. It runs a complete web server as an application, meaning you can run and quit it like any other app on your computer.
FYI: MAMP is another similar project but I find XAMPP is easier.

If you have a working version of Python running on your computer. You have a simple HTTPD server on demand. First go to the directory you want to use as root. Then type:

			python3 -m http.server 8000

Use ctrl+c to kill it.

For those who are already playing with Virtual Machines and have already installed Virtual Box take a look at Vagrant.

THURSDAY | This Web Thing

We will go over how the web works and what we need to understand to make it work.

Be ready to run around your computer and look at stuff.

Week 5 + FEBRUARY 23|25

TUESDAY | Cascading Style Sheets

Grab a fresh copy of the HTML5 test page on GitHub if you don't have it handy. Start reading Chapter 11 in the book introducing CSS page 239.


Mozilla Dev CSS reference and the W3School CSS scroll down to the reference section.

Hyperlinks have a set of pseudo classes and a particular order they require in a stylesheet.

Color resources


We are just scratching the surface here.

THURSDAY | What is the Box Model?

We begin to enter the Matrix. To understand the nature of a web page we must understand The Box Model. Here is a bit of CSS magic to help you see.

		/* The Red Pill */
		* {
	  	outline: 1px solid red !important;

Developer Tools

Style Editor
Layout tab

The basic parts of the box model

Now that you understand the box model, let me change it for you. CSS box-sizing was a cry for help from Web Designers who where tired of keeping 2 sets of numbers in their heads.

The box model is one fundamental part of a web page. The compliment to it is the display property.

We talked about using pixels for our measurements. We also can use percentages. The new one for you to absorb is the em. The em comes from Typography and loosely represents an ‘m’ in the typeface. It allows us to relate all our measurements to the type.

Your turn: Show me you understand the box model

  • start a new html file. Use one of my text files or grab some working text of your own.
  • create a series of boxes within boxes 3 total. Color them with CSS
  • box 1 use percents
  • box 2 use Ems
  • box 3 use pixels

Week 6 + MARCH 2|4

TUESDAY | Tables

Tables are one of those workhorse systems that don't get a lot of love. However the web has lots of data and there is no better way to present data than a table.

Tables are in Chapter 8 page: 163 of the book, and W3c shools link.

Please use your SUNY email and sign up on Github we will be using this later to host our live projects.


Any time we interact with a website we use a form. Forms are the interface between the user, the browser and some form of scripted logic/database. This makes then the most complicated and multistep of all html tags.

The simple form that’s not so simple.

Form elements

There are several good reference sites for forms. Mozilla who also talks about the button tag.

Tabindex is a really important aspect of making web forms. When a user clicks the ’tab’ key or equivalent the focus will jump to the next form input. It is important that the flow makes sense to the user - imagine an order for humans and order for machines.


We are going to use some apps and tools to explore forms as they where meant to be used. We will then have a better idea what we are coding in the future.

  • bootsnip is part of a larger framework.
  • WuFu is a side company from Mailchimp and allows you to make dedicated web forms.
  • Google Forms is the one we will be playing with, it is part of Gsuite so everyone has it.

Form Design

A good web form requires some pre-thinking and design. These best practices will introduce you to good methods and ideas.

Iframes are an html convention that refuses to die. If you are reading this in Blackboard you are using one.

Assignment - make a form using google forms or wufu. Capture the person’s full name and favorite color. Ask 5 questions regarding what they want to eat for lunch.

You need to use

  • text box for open questions
  • drop down /(single choice from multiple options)
  • check box (multiple choices for multiple items)
  • multiple choice
  • date

Email me the link to the form and I will fill it out.

Week 7 + MARCH 9|11

TUESDAY | The UNIX that ate my brain and other images

Before we can make all those cool looking websites we need to organize our stuff and more important, tell our webpages where to find it. You can read about it in the book starting on page 116.

Image formats are something you need to be comfortable with and easily identify. Know your jpeg and even mpeg from your gif and png. If you are looking for an open source image editor to work with GIMP has a large following and lots of tutorials.

Week 8 + MARCH 16|18

Officially the middle of the semester!

TUESDAY | Web Design

Before we start formally talking Design and the design process. we have 2 'stragglers' from images and graphics. SVG image files and gradients.

This is an .svg scalable vector graphic file. You can use it like any other image file. But it gets more interesting...

We can control an SVG with styles because the browser sees it as code.

The next thing is gradients. This is also code based. The easiest way to get going is to use a web tool.

Hosting a site on Github

I have previously asked you all to got to github and create an account using your school ID.

We are going to step through the basic process of downloading and setting up Github Desktop and making it possible for you to serve a website to the internet.

Officially the middle of the semester!

THURSDAY | Web Design

What is web design and how do we use it to figure out how to put a website together. Design is critical to understanding what you are making otherwise how do you know you are finished?

We are going to take a common design pattern the blog and use it to explore the design process. Below are some examples:

How do we quantify and map the common elements of all of these sites?

  • Capture your sites and mark them up
  • Outline their structure
  • Create wireframes

Here is a document on scanning images with your phone camera. If anyone wants to try my new recto graph paper and tell me what you think?.


Using the links I posted above or choose your own links to a different blog. I want you to create an outline of all the components needed for a blog. Remember to really think about everything. What is at the top and bottom of your page? How does a blog "work"? The file should be saved as txt or .pdf depending on what software you used to create it. Name the file blogoutline-yourname.txt or .pdf

Then with your written list I want you to try making a wireframe from it. A wireframe is taking your list and organizing it on a page visually. It does not represent what the page will finally look like. Here are some general examples examples: https://speckyboy.com/web-mobile-wireframe-sketch-examples/. I want you to hand draw a wireframe for a home page, and label the parts. A successful wireframe is when you look at it and you can begin to see the box models and structure of the html needed to create it.

Week 9 + MARCH 23|25

TUESDAY | Wireframes

We are going to keep talking about preparations for creating a website including wire framing and site maps. Here is my example for you to look at directly.


We are going to talk about basic CSS layout and getting our heads around basic concepts like:

  • positioning
  • overflow
  • float

Week 10 + MARCH 30|APRIL 1

THURSDAY | The Holy Grail

One of the most basic and common website layouts was one of the most difficult to achieve using traditional positioning methods. So it got the nicknamed the holy grail because so many people where on a quest to find it. With Flexbox we can finally make it. Here are 2 examples for you to use:

Week 11 + APRIL 6|8

TUESDAY | Wireframes & Project Talk

We will begin with a talk on wireframes and I want you to come to Thursdays class with 2 website links, one to a code camp or camp of some kind and the other a website you think is cool (yes I really wrote cool). We are going to talk about them and pull from them. This will help your design ideas.

We will also review making your master html starter file.

Just a little extra here are several videos where they demonstrate what a screen reader is like.

TUESDAY | Wireframes & Project Talk - Redux

Everyone should be coming to class with 2 website links.-Here is the list:

The Link List

I spoke about this Tuesday but with the interwebs scrambled I am making it due next week by Tuesday. I want you to have a placeholder page up on your github pages account. It does not have to be like mine . Please email me the link by Tuesday April 13th.

I have a link for you to include in your github site make the link Student Work I made the link an absolute so when you copy it, it will work from anywhere.

Week 12 + APRIL 13|15

TUESDAY | web work

Along with working on our projects, wireframes, github pages, and designs. We will be adding a few more things to our toolbox.

Week 13 + APRIL 20|22

TUESDAY | CSS Transformations

This is what I consider the most fun part of making websites, in CSS we can transform an element. If you are looking for an easy way of making it animated try using the :hover or :active and make the transformation dynamic.

THURSDAY | CSS Animation

True web animation is complex and a bit out of scope for this class. However it can be brought into your future work and deserves at least an introduction.

keyframe animation, the basic overview.

The syntax centered around the term keyframe. The term comes from traditional animation however it looks very different from the way it’s used there. The w3C has a basic run down.

Which is why Mozilla Firefox developer edition is the top web animation tool right now. They created a devtools challenge demo which we are going to use to talk about CSS animations.

One of the concepts the web and most other animation systems use is a curve to tweak the movement of an object.

The other area of web animations is SVG files can be manipulated and animated.

There is also something called the canvas which is a ‘programmatic’ space using javascript and its way beyond what we are covering in this class.

The most popular all in one animation package for the web is Greensock.

People to Know

If you are looking for information, talks, books and tutorials for animation these are the people to look at.

  • Rachel Nabors was part of the Mozilla team that did the dev challenge.
  • A long time web animation advocate is Val Head.
  • The absolute authority on all things SVG is Sara Soueidan.

Week 14 + APRIL 27|29

Last week of Classes

Please send me a current version of your site so I can help you.

Where do you go from here?

The foundations of HTML and CSS are part of everything else. This is a loose
list of concepts, systems and technologies you might want to explore as you improve
on your basics. It hopefully acts as a bit of a clarifier to the noise out there in Web Dev Land.

The whole front-end back-end thing. client-side is anything that happens in the web browser like HTML, CSS & javascript. Server-side is anything that gets processed before being made into front end code. We will be jumping back and forth.

CSS there are 2 pre-processor systems you might be interested in.
Sass and Less they do similar things.

Javascript is the 3rd side of the web pyramid. We call it the ‘interaction’ part. Web dev tools are all equiped with a javascript console. Javascript is designed to work with the DOM and can manipulate nodes in real time.

The original back end of the web, was called the common gateway interface or CGI usually a series of PEARL scripts.
Then came PHP. PHP is the first real server-side system to allow a webserver to use scripted logic (programming) and access to databases. There are lots of others like .asp/.net or .jsp or coldfusion!

Python is the new PEARL, and is eating everything slowly. Django is the back end system.

Then there is Ruby on Rails. Ruby is another programming/scripting language like Go or Erlang or whatever they call it.

The term you will hear a lot and will be part of the web for the long haul is API ‘application programming language’. It’s the newish way we let programs talk to each other over the network with a high degree of security. This allows you to tap into services from anywhere not just your server.

JavaScript as everything
Javascript the language is built-in to every browser. From there it has spread to become a stand alone system, a server side system and there is a push to put it just about everywhere.

Web Browser
- The original helper library is called JQuery it is a collection of scripts you can incorporate.
- The new standard for interface javascript is react.js maintained by Facebook.
- Node.js or ‘node’ is a javascript runtime that can run on a webserver, or on your computer. It has a package manager similar to Linux called npm. It is powering many of the current tools and systems.

JAMSTACK is an attempt to ‘simplify’ websites to static html and API connections.

Tool chains and pipelines. Just a workflow.

Jenkins, Grunt, Gulp etc. These are all tools to manage tools and processes. They in turn use systems like Node.js.

JSON,YAML & XML - these are supporting systems that you will come across frequently and people will assume you know what they are. XML is an old standard that is now influencing more than being. JSON Javascript Object Notation, has become the default method of packaging machine readable data into a file. YAML shows up as configuration or metadata in files to be processed or in config files for software.

Template languages are used in dynamic/CMS templates like Twig or Liquid.

FYI everyone will declare everyone else’s system that came before them ‘dead’ just smile and nod and use what is useful.
XKD has a meme.

The roadmap should be used as a guide not as Gospel.

Systems and networking people might want to dive deeper into web servers themselves. The current thing is to combine the modularity of Apache and the speed and efficiency of Nginx together.

The Project .001

As we move into layout and building and serving an actual website we need a 'project' to focus our efforts. You are tasked with creating a website for a fictional coding boot camp. We will be developing this from wireframe to finished website.

The Brief .002

When we start a project usually we refer to the beginning paperwork as the brief.

Assignment: Wireframe the Code Camp project. Using the brief create a set of wireframes either by hand or with a program. You can either send them as a zip archive of images or as a pdf document. Due bye April 9

The Design .003

Once you have a sitemap (pages of your site) and wireframes (page blueprints). You will want to start developing your design.

  • What typeface(s) and sizes do you want to use? Google Fonts
  • What is your color scheme? Adobe Color
    • background colors
    • typeface colors (body type, link colors etc.)
  • What images do you need? Commons Search
    • logos
    • content images
    • background images

The more of these questions you answer before you start to code pages the easier it will be. Start a css file and add code snippets and notes to it. Save it in your development space. If you need help with images and image editing reach out to me.

Final Project Hand In

The Code Camp website is due by Friday April 7. I am required to submit grades to the school Monday morning so there is no ‘wiggle room’.

You will email me the url of your website and in the email you will state “please grade this” so I know you are done and not asking for help.

I am grading on these things:

Does your site work?

  • all images show up and are not distorted
  • all links work as intended.
  • HTML is valid - meaning all the rules of structure HTML, head, body etc.
  • CSS is valid - you have the right number of brackets, you use ; etc.
  • The content is readable - readable lengths, spaces between objects. Colors do not conflict with readability.
  • This will be worth 50pts.