November 9th – November 13th
Class hours: 9:40 – 2:05
Mr. Bohmann | firstname.lastname@example.org
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 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
- Client Work – CTE Webpages & Blackboard CMS
- DOM Elements
- Event listening
- PHP – Hypertext Preprocessor
- Navigation / Headers/ Footers
- Forms handling and validation
- React JS
- Version Control
Activity: Quick Review – Link for PreAssessment
10:25 Mask Break
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
- WebAim Accessibility Checker
- Developer Tools Overview
- W3 Schools
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
- 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.