Skip to content
Cawd Logo Cawd
  • Home
  • About
  • Assignments
  • Student Work
  • Resources
  • Contact

Week Ten, Day 1

Week Ten, Day 1

November 9th – November 13th

Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org

Week Ten

9:40 Attendance & Notes

  • Week Ten!
  • Q2 starts today – we are looking ahead and not back. So let’s enjoy this next quarter together.
  • Starting today No more Breakfast in CAWD. Lunch only, and anything you eat in the room will be between the 11:30 – 12:00. You are welcome to eat at mask breaks, but only outside. Eat before you get here, at the food Kiosks, in the hallway, wherever – but we are going to keep our masks on until we reach lunch.
  • Cawd room will be open in Q2 at 9:15am. If you come in at that time. Keep your mask on. Eat breakfast, snacks in the hallway or at one of the places listed above.
  • Head shot – need a nice image of you by next week

9:45 Showcase – Digital Sweatshirt

stage setting

Student Presentations – !
Let’s take a look Digital designs of the CAWD sweatshirt

10:00 A return to the Web

<html>
     <head>
          <title>Welcome Back to the Web</title>
     </head>
</html>

We are going to tackle several topics in Web Development & Design over the next several weeks and right through the winter holiday. So grab your code editor, your DOM inspector and let’s get coding.

You’ll see that I’ve set up a KanBan board with a selection of “ToDo’s”. This is our learning backlog. While not the entire list of topics, the backlog is a good overview of work that we are going to tackle.

Each “Completion” status will be tied to some assessment of your skills. Some of the topics we’ll cover include:

  • Web Design refresher
  • Basic HTML & CSS
  • Advanced CSS
    • Flexbox
    • Flexbox Grids
    • Calc() & Custom Properties (layouts)
    • CSS only menus
    • Modular & Type scales in typography
    • Responsive tables & forms
    • Responsive web forms
    • Mobile First Design
  • Content Management Systems (CMS)
    • Creating Child Themes in WordPress
    • Databases
    • Client Work – CTE Webpages & Blackboard CMS
  • JavaScript
    • DOM Elements
    • HTML/CSS
    • Animations
    • Event listening
  • PHP – Hypertext Preprocessor
    • Navigation / Headers/ Footers
    • Arrays
    • Variables
    • Forms handling and validation
  • Frameworks
    • Bootstrap
    • React JS
    • Others?
  • GitHub
    • Version Control
    • Push/Pull
    • Workflows

Activity: Quick Review – Link for PreAssessment

10:25 Mask Break

10:35 Academics

einstein cartoon

11:25 Lunch

pizza

12:00 Building Our Web Toolbox & HTML 5 Elements Review

Let’s look at our web developer’s toolbox together. To add some context, we’ll use this site to evaluate: https://greenmountainclockshop.com/

  • HTML Validation Service
  • CSS Validation Service
  • JavaScript Validation Service
  • WebAim Accessibility Checker
  • Developer Tools Overview
  • W3 Schools

HTML5 – Modern Web and Semantic Elements – What?

HTML5 Element Index from HTML5 Doctor

12:30 Customizing Atom Code Editor

atom code editor logo

ATOM code editor out of the box is pretty nice. We can make it even nicer with some additional tools that make Atom more enjoyable to use and may even save you some time.

While these shortcut tools make coding faster, if you want to really improve your codings skills and keystroke efficiency, I highly encourage you to code without shortcuts. Get to know the < / > keys without having to look and you might just be the next highly paid YouTuber.

Let’s grab some code to practice with from Vermont Road and Home.

1:05 Mask Break

1:15 The Head tag

The <head> tag of your document is a busy place. Lots of great information can be housed in that section that provides information to your browser.

Information that indexing browser bots and spiders can cache, keywords, character type, viewport information links to your style sheets and <meta> data. Here is a sample of what might go in a <head> element.

You can copy this snippet by accessing my repo on GitHub. You can also fork it and have a snippet for yourself.

<head>

  <meta charset="utf-8"> 

  <meta name="description" content="Write what this page is about">

  <meta name="keywords" content="create a list of keywords here">

  <meta name="author" content="Put the author's name here">

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <title>About Me</title>

</head>

Head Tag Slide for reference made on Google Docs

Activity: aboutme.html

In Atom:

  1. Create a new document with correct doctype
  2. Paste in your about me page
  3. Save your document as aboutme.html
  4. Create a new folder on your desktop. Call it Portfolio_Lastname.
  5. Inside should be your aboutme.html document
  6. Finish adding the basic html elements to your About Me page.

2:05 Dismissal

Cawd Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about Cawd:

Serving high school students interested in Computer Animation, Game Design, and Web Development in North Western Vermont.

Students continue at:

University of Vermont Ringling School of Art and Design Northeastern University Rochester Institute of Technology Concordia University

Students find careers at:

Dealer.com Union Street Media Rovers North Prudential Investments DockYard
Navigate to top of page