Description

Students will be introduced to web page development using HTML and CSS. Starting from building their very first web page, they progress to learn about paragraphs, lists, tables, inserting images, audio and video files and hyperlinking while they work on 14 different hands-on practical do-it-yourself projects, several hands-on programming challenges, and assessment quizzes throughout the course. Finally they build a photo gallery and their own version of Instagram to compete this course.

This course is ideal for students who are comfortable with text entry. It is recommended that the students have completed at least one Tynker block-coding course so that they are familiar with the basics of programming logic and computational thinking. This course will help them transition to HTML and CSS - the web development languages, and adapt to the additional challenges of text-based syntax.

Students who successfully complete this lesson plan will demonstrate a strong mastery of HTML and CSS syntax, as well as the ability to create their own web sites from scratch. They will be able to create web pages for other projects in their academic curriculum, such as book reports, presentations and STEM assignments. This course does not cover the use of JavaScript in web development.

Topics Covered: Basic web page design, formatting text and images, numbered and bulleted lists, tables, sections and div blocks, styling using CSS, creating hyperlinks, Embedding video and audio, creating modal popups, building responsive sites, creating pixel art, building a photo gallery, and building an Instagram clone.

What Students Learn

  • Basic web page design
  • Formatting text and images
  • Numbered and Bulleted lists
  • Styling using CSS
  • Creating Hyperlinks
  • Tables, sections and div blocks
  • Embedding video and audio
  • Creating modal popups
  • Building responsive sites
  • Creating pixel art
  • Build a Photo Gallery
  • Build an Instagram clone

Technical Requirements

* Online courses require a modern desktop computer, laptop computer, Chromebook, or Netbook with Internet access and a Chrome (29+), Firefox (30+), Safari (7+), or Edge (20+) browser. No downloads required.

Web Development Studio

Lesson: Introduction
Time: 50+ mins

Introduction

Welcome to Tynker’s Web Development Studio Course! This course is packed with 10 fun lessons that will guide your campers step-by-step through the computer languages of HTML and CSS. Here are some projects that your campers will create in this course: My First Web Page, Acrostic Poem, Responsive Web Pages, Pixel Art, Hero Unit, Pictogram, Photo Gallery, and more!

In this lesson, campers are introduced to HTML and CSS. Each chapter contains multiple modules, so it’s important that campers read each module carefully and experiment with the provided activities. By the end of this lesson, campers will build a My First Web Page project and take an 8-question multiple-choice quiz to test their knowledge of “Lesson 1: Introduction” concepts. Note: Answers to all challenge activities (7 total) are located below the “Standards” section in this teacher guide.

Let’s get coding!

New HTML Elements and Attributes

  • < html > : Tells the browser that this is an HTML document.
  • < head > : Declares special instructions for the browser. Note: The < head > element includes information (metadata) about the document, such as < title > and < style > .
  • < title > : Use this to add the document’s title in a browser’s title bar or a page’s tab.
  • < body > : All page content goes here (e.g., text, hyperlinks, images).
  • < p > : Adds contents for a paragraph using this element.
  • < br/ > : Inserts a blank line on the page. Usually used for spacing.
  • < style > : Use this to add style information for web page elements within the page.

New CSS Styles

  • background-color : Changes the background color of an HTML element to the specified color (e.g., purple).
  • color : Changes the text color of an HTML element to the specified color (e.g., white).

Vocabulary

  • World Wide Web: A network of computers that share documents with each other.
  • Web pages: Digital documents shared on the web.
  • Website: A group of web pages that link to each other.
  • Web browser: A software application (e.g., Chrome, Firefox, Safari) where you can open and interact with web pages.
  • HTML: Short for Hypertext Markup Language. It is used to create web pages using regular text.
  • CSS: Short for Cascading Style Sheets. It is used with HTML to change the appearance of web pages.
  • JavaScript: A scripting language that can be used to create presentations, games, animations, and more.
  • Elements: HTML markup that is used to format a web page. It usually consists of start and end tags along with any attributes.
  • Tags: These indicate the start and end of an HTML element.

Objectives

Campers will...
  • Apply coding concepts to complete provided challenge activities
  • Apply concepts from this lesson to create a web page

Materials

  • Computers or laptops (1 per camper) with student account access to Tynker.com

