top of page

8th grade

Check this page weekly to ensure that you have everything ready for your next computer class. This will help you get the most out of the coursework and also to be prepared to get your work done in class on time.

Welcome Back!

Welcome to 8th Grade

 

TypingWeb log in. Click on log in at the top right. Enter your username (first letter of your first name, your last name and your library number) and password Library number and 000)

Typingweb self join link: https://www.typing.com/student/join#8thgradeclassof2024

New: Please log into your gmail accounts to access Google Classroom;

 

211: Your classroom code is l73tjsm

212: Your classroom code is ylpg2u7

213: Your classroom code is 73roja4

I will be communicating with you via this method


 

February 12, 2024 (week 18)
Computer Science Discover (CSD) - Web Development

Week 1:

1. Please log into your Clever.com account.

2. Click on the Learning Blade app under 'specials'

3. Add your class code when prompted:
     Room 211 class code: 8x29c6
     Room 212 class code: cc695e
     Room 213 class code: ed776x

4. Complete BOTH the Intro to Computer Programmers AND the Intro to Web Developers units.

 

Login: https://studio.code.org/sections/SYBPZG

 

Unit 2: Complete worksheet independently on Google Classroom

 

Website Planning Guide

Week 2:

Unit 3: Intro to HTML

Now we will move to the code.org website. You will start with lesson 3

  • HTML - <html></html>

  • Doctype - <!DOCTYPE>

  • Paragraph - <p></p>

  • Body - <body></body>

  • Head - <head></head>

 

Week 3:

Unit 4: Headings This lesson will introduce to to heading (h1, h2, h3, h4, h5, h6)

  • Heading - <h1></h1>

h1 biggest - <h1></h1>
h2 bigger - <h2></h2>
h3 big - <h3></h3>
h4 medium - <h4></h4>
h5 small - <h5></h5>
h6 smallest - <h6></h6
>

Unit 5: please skip lesson 5. We have spent a great deal of time on Digital Citizenship and your Digital Footprint. Think back to the NS teens videos in 7th grade.

 

Week 5:

 

Unit 6: Lists (unordered lists <ul>, ordered lists <ol> and <li>)

  • Unordered List - <ul></ul>

  • List Item - <li></li>

  • Ordered List - <ol></ol>


Example of unordered list:

<ul>

       <li>Red</li>
      <li>Green</li>
      <li>Yellow</li>
      <li>Purple</li>
</ul>

Looks like this:

  • Red

  • Green

  • Yellow

  • Purple


Example of ordered list:

<ol>
      <li>Red</li>
      <li>Green</li>
      <li>Yellow</li>
      <li>Purple</li>
</ol>

Looks like this:

  1. Red

  2. Green

  3. Yellow

  4. Purple


Unit 7: Intellectual Property and Images (<img/>). You must watch the youtube video called 'Creative Commons Video'

In order to tell the browser which file to use, extra information, called an attribute, is added to the image tag inside the brackets. The attribute src stands for source and tells the name of the image, and the attribute alt describes the image.

<img src="dog.jpg" alt= "My Dog"/>

 

  1. Create an image tag using the abbreviation img. This is considered a self-closing tag, since it doesn't need to wrap text as many other tags do. The / right before the ending > is optional, but helps remind us that this tag doesn't need a closing tag.

  2. The src attribute is short for source. This tells the tag which image to load. In this case, the page will look for an image with the filename dog.jpg in the same directory as the page. Image file names include extensions that tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, and .png. Make sure to put quotation marks around your image filename.

  3. The alt attribute is short for alternative text. While you won't see this text on your web page, it provides a backup in case your image doesn't download properly or for visually impaired users. In this example, if your browser failed to load the image you would see.

  4. When you come to the 5th section in this lesson

    1. please find the picture of your animal first and download it

    2. rename it as you would like it on your project

    3. you will upload your image

    4. next write your code

    5. click on 'refresh and save'

    6. if you don't see your code, remember you need to click on index.html in the left margin

 

Unit 8: Clean Code and Debugging

  • Bug - Part of a program that does not work correctly.

  • Comment - A comment is a programmer-readable note in the source code of a computer program.

  • Debugging - Finding and fixing problems in your algorithm or program.

  • Indentation - The placement of text farther to the right, or left, to separate it from surrounding text which helps to convey the program's structure.

  • Whitespace - Whitespace refers to any character that shows up as a blank space on the screen, such as a space, a tab, or a new line. Whitespace helps separate different parts of the document to make it easier to read.

  • Comment - <!-- -->
     

  • Whitespace,

  • Indentation is the placement of text farther to the right, or left, to separate it from surrounding text. Indentation helps to convey the program's structure. In HTML, elements that are inside other elements are usually indented.

    • Correct:​

    • ​<body>

      • <h1>Here's my list</h1>

      • <ol>

        • <li>Item 1</li>

        • <li>Item 2</li>

      • </ol>

    • </body>

    • Incorrect:​

    • ​<body><h1>Here's my list</h1><ol><li>Item 1</li><li>Item 2</li></ol></body>

 

Unit 9: Project - Multi-Page Websites

  • Hyperlink - A link from a HTML file to another location or file, typically activated by clicking on a highlighted word or image on the screen.

  • Hyperlink - <a></a>

  • Hyperlink Code

 

 

 

 

 

 

 

Unit 10: Styling Text with CSS

  • Vocabulary

  • CSS - CSS stands for Cascading Style Sheets. CSS allows each HTML element to be styled according to certain set of rules.

  • CSS Selector - Specifies the part of the code which the style should be applied to.
     

  • Introduced Code

  • Color - color: value;

  • Text Align - text-align: value;

  • Text Decoration - text-decoration: value;

  • Font Family - font-family:value;

  • Font Size - font-size:value;

 

CSS Style:

 

 

 

 

 

 

 

 

 

 

CSS Rule-sets

CSS rule-sets consist of two main parts: the selector and the rules.

Selector

The selectors can be any part of the web page you want to style. One way you can identify parts of the web page is using the names of the element type. Selecting an element type will make all elements of that type have the given styling. The selector name for HTML element types is the name of the tag with the brackets removed. In the below example the selector is h1 and it will style all the h1 elements with the rules inside the curly braces ({ }).

Rules

The rules describe how the elements identified by the selector should change. Each rule consists of a property name and a value, separated by a colon (:). The property name describes what the rule is about, such as color or size, and the value how the property should change. For example, the rule-set below will make all the h1 headers on the page have blue text that is underlined.

h1{

     color:blue;

     text-decoration: underline;

}

The punctuation in the rule-set is very important, because that's the way the computer knows where each rule starts and stops.

Sample Text Properties:

p {

     color: maroon;

     text-align: center;

     text-decoration: underline;

     font-family: fantasy;

     font-size: 20px;

}

 

 

 

 

 

 

Unit 11:

Unit 12:

Unit 13:

Unit 14:

Updated: March 27, 2024


bottom of page