Web Development 101
- Grades 7 - 8
- 10 lessons
- Advanced Course
- 10 lessons
- 134 activities
- Enhanced Creativity Tools
- Automatic Assessment
- Tutorials and Reviews
- Coding Puzzles
- DIY Projects
- Teacher Guides
- Answer Keys
No previous coding experience required.
Web Development 101
Time: 50+ mins
IntroductionIn 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
New HTML Attributes
New CSS Styles
- Pictogram: A picture or symbol (e.g., thumbs up emoji) that represents a word or meaning.
- Apply coding concepts to create a Pictogram project
- 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?
- 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. StandardsKey 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.