A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS.
- Grades 7+
- Advanced
- Web
Lesson 10 : Pictogram
Web Development 101
Time: 50+ minutes
Introduction
HTML and CSS Introduced
Vocabulary
Objectives
Materials
Warm-Up
(5 minutes)
Activities
(45 minutes)
Facilitate as students complete all Pictogram modules on their own:
Final Project 2: Pictogram (DIY)
Extended Activities
(20 minutes)
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
Pupils should be taught to:
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, reuse, revise and repurpose 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
Key stage 4
All pupils must have the opportunity to study aspects of information technology and computer science at sufficient depth to allow them to progress to higher levels of study or to a professional career. Pupils should be taught to:
develop their capability, creativity and knowledge in computer science, digital media and information technology
develop and apply their analytic, problem-solving, design, and computational thinking skills
understand how changes in technology affect safety, including new ways to protect their online privacy and identity, and how to report a range of concerns
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
Lesson 2
Headings and Images
Lesson 3
All About Lists
Lesson 4
Adding Hyperlinks
Lesson 5
Using Containers
Lesson 6
Tables and Media
Lesson 7
More on Styling
Lesson 8
Pixel Art
Lesson 9
Photo Gallery
Lesson 10
Pictogram
Time: 50+ minutes
Introduction
HTML and CSS Introduced
Vocabulary
Objectives
Materials
Warm-Up (5 minutes)
Activities (45 minutes)
Facilitate as students complete all Pictogram modules on their own:
Final Project 2: Pictogram (DIY)Extended Activities (20 minutes)
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
Pupils should be taught to:Key stage 4
All pupils must have the opportunity to study aspects of information technology and computer science at sufficient depth to allow them to progress to higher levels of study or to a professional career. Pupils should be taught to: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
Lesson 2
Headings and Images
Lesson 3
All About Lists
Lesson 4
Adding Hyperlinks
Lesson 5
Using Containers
Lesson 6
Tables and Media
Lesson 7
More on Styling
Lesson 8
Pixel Art
Lesson 9
Photo Gallery
Lesson 10
Pictogram