Wednesday, March 30th

Class Hours: 9:40 – 2:05
Mr. Cronin

Notes

Welcome to Wednesday!
Today is a “White“. No CTE academic classes. Callbacks:
- Jasper to Math @ 12:45
- Ethan to Math @ 12:45
Certain EHS students will leave for lunch today at 11:55.
Things are going to get weird. Layouts are changing. Where you are sitting for the next week is changing. Change. (We are going to practice being ok with change – me included.)

9:40 Attendance and Article (start now, top 10 after lunch)

9:45 Web Design

Design elements that go screen wide, but content centered
Embedding YouTube videos in html in a valid way using iframe
Display fonts vs copy font
Review of Responsive Design

10:30 CAWD / Web Dev Website Redesign: Comedy Website

Don Curry is a touring comedian who makes his living being a comedian. He is not a web designer, and his current website (http://www.blackcomedycompetition.com/dondccurry.htm) has some issues we are going to fix for him. Often professionals are good at what they do, and not good at being a web designer, so that is where web designers and developers come in.

First, we are going to go through and take a look at some of the issues that his current site has:

Invalid Code
Non responsive
Structure (HTML) mixed with Style (CSS)
Layout of website created with tables, meaning it is very hard for Search Engines as well as Adaptive Screen Readers to “crawl” through the website and learn about it for SEO, and read it to visually impaired people.

It is an out of date design done poorly.

This week we are going to rebuild his landing page using current web trends, just as you would when working with client in the real world.

Content Requirements

Have a header and h1 that says “Don Curry”. Background design element that goes screen wide, text stays in channel. Use a display font from Google fonts for this that feels energetic, comedy like.
Home and About combine into a single link called “Home”. The rest of the main navigation remains. Background design element that goes screen wide, text stays in channel. Use dead links for the href’s (#).
Include Don Curry panel image below between navigation and page specific content.
All the information from About shows up on the homepage. Format attractively – not centered text.
Include the following YouTube video (by going to the YouTube page and embedding it) on page at the between the page specific content and the footer. https://www.youtube.com/watch?v=bXyEQvPyqDU
Include footer content from about page. Background design element that goes screen wide, text stays in channel.
Only coding a single page.

Technical Requirements

Valid Code
Responsive
Sans Serif font for copy (Display font could be serif)
Use a color palate generated from the panel image and Adobe Color with the dark mood. Use these colors + black and white as needed.

Create a folder called “comedy” with your file as “index.html”.

Remember you are only coding the updated homepage.

For reference, I am going to show an example that I coded on the lead machine.

Here is my HTML:

Here is my CSS:

There are MANY ways to code this correctly, but this is a version that I did before school this morning. Feel free to use as a primer and reference. It is 100% better that you code this on your own – especially Web Teams (hint), but if you need to use my code as a guide you can use it.

10:35 Morning Break (10 minutes)

10 Minutes break – you have to exit the room.
When the door near the TV is open, you are welcome to come back in.

10:45 CAWD / Web Dev Website Redesign: Don Curry

12:15 Lunch (30 Minutes)

No food in the room / eat in the Cafe.
You are welcome to return to the room when you have finished eating and work / hang out.

12:45 Attendance and Article (Top 10)

12:50 Mindfullness and Databases

1:10 Afternoon Break (10 minutes)

10 Minutes break – you have to exit the room.
When the door near the TV is open, you are welcome to come back in.

1:20 Afternoon Production

Comedy Website
- Folder called “comedy” with your file as “index.html”
DH29: Baseline Still Life
- “lastNameDH29jpg”
Week 29 Agency
- “(lastName)Agency_1.jpg” through “(lastName)Agency_3.jpg”
  - … or …
- “(lastName)Agency.mp4