1. Syllabus

2. Course Outcomes

3. Lab Rules

4. Course Info Slides

5. Google Folder Setup

1. MDM Curriculum

2. W3Schools (Review & Learning Website)

3. Runestone Web Fundamentals

1. VS Code Download Instructions

2. VS CodeDownload (Actual Download Link)

3. Accessing Your Folder

4. Settings & Live Server

With the advent of CMS (Content Management Systems) and AI (Artificial Intelligence) - both of which allow you to create websites without needing to know anything about programming/coding - it seems like learning HTML & CSS seems unnecessary - like a dying language.

Here's my reasons why I do not feel this way

• With the advent of Auto-pilot, do we feel like pilots no longer need to know how to manually fly an airplane?

• Introduces students to coding - a simplified version of programming that doesn't involve the problem solving and math that we generally think of with programming.

• Learning HTML & CSS is the best intro to learning to code.

  • It really helps students understand the process of taking what they want to add to a web page, and substitute the actual code for it. 

    • Paragraphs --> <p>

    • Ordered list --> <ol>

    • List items --> <li> 

  • Also introduces students to syntax

• HTML/CSS jobs are very much not dead.

  • People who develop themes for Wordpress have to know HTML, CSS, and PHP.

  • People who develop widgets for Wordpress have to know HTML, CSS, and PHP.

  • Content managers do note get paid as well as web developers.

• Knowing HTML/CSS gives you power over CMS' so that you can learn how to manipulate the pages - on specific pages (through the WYSIWYG) or through your own manipulation of the HTML/CSS theme.

• Providing opportunities for learning coding/programming in an atypical way opens opportunity for more diversity. I get more girls, trans/nonbinary, and students of non-white ethnicities to join my computer science program through Web development than through other coding classes.

Slides - The Web - Brief History

Youtube - The 90's Kids Guide to the Internet

Youtube - Code.org - What is the Internet

Youtube - How the Internet Works in 5 Minutes

1. Video - HTML in 100 seconds

W3Schools Topics

1. HTML Tutorial Home

2. HTML Introduction Worksheet

3. HTML Editors

4. HTML Basics Worksheet 

5. HTML Elements

6. HTML Comments

7. HTML Head Element

8. HTML Page Title

9. HTML Headings

10. HTML Paragraphs

11. Text Formatting

TAG

1. HTML Quotes & Citations

2. HTML Computer Code Elements

3. HTML Encoding (Character Sets)

4. HTML - Inline Styles

W3Schools Topics

1. HTML Attributes

2. HTML Images

3. HTML Links

4. HTML Link Bookmarks (Jump To...)

5. HTML Youtube

TAG

1. HTML Image Maps

2. HTML Picture Element

3. CSS Image Gallery

4. CSS Image Sprites

5. CSS Image Masking

6. HTML Multimedia

7. HTML Video

8. HTML Audio

W3Schools Topics

1. HTML Lists

2. HTML Unordered Lists

3. HTML Ordered Lists

TAG

1. HTML Description Lists

W3Schools Topics

1. HTML Tables

   1. HTML Table Borders (Internal Style)

   2. HTML Table Sizes

   3. HTML Table Headers

TAG

1. HTML Table Colspan & Rowspan

2. HTML Table Colgroup

1. Slides - Intro to CSS

2. Video - CSS in 100 Seconds

3. Website - HTML Color Codes

W3Schools Topics

1. CSS Tutorial Home

2. CSS Introduction

3. CSS Syntax

4. CSS How To

5. CSS Comments

6. CSS Colors

   1. CSS HEX Colors

   2. CSS Backgrounds

   3. Full Color List by name

7. CSS Text

   1. CSS Text Alignment (center, left, right)

   2. CSS Text Decoration (underline, line-through, overline, none)

   3. CSS Text Shadow

Challenges

1. Quiz - CSS Intro Quiz

2. Web Challenge - Colorful Fun

TAG

1. CSS RGB Colors

