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

Introduction

Bring on the pictures! In this one-module lesson, students will create a photo gallery web page with tooltips, divs, spans, sections, hyperlinks, headings, and images using the Text Code Editor. Students can either select images from the Media Library or 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

  • None

Objectives

Students will...
  • Apply coding concepts to create a photo gallery web page

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 a photo gallery today using Tynker.
  • Explain that most photo galleries have a theme (e.g., vacations, food). As a class, try to categorize the different images from the Media Library. Here’s a list of different categories to help you get started: city living, animals, and nature.

Activities (45 minutes)

Facilitate as students complete the Photo Gallery module on their own:
Final Project 1: Photo Gallery (DIY)
  • In this DIY (do-it-yourself) project, students will use the Text Code Editor to create a photo gallery web page. 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:

  • Are students taking too long selecting images? Have them choose a category from today’s warm-up (e.g., nature, animals), then find the appropriate pictures to use from the Media Library.

Extended Activities (20 minutes)

More Practice
  • Ask students to create a new photo gallery with a different theme, such as nature, farm animals, pets, cool cars, etc.
  • Bonus: Have them write a short story to go along with their photo gallery--it can be fiction, non-fiction, or a mixture of both! For example, if students create a photo gallery of nature images, they can write about their nature experiences and adventures around the world.

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.