::October 13-16::
::October 13-16::
Embedded Files
TUES, OCT 14:: Click Link for assignment >
Introduction to Web Development
Introduction to Web Development
Expectations:
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!
Typing.com ASSIGNMENT!
Beginner: V, H& M :: Due Friday, October 10:: 10 Points
Typing:
Typing:
1. Log in to typing.com
2. Click Lessons
3. On Beginner Tab, Click Beginner: V,H &M keys
(this is due Friday, October 10): 10 Pts.
If you are finished or waiting, work on Clever!
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.
Objectives:
Understand what HTML and CSS are and how they work together to build websites.
Set up a web development environment using VS Code and browser developer tools.
Learn and apply the basic HTML structure.
Create a simple webpage using headings, paragraphs, and links.
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 your Class Period
Click on student Period
Use example below Period
What does it all mean Mr. Harshaw?? Here are a few key terms... For Your Note Book!
<!DOCTYPE html> ...... This declaration tells the browser that this document is written in HTML5
<html>.............................. This is the root element that wraps all the content on your entire page. Everything else goes inside this tag.
<body>............................. This contains all the visible content that appears on the webpage - Anything you want users to see goes here.
<P>.................................... This creates a paragraph of text. It's used for blocks of regular text content.
<H1>................................ This is a heading tag - specifically the largest, most important heading . <h1> The biggest to <h6> The smallest
<ul>.................................. This creates an "unordered list" - a bulleted list where the order doesn't matter. The bullets are typically circles or dots.
<li>................................... This stands for "list item" and goes inside a <ul> or <ol> (ordered list)
<li>................................... Represents one bullet point or numbered item in your list.
Examples:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<OMG>!!! Haha!! To easy!
Let's Get started!
Click on code.org
Click on each Website
(Take your time! No rush! )
Click on Lesson 2
2.1 :: You got this!!
Write:
Your Name
Favorite Color
Favorite Animal
What Happened? Discuss with the person next to you and raise your hand.
What Happened!
How do we fix it?
2.2 ::
Let's have some fun! Write your name on line 4. Write a cool phase on line 5.
2.3 :: Let's try that list again....
2.3 :: This is much better!
2.4 :: Joke Time!!!
Here is a little help. Copy the code below. Create some space between <body> and </body>. Then paste it in between. You're welcome! lol.
<h1> ....</h1>
<h3> ...</h3>
<p> ...</p>
<h3> ...</h3>
<p> ...</p>
<h3> ...</h3>
<p> ...</p>
Quick review and key terms... For Your Notebook!
<!DOCTYPE html> ...... This declaration tells the browser that this document is written in HTML5
<html>.............................. This is the root element that wraps all the content on your entire page. Everything else goes inside this tag.
<body>............................. This contains all the visible content that appears on the webpage - Anything you want users to see goes here.
<P>.................................... This creates a paragraph of text. It's used for blocks of regular text content.
<H1>................................ This is a heading tag - specifically the largest, most important heading . <h1> The biggest to <h6> The smallest
<ul>.................................. This creates an "unordered list" - a bulleted list where the order doesn't matter. The bullets are typically circles or dots.
<li>................................... This stands for "list item" and goes inside a <ul> or <ol> (ordered list)
<li>................................... Represents one bullet point or numbered item in your list.
Examples:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<OMG>!!! Haha!! To easy!
2.5 :: The broken code
2.6 :: Complete Activity B Only :: 8 Sentences, on separate lines <p> and a header <h1>
Here is an example:
2.7 :: Fix Dialogue
2. :: Complete Fix Dialogue Reflection
2.9 Complete Activity A & B Only
Turn in screenshots on teams for :
2.2
2.3
2.4
2.5
2.9 A&B
Future Project Goal!!!
CRITERIA!
CRITERIA!
Title (5 Points)
4 Photos (5 Points each = 15 Points)
Add your About Me Text: 6 paragraphs about you! (5 Points)
Add a Footer (5 Points)
TOTAL = 30 Points for the HOME PAGE!
TOTAL = 30 Points for the HOME PAGE!
This assignment is worth 30 points! Make sure you COMPLETE all of the CRITERIA to get CREDIT! Don't rush...make good choices, remember this is YOUR website!
This assignment is worth 30 points! Make sure you COMPLETE all of the CRITERIA to get CREDIT! Don't rush...make good choices, remember this is YOUR website!
Page updated
Google Sites
Report abuse