::December 11:: 

Introduction to Web Development :: Lesson 9.1-9.7

Typing Lesson and 9.7 are due today!

Expectations:

C: Voice Level 2 (only the people next to you can hear you and no shouting across the room)

H: Ask your team, elbow partner or raise hand

A: Work on the assignment

M: Stay in your assigned seat

P: Work till assignment is completed

S: Finishing your work


Typing.com ASSIGNMENT!

Beginner: Z & Enter Keys:: Due Friday, December 6:: 10 Points


Typing:

1. Log in to typing.com

2. Click Lessons

3. On Beginner Tab, Click Beginner: Z & Enter    keys

(this is due Friday, November 12): 10 Pts.

If you are finished or waiting, work on Clever!



1. Students click on the Clever icon on the desktop 

2. Sign in using the username & password (same as logging into computer)

3. Click on the square that says iReady 

4. Continue until time is up!

Lessons have been assigned to them based on their diagnostic test results both in Math and Reading. Within each lesson are brain break games. The district is pushing a goal of 45 minutes per week on Online Lessons in ELA and 45 minutes per week in Math to close the gaps found in the diagnostic. Math and ELA are providing some of that time during the week, but not all. 

Let's begin...CREATE YOUR HOMEPAGE!

Watch the Video below for complete instructions! 


CSTA K-12 Computer Science Standards (2017) : : AP-Algorithms and Programing :: IC- Imacts of Computing


Objectives:


What, Why & How:

WHAT ARE WE LEARNING: Website development!​

WHY IS IT IMPORTANT: Web design is one of the jobs that will continue to be in demand 

HOW WILL MY TEACHER KNOW WHAT I LEARNED: You will build your very own website and answer questions about its completion!


Web Development: Intro to Web Lab

What is HTML, CSS & JavaScript?

Intro to HTML:

Let's Get started!

Click on Code.org

9.1 :: Today we will working on lesson 2!     

Click on each and Review the website styles. What is different about this samples?

9.2 :: Today we will working on lesson 2!     

Complete and Add name to  line 8 . Play video below. Find 4 different desert, their orgins, and tell me a little about that dessert. Next change the Background color. Change the text color, use two or more different text colors, use two different font families. Add text-decoration, align <H1> to center and underline.

When you have completed this assignment submit screenshot on teams for 10 points!

Here are some idea!

9.7 :: Today we will working on lesson 7!     

Complete A-F  (Not D)and Add name to  line. Next change the Background color. Change the text color, use two or more different text colors, use two different font families. Add text-decoration, align <H1> to center and underline. A-F (Not D)

Complete A-F  (Not D)and Add name to  line. Next change the Background color. Change the text color, use two or more different text colors, use two different font families. Add text-decoration, align <H1> to center and underline. A-F (Not D)

Chapter 9 Notes CSS:

h1 {

    font-family: sans-serif;

}

/* subtitle style */

h2 {

font-family: sans-serif;

}



/* image style */

img {

  float: left;

  width: 250px;

  margin: 10px;

  border-color: saddlebrown;

  border-width: 4px;

  border-style: solid;

  border-radius: 10px;

}

/* body style */

body {

  background-color: #b1ade6;

}

/* title style */

/* paragraph style */

p {

    text-align: left;

    font-family: fantasy;

    font-size: 14px;

}

Chapter 9 Notes HTML:

<!DOCTYPE html> 

<html> 

<head>

   <link rel="stylesheet" href="style.css">

</head>

HTML 

<link rel="stylesheet"href="Style.css"/>

HTML

<img src="...." alt="Image description" />


When you have completed this assignment submit screenshot on teams for 10 points!

REV 8.1 :: Today we will working on lesson 8!     

Let's do something very cool. We are now going to add Images! Go to line 8 and add your name. Then Go to Google and find a picture of a Tiger or to your all-about Bengals PowerPoint and take a screenshot.

Change the image to a tiger, Change the Background color, use two or more different text colors, use two different font families, and increase all the text sizes by 6. Add text-decoration, align <H1> to center and underline. 

Go to Google and find a picture of a Tiger 

or 

Goto your all-about Bengals PowerPoint and take a screenshot.

