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: Pictogram
Time: 50+ mins

Introduction

In this one-module lesson, students will create their own Instagram-influenced photo gallery with clickable pictures that users can vote on. Students can either select images from the Media Library, or they can use their own images. Note: Unlike previous DIY projects, students are NOT provided step-by-step instructions.

New HTML Elements

  • None

New HTML Attributes

  • None

New CSS Styles

  • None

Vocabulary

  • Pictogram: A picture or symbol (e.g., thumbs up emoji) that represents a word or meaning.

Objectives

Students will...
  • Apply coding concepts to create a Pictogram project

Materials

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

Warm-Up (5 minutes)

  • Tell students that they’re going to create an Instagram-influenced photo gallery today using the Text Code Editor.
  • As a class, discuss social media etiquette. Here are some tips to help you get started:
    • Don’t use mean, hurtful words.
    • Don’t post a picture or a video of someone else (e.g., classmate, teacher) without his/her permission.
    • Never give out your password. Also, never write down your password in an unsafe place (someone might see it and access your account).
    • Realize that everything you post leaves a digital footprint, meaning once you publish or post something, it’s traceable--even if you delete it.

Activities (45 minutes)

Facilitate as students complete the Pictogram module on their own:
Final Project 2: Pictogram (DIY)
  • In this DIY (do-it-yourself) project, students will use the Text Code Editor to create an Instagram-influenced photo gallery with clickable pictures that users can “thumbs up” or “love.” Note: Students are NOT provided step-by-step instructions.
  • Ask students to read through the “Requirements” section before they start coding:

  • Here’s a screen image sample of what their project might look like:

Extended Activities (20 minutes)

Discussion
Ask your students...
  • What is something you should NEVER post on social media?
  • True or false: If you delete an image or comment on social media, it goes away forever. (Answer: False.)
  • What do you enjoy most about using the Text Code Editor?
  • What was your favorite Web Development 101 project or activity?
  • What do you feel you need to improve on as a coder?
  • What do you feel is your strongest programming skill?

U.S. Standards

  • CCSS-Math: MP.1, MP.2, MP.4, 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-13, 2-AP-16, 2-AP-17
  • CS CA: 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.
  • Undertake creative projects that involve selecting, using, and combining multiple applications, preferably across a range of devices, to achieve challenging goals, including collecting and analysing data and meeting the needs of known users.
  • 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.