Monday, November 13th

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

10:05 Today’s Notes & Attendance

Welcome to Week 12

Today is a CTE Red Day

Regular week with CCV on Friday then you are off
Vacation: November 18th – 26th – Have a nice Holiday break
Canned Goods – have some – let’s support the CEHS food drive
Presentation with CST and CAWD1 in Library on Augmented Reality from Husson University
LTA Photography Slideshows – Nick today, Ariel, Andrew Xavier pick a day this week
WebTool Box – check Wednesday/Thursday day plans from last week
Assignments, there will be several this week. Most are short. Stay on top or you might have work to do over your break (insert sad face)
BTW – if you see a lot of pink today, CTE is honoring a former Childhood Ed teacher who recently passed after battling cancer.

10:10 Monday Mail –

10:15 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. 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 Web

I love CodePen. Codepen is an online code editor and a social site for front end web developers to share their ideas and code with each other. Each month there are very challenging “Code Challenges”. I enjoy seeing what others make and how they organize and write their code. Very creative and great for generating ideas for your own projects.

We’ll use CodePen a lot as a quick place to try out some code ideas. The benefit is it is quick. Codepen does not require creating an HTML doctype, head tag, linking stylesheet or js. It all links. So we can quickly get to code/coding. I use this space a lot to play with ideas and test modules.

Task: Create a Codepen account. Then, go to challenges and take a look around. Also, check out Spark – which is a weekly of posts and links all things web dev. Code included. Find something interesting. Go down the rabbit hole.

Then, start coding by creating your very first CodePen. Call it Back to Basics

For your first “Pen” create a quick HTML document that includes a heading, paragraph and a list. You can code about anything you want – maybe your favorite streaming show or the loot you just captured playing Roblox. Consult with W3Schools if you need a refresher on HTML elements. If you remember some CSS, add some of that too!

When working in Codepen you do not need to use the html or head tags. They are already there. Think of codepen as an idea sandbox and if you are into AI, a good place to reveal and test the generated code.

After you create your Back to Basics be sure to:

Drop your Back to Basics link on this form.

Your 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 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

After the holiday break, 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 Thursday (end of day) of this week, November 16th.

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:…”