2. CSS HSL Colors

3. CSS Transparency

4. CSS Advanced Color

5. CSS Text Transform (Uppercase, Lowercase, Capitalize)

6. CSS Text Spacing

W3Schools Topics

1. CSS Fonts/Font Family

   1. CSS Web Safe Fonts

   2. CSS Font Fallback

   3. CSS Font Style

   4. CSS Font Size

   5. CSS Font Shorthand

2. CSS Google Fonts

3. CSS Font Pairing

TAG

1. CSS Units

2. CSS Icons

3. HTML Entities

4. HTML Symbols

5. HTML Emojis

CSS Training Game - CSS Diner

W3Schools Topics

1. CSS Selectors

2. CSS Links

3. CSS Background Images

   1. CSS Background Repeat

   2. CSS Background Shorthand

4. CSS Float

   1. CSS Clear Float

   2. CSS Float Examples

*** Mr. Birkel only recommends floating images & boxes that other text is supposed to flow around.

5. CSS Borders

   1. CSS Border Width

   2. CSS Border Color

   3. CSS Border Sides

   4. CSS Border Shorthand

   5. CSS Rounded Borders

Challenges

• Wanted Poster

TAG

1. HTML Favicons

2. CSS Background Attachments

W3Schools Topics

1. HTML Lists (Review)

2. HTML Unordered Lists (Review)

3. HTML Ordered Lists (Review)

4. CSS Selectors (Reminder)

5. CSS Lists

Challenges

1. Web Challenge - Simple Bio w/ CSS

W3Schools Topics

1. HTML Tables(Review)

   1. HTML Table Borders (Review)

   2. HTML Table Sizes (Review)

   3. HTML Table Headers

   4. HTML Table Padding & Spacing

   5. HTML Table Styling

2. CSS Selectors (Reminder)

3. CSS Tables/Table Borders

   1. CSS Table Size

   2. CSS Table Alignment

   3. CSS Table Style

   4. CSS Table Responsive

Challenges

TAG

1. HTML Table Colspan & Rowspan

2. HTML Table Colgroup

3. 
   

W3Schools Topics

1. HTML Block & Inline Elements

2. HTML Class Attribute

3. HTML ID Attribute

4. CSS Selectors (Reminder)

5. CSS Display

6. CSS Margins

   1. CSS Margin Collapse

7. CSS Padding

8. CSS Height + Width

9. CSS Box Model

10. CSS Rounded Borders

11. CSS Shadows

12. CSS Box Shadow

Challenges

1. Web Challenge - Profile Card

TAG

1. CSS Outline

   1. CSS Outline Width

   2. CSS Outline Color

   3. CSS Outline Shorthand

   4. CSS Outline Offset

2. CSS Position

3. CSS Z-Index

4. CSS Overflow

Copyright

1. Copyright And Creativity Lessons

2. Creative Commons - Free resources

   1. Free Speech, Copyright, and Fair Use Poster

   2. 10 Things you should know about Copyright

3. Creative Commons Media Search

How the Web Works

1. Video - What is the Internet

2. Video - The Internet - Wires, Cables, and Wifi

3. Video - The Internet - IP Addresses & DNS

4. Video - The Internet - Packets, Routing & Reliability

5. Video - The Internet - HTTP & HTML

6. Video - The Internet - How Search Works

W3Schools Topics

1. HTML URLs

2. HTML vs XHTML

Challenges

Review: (Under Construction)

W3Schools Topics

1. HTML Style Guide

Challenges

Part 1 - Multiple Choice Quiz

Part 2 - Recipe Website

HTML: Hyper-Text Markup Language. The "What" of your website - defines what data represents 

- "This is a level 1 heading, this is an image, this is a table, ..."

• Div Element - Generic Block Item - used to group things or to create a special-purpose block item

• Span Element - Generic Inline Item - Used to group inline content (typically text) and to give it a defined purpose.

