Tuesday, November 12th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Scotty – you are dismissed at 2:30pm today

Field Trip to WCAX on Thursday to learn about jobs in media and motion graphics. Please dress accordingly. No pajamas please.

Programming in CAWD2 will end at 11:40 – we will have lunch.
We will need to be back in CAWD at 12:10 and will travel by bus with CAWD
We are being picked up from WCAX at 2:00, so as you can imagine, you won’t be getting to your afternoon class on time. You will want to email your teacher now if this impacts you. Draft a professional email. Does this impact you?

10:10 Web Dev

Objective: My goal with you and web coding is to get you to understand what your code is doing. If you understand the code, then you can build in shortcuts, get creative and design some truly outstanding web applications. You can also take on clients and make some money. Most people with a business have a website. Most of those people don’t know how to manage, maintain and update/change their websites. But you can…

A Note from Mr. B: A word on AI. I’ve been experimenting with ChapGPT & Gemini. If I am really specific about what I want, the AI does a pretty solid job of delivering the code I need. The challenge though is understanding what you want to ask it and then what the code is doing so you can change it on your own.

For now, I am asking you not use AI to do the work over the next couple of weeks. I want to build your skill set around HTML, Javascript and CSS. However, we will use the AI to assist us and learn what it can do during this unit.

What we know:
HTML = Structure
CSS = Style
Javascript = Interactivity

For Review – Let’s start at the beginning
Below is a sample of what might go in the <head> element and how to create the start of your HTML page

<!DOCTYPE html>
<html lang="en" dir="ltr"> <!--Means language, English, Direction, Left to Right -->

<head>
     <meta charset="UTF-8">
     <title>Title of your Page Here</title>
     <meta name="description" content="What is your site about">
     <meta name="keywords" content="what are keywords in your site">
     <meta name="author" content="who owns or authors this page">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<!-- The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. -->

</html>

Head Tag Slides for Reference

10:50 Break

11:00 English with Mx. Yopp

11:50 – 12:25 – Resume Blast

Our first Web Assignment – Simple HTML coding – no CSS!

Link to the list of Semantic HTML Elements and the HTML tags listed alphabetically

Project #1 Your HTML 5 Resume

Create a New Folder on your Desktop. Name it WebPortfolio
Create a new html document. Name it resume.html

Take your Resume (WHEN IT IS COMPLETE) and mark up your document with HTML tags. I’ll demo for you.
Do this first! (You might want to use a printed version, ask me to print if you do not have one)

After you mark up a paper version of your resume, translate that into an updated HTML5 resume.
Don’t worry about styling – No CSS right now! I don’t want to see any styling. Just get a digital markup of your most recent resume that you just finished. If you resume is not finished, and be sure to incorporate the edits I’ve handed you.

This resume will be part of your senior portfolio we will be building as a class and for you CVU students, this is an extra bonus – because it is a requirement for your school.

You should use exactly zero styling. This exercise is all about using raw HTML. We will make it look pretty later with CSS. Also, your html elements have some baked in styles.

Commenting is good practice. Comment out each section with a section start and end. Just for practice.
Remember your markup should be structured semantically using proper tags and indentation levels.
You might want to use some classes and/or ids – helpful when styling and for JS

In the coming weeks, I will show you how to FTP your WebPortfolio folder with your resume.html to the your very own server so it can be published as a real website.

Did you check the HTML Validation service? You should!

This assignment is due by Friday (of the following week), November 22nd.

Tips:

Create a header with a big ol’ h1 stating your name
Add an address tag with your address
Add an anchor tag with your email and an href with mailto:your@email.here
Create and use the section element for each section of your resume (Goals, Work Experience, Skills)
Deploy the best heading elements that match your resume, bulleted lists, bold, italics, etc…
Add a footer to the bottom of your resume. Put similar information in the footer as you did the header only make it smaller by using tags that print normal sized text.
Don’t forget to make your email link clickable with a href=”mailto:…”
Each of your semantic HTML tags will provide their own baked in styling.