Warm-Up (5 minutes)

  • Show campers the provided project example from module 11, “Project 1: My First Web Page.” Next, ask them to point out features (e.g., background color, text color).
  • Explain that all the features they pointed out in the project were created using HTML and CSS and are used to create web pages using regular text.
  • Optional: Ask campers to answer the following questions:
    • What is something you’re looking forward to learning in the Web Design Studio course?
    • What is a concern you have about the Web Design Studio course?

Activities (45 minutes)

Facilitate as campers complete the Introduction modules on their own:
1. Introduction (Document)
  • Campers will read a short document that introduces the Web Development Studio course. Point out the following:

  • Emphasize to campers that they’ll need to read each module carefully so they can apply concepts from the lesson to build a project and answer a multiple-choice quiz.
  • Tell campers to click the “Next” button (located at the bottom of the document) to move on to the next module.
2. What is the World Wide Web? (Document)
  • In this module, campers will learn three new concepts:
    • Web Browser- Web browsers (e.g., Chrome, Firefox, Internet Explorer, Safari) understand the same “computer languages” for displaying web pages.
    • Computer Languages for Web Pages- Some of the most commonly used computer languages for building web pages are HTML, CSS, and JavaScript.
    • Web Publishing- Using the web, you can publish web pages and websites.
3. What is HTML? (Document)
  • HTML is short for Hypertext Markup Language.
  • Emphasize to campers that HTML helps organize text and format the appearance of content on the web.
  • This module covers one new concept:
    • HTML Elements- An HTML page is made up of HTML elements, which contain a start (or opening) tag and an end (or closing) tag.
      • Tags- These indicate the start and end of an HTML element. Here’s what the structure of a tag looks like:


  • Optional: Ask campers, “How can we distinguish between start and end tags?” (Suggested answer: A closing tag contains a “/” symbol, and an opening tag does not.)
  • Here is an HTML example that includes start and end tags:


4. HTML Document (Document)
  • Campers are introduced to four new concepts:
    • Document Type- This first line of an HTML document must specify the document type using this declaration:

    • Document Start and End- HTML pages must start with an < html > tag and end with an < /html > tag. Here’s an example of an empty HTML document:

    • Document Head- The head of an HTML document is where special instructions for the browser are declared. It is enclosed within the < head > and < /head > tags:

    • Document Body- The visible part of the HTML page is called the body, which starts with a < body > tag, and ends with a < /body > tag:

  • This module includes a challenge activity. Campers will need to fix the errors in the tags and insert a head element above the opening body element tag. Note: Answers to all challenge activities are located below the “Standards” section in this teacher guide.
5. Title Metadata (Document)
  • Campers are introduced to one new concept:
    • Document Title- An HTML document’s title requires both the start < title > and the end < /title > tags. Here is an example

  • Check that campers change the title in the “Adding a Title” exercise. Optional: Ask them to describe how their changes affected the title bar in the preview window.
  • This module includes a challenge activity. Campers will need to fix the errors, add a document title, and add paragraph element tags.
6. Paragraphs (Document)
  • Campers are introduced to one new concept:
    • Paragraph Element- A < p > (paragraph) element breaks up text into paragraphs, and must contain a start < p > tag and an ending < /p > tag. Here is an example:

  • Check that campers add more paragraphs to the “Paragraph Example” exercise. Their code might look like this:

  • This module includes a challenge activity. Campers will need to fix the errors in the document and add tags and a document title.
7. Line Breaks (Document)
  • Campers are introduced to two new concepts:
    • Line Break Element- A < br/ > element contains one tag, and breaks up text and adds a new line wherever it is placed:

    • Paragraphs vs Line Breaks- A line break is similar to a paragraph, but does not include any additional spacing.
  • Check that campers experiment with paragraphs and line breaks in the “Using Paragraphs and Line Breaks” exercise.
  • This module includes two challenge activities: “Add Your Favorite Songs” and “Add Your Favorite Foods.” If campers are struggling, ask them to fix the code one error at a time, select the “check code” button to check their work, then move on to the next error.
8. What is CSS? (Document)
  • CSS stands for Cascading Style Sheets.
  • Emphasize to campers that CSS goes hand in hand with HTML in web development. For example, CSS can define the background color, font size, and font color of a web page.
  • This module covers one new concept:
    • Internal Style Element- To add CSS inside an HTML document, tags must be placed inside the document head. Here is an example:

