Interactive Video Call:

Week of 10/18

Objectives

  • Review platform implementation across schools
  • Build basic websites with HTML/CSS, Lists, images, links, classes, and the box model

Agenda

  • Check-ins (5 min)
  • Orders of business/operational (5 min)
  • Questions (5 min)
  • HTML/CSS Extension (5 min)
  • Work time (25 min)
  • Close out (5 min)

Call Norms

  • Ask questions. If you have a question, other people do too.
  • Be present and actively participate during the call. 
  • Give feedback on what is helping you and what you would like to see change. 
  • Submit questions 24 hours ahead on Slack.

Calendar

9/13

Overview + Broadcasting

9/27

Problem Solving Independently

10/4

Project 1:

Autobio

10/11

Introduction to Web Design

10/18

HTML/CSS Unit Analysis

10/25

Project Presentations

Checkin

  • Work for the week
  • Win for the week
  • Most recent lesson taught

Updates

  • Online PD: How to access and use to drive student performance.
  • Open Response Feedback Feature: Input and Brainstorm

HTML

The structure. HTML directs which elements on a page go where. Aka, this box about that box, this title to the left of this picture.

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
        <h1>This is a page heading</h1>
        <h2>This is a sub heading</h2>
        <p>This is normal text for a website</p>
        <p>You can have the same tag type multiple times</p>
    </body>
</html>

HTML: Challenge

Goal: We are going to build a shout-out website that you can use to give positive recognition to students. Build a title, a sub title, and a description.

  • Go to thimble.mozilla.org
  • Sign in or create an account
  • Start a new project

CSS

The design of a page. CSS controls colors, typography, spacing, and dimensions.

body{
    background-color: yellow;
}

h1{
    font-size: 30px;
}

p{
    color: red;
}

CSS: Challenges

  • Change the colors, background colors, and sizes of your Heading, Name, and Description.
  • Then, go to color.adobe.com. The HEX value, with a # in front of it, can replace the color words. 
background-color: #FFF6C5;

Classes

A class is an attribute that puts elements in groups.

  <p class='shout_out'>
    Shout out to Tamia for her Grit during guided practice. 
  </p>
  <p class='teacher_name'>
    Ms. Moynihan
  </p>

Additional Challenges

  • Start out with a title at the top of your site.
  • Then add the logo for your school underneath the title.
  • Then add the grade level as a subtitle under the picture.
  • Add a paragraph with at least 2 - 3 sentences explaining what the website is for.
  • Pick a great font.
  • Make sure your body and text has a nice color scheme.
  • Add the class shout_out to the shoutouts and teacher_name for the teachers name.
  • Apply styling to the classes.

http://www.w3schools.com

Additional Challenges

Pictures

The tag is img, but before you close the opening tag, you are going to add an attribute, which a way to add information to a tag.

 

src (source) and set it equal to the url you copied. (always put attribute values in quotes)

<img src='http://scienceservinghumanity.us/wp-content/gallery/sidebar01/asimo-walk.jpg'/>

Put It Together

Wrap Up

Made with Slides.com