• Block Elements

  • Div: Group element

  • Text: Headings & Paragraphs

  • Links: Anchor Tags - must have an href. Include target="_blank" if it's linking to an external site

  • Lists: ul = unordered list, ol = ordered list, li = list item

  • Tables: Tables contain Table Rows (tr). Table Rows contain Table Headings (th) or Table Data (td)

• Inline Elements

  • Span: group element (inside text)

  • Images: img - must have a src & alt - These can be changed to block level items in css with "display: block;"

  • Strong: Used to imply visual importance - "Computer Science is the study of solving problems.". Default style: bold

  • Emphasis (em): Used to imply vocal importance - "This is my favorite snack". Default style: italicized

CSS: Cascading Style Sheet. The "How it looks" of your website. Define rules for how elements should be styled.

- "The Paragraph should be red, with a solid black border around it. 15px separating the border and the text."

Your tasked with created a 2-page website on 2 of your phobias, each phobia being a different HTML page.

• If you don't think you have phobias, pick phobias you know other people have such as Spiders (arachnophobia) or heights (acrophobia).

Starter Code is below

• HTML Layout Starter Code

• CSS Layout Starter Code

In each file you'll need to update information.

• HTML (2 pages, so you'll have to do this twice)

  1. Change the Title & H1 to reflect the phobia you're picking

  2. Update the links to point the HTML documents to their pages.

  3. Change the main section to have:

     • 3 Headings appropriate for a page on this phobia (look to Wikipedia for heading ideas if you can't think of any)

     • 3 paragraphs (1 per heading) discussing this phobia

     • 1 image related to this phobia

  4. Change the Footer to contain your last name and the current year - Example for Dough Smith: ©Smith 2024;

• CSS (1 page, that both HTML files link to)

  1. Adjust the background colors of everything to look nice

     • Consider using a monochromatic color scheme - Pick 1 focus color, like blue, and make everything blues & grays (including black & white)

  2. Add margins & padding to make everything spaced nicely

     • Margins space elements away from each other

     • Padding pushes elements inside their boxes (space between edge of container and the text)

     • You may need to add selectors for headings and paragraphs and give them margin-top or margin-bottom to  space paragraphs and headings.

  3. Add any other CSS styles you'd like

     • Text Color changes

     • Shadows (box-shadow or text-shadow)

     • Font changes

     • etc.

  4. Check out GeeksForGeeks How to Create A Navbar with Flexbox? to see how to make a horizontal navigation.

Article - Figma - How To Wireframe

Article: Webflow - Color Theory for Designers: A Beginner's Guide

Article: Flux Design -  How to Strategically Use Color In Website Design

Article: Elementor.com - Color Theory Fundamentals Every Web Designer Should Know

HTML Color Picker

1. Video - Flexbox in 100 Seconds

2. Website - A Guide to Flexbox

3. Flexbox Training Game - Flexbox Froggy

4. Flexbox Training Game - Flexbox Defense

5. Flexbox Poster

W3Schools Topics

1. CSS Flexbox

   1. CSS Flex Container

   2. CSS Flex Item

   3. CSS Flex Responsive

Practice - 3 Column Preview Card

Challenges

Web Challenge - Product Preview Card

W3Schools Topics

1. CSS Selectors

   1. CSS Combinators

   2. CSS Pseudo-Classes

   3. CSS Pseudo-Elements

   4. CSS Attribute Selectors

2. CSS Specificity

3. Full CSS Selectors Reference

TAG

1. CSS Important

W3Schools Topics

1. CSS Box Sizing

2. HTML Layout Elements & Techniques

3. HTML Semantic Elements

4. CSS Website Layout

5. CSS Align

6. CSS Navigation

   1. CSS Vertical Nav

   2. CSS Horizontal Nav

CSS-Tricks - "How to Section your HTML"

Challenges

Web Challenge - Quick Code - Career

TAG

1. HTML Responsive Web Design

2. HTML Inline-Block

3. CSS Dropdowns

Using the HTML & CSS Layout Template Code, Pick an animated or game character that you like and make a website tailored towards that character.

• Change colors to suite your preference.

• Add content to the appropriate containers.

• Add Padding to containers to push content in.

• Add Margins to elements to push them away from other elements.

• Suggested changes (and order of areas to focus on)

  • Header - add an h1 with the name of your character. Play with the CSS until you're satisfied with the look

  • Footer - Add a paragraph with &copy;______2023 (replace the underline with your last name). Play with the CSS until you're satisfied.

  • Main - Add h2's and paragraphs to fill with the content you want to write about. All the content should be specifically about this character. Topics to consider are basic info, background or origins, abilities, relationships, etc. Play with the CSS until you're satisfied.

  • Aside - Add any content that would be side-content for this character. Side-content would be trivia, fun facts, character data/attributes, relation to other characters, etc.

  • Nav - add links to other pages. 1 link could be to an external site (like the wiki page for this character), but other links should be internal for other topics related to this character (for example, if the character was Wolverine, I could have internal pages for X-Men & Professor X). Each of these external links should be connected to a page that uses the same layout and stylesheet, but can simply contain the title of the page (h1 in header) and the article's content can just read "Under Construction".

• CSS to really focus on for content improvements

  • background-color & color (consider contrast)

  • margins (separate elements - push content apart)

  • padding (separate content from edges - push content in)

  • width

  • min-height (should be a little smaller than what the content might hold)

  • "margin: auto" or "margin: [top-bottom value] auto" will center a box in its container.

  • "display: flex" given to a parent object changes the flow of objects in a container to be left-to-right instead of top-to-bottom.

  • box-shadow & text-shadow

  • Clear your default margin's and padding:

*

{

  margin: 0px;

  padding: 0px;

  box-sizing: border-box;

}

Yoko's Kitchen

Endangered Animal Website

CMS vs HTML

Build a Google Site

CMS Survey

W3Schools Topics

Forms

1. HTML Forms

2. HTML Form Attributes

3. HTML Form Elements

4. HTML Input Types

5. HTML Input Attributes

6. CSS Forms

Graphics & Geo

1. HTML Canvas

2. HTML SVG

3. HTML Geolocation

Math

1. CSS Math Functions

Challenges

TAG

1. HTML Input Form* Attributes

W3Schools - HTML Exercises

Challenges

Your final project will be provided to you 2-3 weeks prior to the end of the semester (finals week + 1-2 weeks).

2025 S1 Final

All finals assess your skills with the following:

• HTML content - can you build an HTML page with valid tags and correct syntax? Can it pass an HTML Validator?

• CSS Content - can you use CSS selectors, CSS properties, and CSS values to manipulate the look of your webpage?

• Design - can you demonstrate good design skills, making use of the Box Model, Flexbox, and Semantical elements (like header, footer, main, nav, etc.)?

Each final will have specific things I'm looking for and they may change from semester to semester.

The theme for your final project will be different every year. The theme helps me ensure that students aren't using other student's work from previous years.

Past Finals:

• Final Restaurant

• Candy bar

• Endangered Animal

• Food Blog

• Future Career

Website - Cyber Career Exploration

• What data is collected?

W3Schools - Cards

W3Schools - Flip Cards

W3Schools - Profile Card

W3Schools - Product Card

Task: Design your own cards on a career of your choosing. You're welcome to look at code from any of these W3School examples, but don't copy & paste code. You're expected to understand what each line of code is doing in the HTML & the CSS.

Video Tutorial - Hyperplexed - I've Found the Optimal Website Header...

• Replit's "Make APersonal Website" Tutorial

• AccessComputing curriculum

• Mozilla Developer Tutorials HTML, CSS, Accessibility

• codedex.io

• CS Discovers - Web Development Unit

• Kevin Powell Youtube

• The Coder Coder Youtube

• Bring Your Own Laptop Youtube

• CSS Tricks

• Frontend Mentor Challenges

• Compuscholar

• Zombie Thwacking & Undead Institute