9. Background and Text Color (Document)
  • Campers are introduced to two new concepts:
    • Background Color- Campers can set the background color of the page using CSS. Check that campers experiment with changing the background color in the “Set Background Color” exercise. For example, the code below changes the background color of the page to purple:

    • Text Color- Campers can set the text color of the page using CSS. Check that campers experiment with changing the paragraph text color in the “Set Text Color” exercise. For example, the code below sets the paragraph text color to white:

  • Check that campers are changing the page color to purple in the “Set Background Color” exercise. Answer:

  • This module includes a challenge activity where campers are asked to set the background color to pink and set the text color to blue. If campers are struggling, ask them to use the code in the “Set Background Color” and “Set Text Color” exercises as a reference.
10. Colors in CSS (Document)
  • Campers will learn three different ways to specify colors within CSS styles: using predefined color names, RGB color codes, or hexadecimal color values.
  • Campers are introduced to three new concepts:
    • Predefined Color Names- Campers are provided a list of 18 different predefined color names as a reference. Colors include black, white, red, blue, green, and more. Here’s an example:

    • RGB Color Codes- An RGB color code has 3 numbers separated by commas, where each number can be anywhere between 0 and 255. Here’s an example:

    • Hexadecimal Color Values- Campers can specify a hexadecimal (hex) code for the color value as shown below:

  • Campers are provided a color table that lists color names and their corresponding RGB and hexadecimal values. For more HTML color values, go to this link:
    https://www.quanzhanketang.com/colors/colors_hex.html
  • This module includes a challenge activity where campers will need to replace the background color “beige” with its RGB code and replace the text color “maroon” with its hexadecimal value. Answer:

11. Project 1: My First Web Page (DIY)
  • In this DIY (do-it-yourself) project, campers will apply concepts from this lesson to create a web page that includes paragraphs, HTML elements, and CSS styles. Note: campers are provided step-by-step directions in the Text Code Editor “Tutorial” tab, which will guide them through the project.
  • Are campers struggling with their code? Ask them to use the code in the provided example as a reference.
  • Are campers struggling to find something to write about? Ask them to write about something they enjoy! What are their favorite songs, foods, sports, or hobbies?
  • Did campers finish early? Direct their attention to “Step 6” in the “Tutorial” tab, which provides bonus activities such as adding more content; styling the page with a different background and foreground color; and creating a page with a secret code. Note: Campers are provided a hint on how to create a page with a secret code.
  • Here’s a screen image sample of what their project might look like:

12. Quiz (Multiple Choice)
  • Campers will be asked 8 quiz questions to review concepts from this lesson.

Extended Activities (20 minutes)

Lead a discussion with your campers:
  • Who can list at least three things you learned today?
  • What is an element? (Answer: HTML code that’s used to format a web page.)
  • Who can describe some of the elements we used in today’s lesson?

U.S. Standards

  • CCSS-Math: MP.1, MP.7
  • CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  • CSTA: 2-AP-10, 2-AP-13, 2-AP-16, 2-AP-17
  • CS CA: 6-8.AP.10, 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.K. Standards

Key Stage 3 (Years 7-9)
  • Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
  • Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
  • Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.

Answer Key

Challenge 1 (Module 4)- Add Document Head:


Challenge 2 (Module 5)- Add a Document Title:


Challenge 3 (Module 6)- Add Paragraphs:


Challenge 4 (Module 7)- Add Your Favorite Songs:


Challenge 5 (Module 7)- Add Your Favorite Foods:


Challenge 6 (Module 9)- Add Background and Text Color:


Challenge 7 (Module 10)- Color Names, RGB Codes, and Hex Values:



Class Presentations

These student-facing slide presentations help educators seamlessly run Tynker lessons in a virtual or physical classroom setting. Each lesson has its own set of slides that introduce the big ideas, suggest unplugged activities, and include a section for each activity module. While running lesson slides, you can switch back and forth between the activity, the slides, answer keys and other lesson materials.
A sample slide presentation is available for your review. Please log in to view all the class presentations available with your plan..
Lesson 1
Introduction
33 Slides
Lesson 2
Headings and Images
35 Slides
Lesson 3
All About Lists
32 Slides
Lesson 4
Adding Hyperlinks
30 Slides
Lesson 5
Using Containers
33 Slides
Lesson 6
Tables and Media
32 Slides
Lesson 7
More on Styling
30 Slides
Lesson 8
Pixel Art
16 Slides
Lesson 9
Photo Gallery
16 Slides
Lesson 10
Pictogram
15 Slides