Web Design

Lesson Plans


Monday is end of 9 Week Grading Period

  • All Module #1, #2, #3, #4 Assignments are due by Monday at 2:09 pm.

C4 Lab: Designing Web Pages with CSS

Assignment:

10/16 Assignment – Quizzes

  • MindTap Chapter #4 Quiz
    Canvas Chapter #4 Vocab Quiz
    • Access Code = Go to Canvas for Access Code

C4 In the Lab 1: Creating a Style Sheet for Strike a Chord


PSAT Day and Early Release Day


C4 Lab: Designing Web Pages with CSS

Assignment:

C4 In the Lab 1: Creating a Style Sheet for Strike a Chord

  • See Canvas for Lab #1 Code Help

Friday – Quizzes

MindTap Chapter #4 Quiz
Canvas Chapter #4 Vocab Quiz


DAY #2 FOR APPLYING YOUR KNOWLEDGE AND ANALZYING SECTIONS

Complete in Chapter #4 Code Section

  • C4 Apply Your Knowledge: Creating a Style Sheet to Style a Webpage
  • C4 Analyze, Correct, Improve: Correcting CSS Style Rules
  • C4 In the Lab 1: Creating a Style Sheet for Strike a Chord

C4 Apply Your Knowledge: Creating a Style Sheet to Style a Webpage

C4 Analyze, Correct, Improve: Correcting CSS Style Rules

C4 In the Lab 1: Creating a Style Sheet for Strike a Chord


DAY #2 FOR APPLYING YOUR KNOWLEDGE AND ANALZYING SECTIONS

Complete in Chapter #4 Code Section

  • C4 Apply Your Knowledge: Creating a Style Sheet to Style a Webpage
  • C4 Analyze, Correct, Improve: Correcting CSS Style Rules

C4 Apply Your Knowledge: Creating a Style Sheet to Style a Webpage

Hints:

  • Task #1 – Simple update to comment in task #1
  • Task #2 – Use <ul> instead of <p>
  • Task #3
    • Hover over the … to the right of the css folder you created and create the styles.css file.
    • Comment in styles.css – Use Author,  File Name, and Date for the comment section
  • Task #4 – Paste <link rel=”stylesheet” href=”css/styles.css”> in correct location inside head section
  • Task #5, Task #6, task #7, Task #8 – Follow instructions and use W3 Schools if you run into coding issues
  • Task #9 – Remember that create a div it must start with a # and a class must start with a period ( . )
  • Task #10 – Follow instructions and use W3 Schools if you run into coding issues
  • Task #11 – Add the class to following code <a href=”https://www.w3.org/Style/CSS/members” class=”external” target=”_blank”>

C4 Analyze, Correct, Improve: Correcting CSS Style Rules

Hints:

  • Clean Up CSS Styles sheet so it is easier to find correct code. Format sections correctly.
  • Task #2 – <link rel=”stylesheet” href=”css/styles.css”>
  • Task #3 – Use the key below to help you with this task
    • Student Name: firstname lastname
    • File Name: styles.css
    • Date: 01/01/2020
  • Task #7 – To clear float you use clear: left;

Complete in Chapter #4 Code Section

  • C4 Apply Your Knowledge: Creating a Style Sheet to Style a Webpage
  • C4 Analyze, Correct, Improve: Correcting CSS Style Rules

C4 Apply Your Knowledge: Creating a Style Sheet to Style a Webpage

Hints:

  • Task #1 – Simple update to comment in task #1
  • Task #2 – Use <ul> instead of <p>
  • Task #3
    • Hover over the … to the right of the css folder you created and create the styles.css file.
    • Comment in styles.css – Use Author,  File Name, and Date for the comment section
  • Task #4 – Paste <link rel=”stylesheet” href=”css/styles.css”> in correct location inside head section
  • Task #5, Task #6, task #7, Task #8 – Follow instructions and use W3 Schools if you run into coding issues
  • Task #9 – Remember that create a div it must start with a # and a class must start with a period ( . )
  • Task #10 – Follow instructions and use W3 Schools if you run into coding issues
  • Task #11 – Add the class to following code <a href=”https://www.w3.org/Style/CSS/members” class=”external” target=”_blank”>

C4 Analyze, Correct, Improve: Correcting CSS Style Rules

Hints:

  • Clean Up CSS Styles sheet so it is easier to find correct code. Format sections correctly.
  • Task #2 – <link rel=”stylesheet” href=”css/styles.css”>
  • Task #3 – Use the key below to help you with this task
    • Student Name: firstname lastname
    • File Name: styles.css
    • Date: 01/01/2020
  • Task #7 – To clear float you use clear: left;

SUB TODAY – I will be in the building but I am working with IVY TECH on DUAL CREDIT for LCHS

