Web Development 101

A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS. Request Quote

  • Grades 7 - 8
  • 10 lessons
    • Web
  • Advanced Course
Course includes
  • 10 lessons
  • 134 activities
  • Enhanced Creativity Tools
  • Automatic Assessment
  • Tutorials and Reviews
  • Coding Puzzles
  • DIY Projects
  • Quizzes
  • Teacher Guides
  • Answer Keys
Prerequisites
No previous coding experience required.

Web Development 101

Lesson: Introduction
Time: 50+ mins

Introduction

Welcome to Tynker’s Web Development 101 Course! This course is packed with 10 fun lessons that will guide your students step-by-step through the computer languages of HTML and CSS. Here are some projects that your students 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, students are introduced to HTML and CSS. Each chapter contains multiple modules, so it’s important that students read each module carefully and experiment with the provided activities. By the end of this lesson, students 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

Students 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 student) with student account access to Tynker.com

Warm-Up (5 minutes)

  • Show students 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 students to answer the following questions:
    • What is something you’re looking forward to learning in the Web Design 101 course?
    • What is a concern you have about the Web Design 101 course?

Activities (45 minutes)

Facilitate as students complete the Introduction modules on their own:
1. Introduction (Document)

  • Students will read a short document that introduces the Web Development 101 course. Point out the following:

  • Emphasize to students 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 students 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, students 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 students 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 students, “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)

  • Students 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. Students 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)

  • Students 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 students 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. Students will need to fix the errors, add a document title, and add paragraph element tags.

6. Paragraphs (Document)

  • Students 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 students add more paragraphs to the “Paragraph Example†exercise. Their code might look like this:

  • This module includes a challenge activity. Students will need to fix the errors in the document and add tags and a document title.

7. Line Breaks (Document)

  • Students 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 students 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 students 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 students 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)

  • Students are introduced to two new concepts:
    • Background Color- Students can set the background color of the page using CSS. Check that students 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- Students can set the text color of the page using CSS. Check that students 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 students are changing the page color to purple in the “Set Background Color†exercise. Answer:

  • This module includes a challenge activity where students are asked to set the background color to pink and set the text color to blue. If students 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)

  • Students will learn three different ways to specify colors within CSS styles: using predefined color names, RGB color codes, or hexadecimal color values.
  • Students are introduced to three new concepts:
    • Predefined Color Names- Students 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- Students can specify a hexadecimal (hex) code for the color value as shown below:

  • Students 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 students 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, students will apply concepts from this lesson to create a web page that includes paragraphs, HTML elements, and CSS styles. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial†tab, which will guide them through the project.
  • Are students struggling with their code? Ask them to use the code in the provided example as a reference.
  • Are students 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 students 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: Students 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)

  • Students will be asked 8 quiz questions to review concepts from this lesson.

Extended Activities (20 minutes)

Lead a discussion with your students:

  • 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.