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

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

11:25 Lunch

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/

HTML5 – Modern Web and Semantic Elements – What?

12:30 Customizing Atom Code Editor

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:

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