Save to your ONE DRIVE

Click "ADD IMAGE"

Click "Rename" and call it "Bengal1"

Click "index html" and on line 14 write:

<img src="Bengal1.png" alt="Image description" />

8.2 :: Today we will working on lesson 8!     

Complete and Add name to  line 7 change the Background color, the dog and cat image, color, use two or more different text colors, use two different font families, and increase all the text sizes by 6. Add text-decoration, align <H1> to center and underline. 

8.4 :: Today we will working on lesson 8!     

Complete by fixing the code and then Add name to  line 7 change the Background color, the  red, green and blue image, color, use two or more different text colors, use two different font families, and increase all the text sizes by 6. Add text-decoration, align <H1> to center and underline. 

8.5 :: Today we will working on lesson 8!     

Complete by fixing the code and then Add name to  line 7 change the Background color, color, use two or more different text colors, use two different font families, and increase all the text sizes by 6. Add text-decoration, align <H1> to center and underline. Also add <H3> above each picture and give them a creative name.

8.6 :: Today we will working on lesson 8!     

Add an additional dog and a cat image and give them a pet name <H3>font 24 center and underline. Change the background color and color, use two or more different text colors, use two different font families, and change all the text sizes to listed sizes. Add text-decoration, align <H1> font 36 to center and underline. Also <H2> font 30 "Dogs" "Cats" above each section and alglin to the left. <p> font 20 include 3-5 sentences about each cat / dog! 

8.7:: Today we will working on lesson 8!     

Complete by fixing the code B, C and D and then Add name to  line 7 change the Background color, color, use two or more different text colors, use two different font families, and increase all the text sizes by 6. Add text-decoration, align <H1> to center and underline. Also add <H3> above each picture and give them a creative name. Add 1 photo to A,B and C.

Here is a tip for CSS

HTML 

<link rel="stylesheet" href="Style.css"/>

HTML

<img src="...." alt="Image description" />

REV :: 6.1 :: Today we will working on lesson 6!     

::6.2::

 Let add Style to your page! Add your name to Line 9 and Lets change the color of the font! You got this!

click on index find line 9 add your name. Easy!

Click on Style.css, find the color, and Change it. Now, change the alignment of the sentence in the middle! Too Easy!

::6.3::

 Let's add Style to your page! Add your name to Line 7 and change size to 30 font.  Align to the center, and let's change the color of the font H1, H3, and P! 

Also, Add an H3 header and  1 odd world record of your own. You got this!

click on index find line 7 add your name. Easy!

Click on Style.css, find the color, and Change it H1, H3, P. Now, change the alignment to Center! Too Easy!

6.4: Change the Background color, use three different text colors, and change all the text sizes increase them all by 4. Everything should match and look cool and fun.

6.5: Change the Background color, use three different text colors, and change all the text sizes increase them all by 4. Everything should match and look cool and fun.

6.6:: Change the Background color, use three different text colors, and change all the text sizes increase them all by 3. Everything should match and look cool and fun.

6.7-8:: Change the Background color, use three different text colors, and change all the text sizes increase them all by 2. Everything should match and look cool and fun.

6.9: Complete A, B, D, and E. Also, Change the Background color, use three different text colors, and increase all the text sizes by 6. Everything should match and look cool and fun.

6.10: Complete and Change the Background color, use two different text colors, and increase all the text sizes by 8. Everything should match and look cool and fun. Then Skip to 6.12

6.12: Complete A, B and C. Also, Change the Background color, use two different text colors, and increase all the text sizes by 8. Everything should match and look cool and fun.

REV: 3.1 :: Today we will working on lesson 3!     

Click on Lesson 3 Part 1 (3.1)

Let's Have some fun! Add Name to Line 7. Write something cool on line 13 and 23

3.2 :: Create a <h1> Header for title and 3 <h3>

List 3 of your hobbies and how long you have done them

3.3 :: Heading Sizes

3.4 :: Heading Quick Check

3.5 :: Favorite Foods

3.6 :: Best Pet

3.7 :: Numbered?

Can you spot the changes made? Let's see if you can recreate all the changes.

What does it all mean Mr. Harshaw?? Here are a few key terms... (2.2)