Skip to content
Cawd Logo Cawd
  • Home
  • About
  • Assignments
  • Student Work
  • Resources
  • Contact

Tuesday, October 22nd

Tuesday, October 22nd

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Tumultuous Tuesday

courtesy of Gary Larson – Far Side

Notes

  • If you have not done so already, Create a folder for Week 9
  • T Shirt Assembly tomorrow at 10am.
  • HTML5 Elements quiz on Thursday. If you review the work we have been doing in class you’ll do great. Let me know if you are lost.
  • Week 8 homework is due today by end of day. Check “what is due” to make sure you have correct filenames. See me if you are unsure.

9:40 Attendance & Article – Davin!

9:45 – 10:45 Why the <section> and <article> are useful HTML Elements

Before HTML5, web developers created a <div> to organize items on a webpage.

A <div> could have an ID or a class. ID’s can be used once. Classes can be used more than once. IDs and classes are helpful “handles” for CSS styling.

So, to minimize lots of divs and “divitis”, The <section> and <article> elements were added in HTML5. You don’t have to use them, however they are very useful.

The <section> element defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Your resume could be divided into sections as an example (Objective, Education, Work Experience, References, Awards)

Here is an example of the sections element in use from a page I built years ago. Use the inspector to see how each part of the page is divided into sections and how the sections are set up as IDs that aid in navigation.

The <article> element is a specialized kind of <section> in that it is independent, self contained block of related content.

The weather widget below is self contained and is just one kind of example of an <article>. In this case, one article houses a bunch of other articles. Tip, don’t think of the <article> element as a literal article.

Weather forecast for Burlington

October 22nd

Cloudy

October 23rd

Cloudy chance of meatballs

October 24th

Heavy meatballs

<article class="forecast">
    <h1>Weather forecast for Burlington</h1>
    <article class="day-forecast">
        <h2>October 22nd</h2>
        <p>Cloudy</p>
    </article>
    <article class="day-forecast">
        <h2>October 23rd</h2>
        <p>Cloudy chance of meatballs</p>
    </article>
    <article class="day-forecast">
        <h2>October 24th</h2>
        <p>Heavy meatballs</p>
    </article>
</article>

Activity: We are going to tackle several coding on paper exercises. The focus is to identify how content is organized on a page. Follow instructions provided to you.

Additional Practice with <aside> – if you want to play around with my CodePen example, here is the link for you.

10:45 Break (15 Minutes)

coffee and cookies

11:00 – 11:50 Physics – Stay in our Room!

cartoon Graphic of Albert Einstein

Class meets at 11am. Go to class immediately from break. When class is over, you will head to lunch.

11:50 – 12:20 Lunch (30 Minutes)

pizza

12:20 – 12:45 Literacy in Focus

image of book covers

Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.

12:45 A/B Day Project – Halloween

Pumpkin Illustration
Halloween is next week!

Over the next several afternoons you are going to build a Halloween themed website and house it in your Week 9 folder. Reintroducing yourself to HTML and CSS is your primary focus. Good clean commented and validated code.

The specifics: Create a two page Halloween website. It could include scary stories, a collection of carving templates, information about costumes, a guide for planning a Halloween party, tips or steps to creating your own costume, recipes for Halloween cookies you get the idea…. Must haves:

  • Two Pages, using the following tags at least once:
    • <head> tag with meta data
    • <header>
    • <footer>
    • <nav>
    • <section>
    • <article>
    • <aside>
    • <ul>
    • <figure> and <figcaption>
    • <a> (anchor link to something)
From W3 Schools

Some Tips to help you: Brainstorm and collect ideas, create a KanBan board to identify your “to do” list, sketch out a quick wireframe, write all your content and collect your assets first, design and code last.

Keep this simple!

Validate your HTML and your CSS

Stay Organized: Create a folder inside Week 9 for this website. Call it Halloween. Inside that folder create one for images and one for your CSS stylesheet.

If you need help, consult with W3 schools. Amazing resource to help you with your HTML coding. Do not use any templates, write your own code.

2:00 Dailies –

Link to Dailies and Link to Responses

2:05 Dismissal

Cawd Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about Cawd:

Serving high school students interested in Computer Animation, Game Design, and Web Development in North Western Vermont.

Students continue at:

University of Vermont Ringling School of Art and Design Northeastern University Rochester Institute of Technology Concordia University

Students find careers at:

Dealer.com Union Street Media Rovers North Prudential Investments DockYard
Navigate to top of page