Chapter #4: Designing Web Pages with CSS

  • READ:  Chapter 4 Preview
  • READ:  Chapter 4 Read
    • ASSIGNMENT:  Create a Google Doc and Title it – Your Name, Ch #4 Vocabulary – DO NOT SHARE.
      • Copy/Paste Highlighted Vocabulary words and definitions into the google document

Chapter #4:  Chapter Instructions

  • This is a continuation of chapter #3 textbook instructions.  Please email me if you feel your chapter instructions are not correct.  I will help to make sure you are able to fix your code.
  • You should have created a folder somewhere on your computer.  I would continue to suggest that you use a flash drive for this course.  
  • Folder Contents when finished with the Chapter #4 Textbook Instructions
    • Root Folder/Main Folder = fitness
      • folder = css
        • file = styles.css
      • folder = images
        • image = forward-fitness-logo.png
        • image = hero-image.jpg
        • image = people-with-weights.jpg
        • image = people-workingout-machines.jpg
        • image = personal-trainer.jpg
      • folder = media
        • folder is empty
      • folder = scripts
        • folder is empty
      • file = about.html
      • file = contact.html
      • file = index.html
      • file = template.html

Chapter #4 Instructions Assignment

  • ASSIGNMENT:  Complete NUMBERED instructions in textbook.
    • DO NOT submit your work today

Chapter #3: Enhancing a Web Site with Images

9/28/2020 Assignment:  Catch Up Day!!

  • Chapter #3 Code
    • C3 Apply Your Knowledge: Add Images, Lists, and Links to a Webpage
    • 3 Analyze, Correct, Improve: Adding Elements to an HTML Webpage
    • C3 In the Lab 1: Adding Links and Images for Strike a Chord
    • C3 In the Lab 2: Adding Links and Images for a Wildlife Rescue
  • Chapter #3 Apply
    • Chapter #3 Quiz

C3 Lab #1 Data Files – See Canvas for Downloads and Keys

C3 Lab #2 Data Files – See Canvas for Downloads and Keys


Chapter #3: Enhancing a Web Site with Images

9/24/2020 Assignment:  Catch Up Day!!

  • Chapter #3 Code
    • C3 Apply Your Knowledge: Add Images, Lists, and Links to a Webpage
    • 3 Analyze, Correct, Improve: Adding Elements to an HTML Webpage
    • C3 In the Lab 1: Adding Links and Images for Strike a Chord
    • C3 In the Lab 2: Adding Links and Images for a Wildlife Rescue
  • Chapter #3 Apply
    • Chapter #3 Quiz

Chapter #3: Enhancing a Web Site with Images

9/22/2020 Assignment:

  • Chapter #3 Code
    • C3 In the Lab 2: Adding Links and Images for a Wildlife Rescue
  • Chapter #3 Apply
    • Chapter #3 Quiz
  • Canvas
    • Chapter #3 Vocabulary Quiz – Only Available During Class

Chapter #3: Enhancing a Web Site with Images

9/18/2020 Assignment:

  • Chapter #3 Code
    • C3 Analyze, Correct, Improve: Adding Elements to an HTML Webpage
    • C3 In the Lab 1: Adding Links and Images for Strike a Chord

9/16/2020 Assignment:

  • Chapter #3 Review Questions – Activation Code = chapter3
  • Chapter #3 Code
    • Applying Your Knowledge – Add Images, Lists, and Links to a Webpage

9/14/2020 Assignment

  • Chapter 3 Preview
  • Chapter 3 Read
    • ASSIGNMENT:  Vocab
    • ASSIGNMENT:  View and Complete 12 Activities (Not Required)
    • ASSIGNMENT:  Complete NUMBERED instructions in textbook.
      • SUBMIT documents in Canvas Assignment
        • index.html
        • about.html
        • contact.html

Chapter #3: Enhancing a Web Site with Images

9/16/2020 Assignment:

  • Chapter #3 Review Questions – Activation Code = chapter3
  • Chapter #3 Code
    • Applying Your Knowledge – Add Images, Lists, and Links to a Webpage

9/14/2020 Assignment

  • Chapter 3 Preview
  • Chapter 3 Read
    • ASSIGNMENT:  Vocab
    • ASSIGNMENT:  View and Complete 12 Activities (Not Required)
    • ASSIGNMENT:  Complete NUMBERED instructions in textbook.
      • SUBMIT documents in Canvas Assignment
        • index.html
        • about.html
        • contact.html

Chapter #3: Enhancing a Web Site with Images

  • READ:  Chapter 3 Preview
  • READ:  Chapter 3 Read
    • ASSIGNMENT:  Create a Google Doc and Title it – Your Name, Ch #3 Vocabulary – DO NOT SHARE.
      • Copy/Paste Highlighted Vocabulary words and definitions into the google document
    • ASSIGNMENT:  Complete NUMBERED instructions in textbook.
      • SUBMIT documents in Canvas Assignment
        • index.html
        • about.html
        • contact.html

