Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
November 1st – Quarter 2
Today’s Notes
- Today is an EHS B Day
- We are in a new Quarter – which means all grades from Q1 are stored
- Three weeks of classes until Thanksgiving Break
- Early Decision for Champlain College is November 15th – talk with me and Ms. Charron if you need help
9:40 Attendance
9:45 Monday Mail
9:50 New Unit
<title>Welcome Back to the Web</title>Over the next Quarter we are going to dive all in to Web Development & Design. To prepare we’ll use today to get set up with all of the tools we’ll need to 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 “Done” status will be tied to some assessment of your skills. Some of the topics we’ll cover include:
- Web Design refresher
- Basic HTML & CSS
- Media Management
- SVGs
- Advanced CSS
- Flexbox
- Flexbox Grids
- Calc() & Custom Properties (layouts)
- Custom Variables
- SASS
- CSS Only Menus
- Modular and Type Scales in Typography
- Mobile First Design
- Content Management Systems (CMS)
- WordPress
- Child Themes in WordPress
- Databases
- Vanilla JavaScript
- DOM Elements
- HTML/CSS
- Animations
- Event Listening
- Front End Frameworks
- Bootstrap
- React JS
- Others? Tailwind…
- GitHub
- Version Control
- Push/Pull
- Workflows
- Accessibility
- UX / UI & Usability Testing
Activity: Quick Review – Socrative Review
10:35 Mask Break
10:45 English with Ms. Yopp
11:35 Building Our Web Toolbox
Let’s look at our web developer’s toolbox together. To add some context, we’ll use a website to evaluate.
To assist you down the road – create a bookmark Folder – name it WebToolbox and bookmark the following:
HTML5 – Modern Web and Semantic Elements – What?
Semantic means relating to the meaning of words and phrases
ATOM code editor is the tool we’ll be using in class. Check to see that Atom is installed on your machine.
We can make it even nicer with some additional tools that make Atom more enjoyable to use and may even save you some time. Let’s add some packages:
- Open in Browser
- Atom-Beautify
- Color-Picker
- FIle-Icons
- Minimap
Assignment – The HTML Resume –
Now that your resume is nearly complete go through and mark up your document with our semantic HTML elements. You should be using the new elements (new to you). For more information on formatting check out W3C article.
<address>
<hr>
<section>
<header>
<footer>
<br>
What other elements can you use?
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<small> - Smaller text
<h1> - <h6>
<ul> <ol>, <li>
<a>
<span>
<a href="tel:123-456-789">123-456-789</a> for Phone Numbers!To complete this assignment, you will use a pencil and place your HTML markup directly on your resume. Don’t forget to close your tags.
12:15 Lunch
12:45 CodePen
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.
Task: Create a Codepen account. Then, go to challenges and take a look around. I think the Layouts from this past summer for Recipes is really interesting. Find something interesting.
Also, check out Spark – which is a weekly of posts and links all things web dev. Code included.
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 Sea of Thieves. Consult with W3Schools if you need a refresher on HTML elements. If you remember some CSS, add some of that too!
Drop a link to your CodePen in this dropbox form.
1:10 Mask Break
1:20 Production time and Guided Support
Your first assignment of the week has been assigned – HTML Resume (paper version)
CAWD Sweatshirt designs – Due Monday, November 8th.
Your First CodePen