Chapter #2: Building a Webpage Template with HTML 5

9/10/2020 Assignment:

  • Chapter #2 Review Questions – Activation Code = chapter2
  • Chapter #2 Code
    • Applying Your Knowledge – Creating a Basic HTML Template
    • Analyze, Correct, Improve:  Validating an HTML page
    • Lab 1: Creating a webpage for strike a chord
    • Lab 2:  Creating a webpage for a Wildlife Rescue
  • Chapter #2 Apply
    • Chapter #2 Quiz

Chapter #2: Building a Webpage Template with HTML 5

9/8/2020 Assignment:

  • Chapter #2 Review Questions – Activation Code = chapter2
  • Chapter #2 Code
    • Applying Your Knowledge – Creating a Basic HTML Template
    • Analyze, Correct, Improve:  Validating an HTML page
    • Lab 1: Creating a webpage for strike a chord

Chapter #2: Building a Webpage Template with HTML 5

9/1/2020 Assignment

  • Chapter 2 Preview
  • Chapter 2 Read
    • ASSIGNMENT:  Vocab
    • ASSIGNMENT:  View and Complete 3 Activities
    • ASSIGNMENT:  Complete NUMBERED instructions in textbook.
      • DO NOT SUBMIT – Save Document for later

9/3/2020 Assignment:

  • Chapter #2 Review Questions – Activation Code = chapter 2
  • Chapter #2 Code Assignments
    • Applying Your Knowledge – Creating a Basic HTML Page

Day #1

Chapter #2: Building a Webpage Template with HTML 5

  • READ:  Chapter 2 Preview
  • READ:  Chapter 2 Read
    • ASSIGNMENT:  Create a Google Doc and Title it – Your Name, Ch #2 Vocabulary and SHARE it with me.
      • Copy/Paste Highlighted Vocabulary words and definitions into the google document
    • ASSIGNMENT:  View and Complete 3 Activities
      • COMPLETE – Character Sets and Special Characters, Grouping Elements, and The Page Body
      • Complete even if it doesn’t record your score.
    • ASSIGNMENT:  Complete NUMBERED instructions in textbook.
      • DO NOT SUBMIT – Save Document for later

Day #2 of Chapter #1

Chapter 1:  Introduction to the Internet and Web Design

Chapter 1 Code

  • C1 Apply Your Knowledge:  Creating a Basic HTML Webpage
  • C1 Analyze, Correct, Improve:  Correcting a Webpage
  • C1 In the Lab 1:  Creating a Webpage for Strike a Chord
  • C1 In the Lab 2:  Creating a Web Page

Chapter #1 Apply

  • Chapter #1 Quiz

SUBMIT – Submit Chapter #1 Code Items and Chapter #1 Quiz in Google Doc

  • Create Google Doc – Title = P7, Ch #1 Code & Quiz, Your Name
  • Paste Print Screen of All Items in Code and Quiz
  • Crop All Print Screens to Show Scores
  • Share Button – tiwema@lcscmail.com

Chapter 1:  Introduction to the Internet and Web Design

View 6 Activities – Everyone will get credit for these assignments from last class.

Chapter 1 Visualize

  • Video – HTML Basics – 2:58 seconds

Chapter 1 Code

  • C1 Apply Your Knowledge:  Creating a Basic HTML Webpage
  • C1 Analyze, Correct, Improve:  Correcting a Webpage
  • C1 In the Lab 1:  Creating a Webpage for Strike a Chord
  • C1 In the Lab 2:  Creating a Web Page

Chapter #1 Apply

  • Chapter #1 Quiz

Responsive Web Design with HTML 5 and CSS

  • READ:  Chapter 1 Preview
  • READ:  Chapter 1 Read
    • ASSIGNMENT:  Create a Google Doc and Title it – Your Name, Ch #1 Vocabulary and SHARE it with me.
      • Copy/Paste Highlighted Vocabulary words and definitions into the google document
    • ASSIGNMENT:  View 6 Activities
      • COMPLETE – Color Name, Creating the Document Head, Document Type Declaration, Height and Width, Text-Level Elements, Element Hierarchy
      • When you are finished with all 6 Activities – Create a Google Doc and title it – Your Name, Ch #1 Activities.  Place the screen print in your document so that I can easily see your scores and SHARE it with me.

  • ALL CLASSES EMAIL ASSIGNMENT
  • CANVAS QUIZ – THREE TRUTHS AND A LIE
  • PORTAL LINK AND EMAIL INFORMATION