Lesson Plan

Coding a Personalized Emoji Introductory Lesson Plan

Students use code to create personalized emojis.
Ellen G.
Classroom teacher
PS 236
Brooklyn, United States
Show More
My Grades Pre-K, K, 1, 2, 3, 4, 5
My Subjects English Language Arts, Math, Social Studies

Students will be able to... use madewithcode.com to design, and the "print screen" shortcut to print an emoji through coding.

Grades 5
All Notes
Teacher Notes
Student Notes

1 Hook

Activate prior experience with coding:

Ask: "How do you write code?"

Ask: "What have you made with code in the past?"

Ask: "What is an emoji?"

Ask: "How can you create your own emoji?" (Coding)

Student Instructions


There are different languages that use things like blocks, text or a combination

Using Codesters.com they have made a logo or a scene with a click event, they have also have created sequences, functions and conditionals.

An emoji is a picture that represents a feeling or object. People us them when texting or posting on social media.

Coding is how we make emojis.

2 Direct Instruction

On SMART Board, display the program www.maddewithcode.com, which is part of the www.code.org network. Show the various block choices. Explain that although this is a block-style program, they have to use what they know about the coordinate plane and using the x/y axis in order to correctly place each attribute (object) on the emoji.

Possible attributes:

  • various blank faces
  • male/female of different ethnicities
  • eyes
  • mouth
  • nose
  • hair accessories
  • holiday or winter background (setting)

Demonstrate with each block individually. Demonstrate that they need to click on variable to use the x/y axis to properly place the objects.

The screen has 2 tabs. They can switch back and forth between the blocks and the text code.

Demonstrate with all 3 blocks to make a code.

Introduce print screen using the  short cut shift+command+4.

Students can use the "bullseye" to select the

exact area of the screen to print, then open the image from the desktop and print.

Allow students to explore.

Questioning Opportunities (during free exploration):

-What happens when you change the x or y number? Which direction does a higher number move? A lower number?

-How does changing an attribute effect the finished product?

-Can you create a finished product without one or more of the attributes?

-Do you prefer using the block commands or writing the text?

Student Instructions

Various responses

3 Guided Practice

Students will be given a 10-minute warning to complete their project and send to print.

Students will gather together to explain what they did and what happened. Each student will have the opportunity to share their finished, printed emoji.

Encourage students to use words

  • encapsulation
  • attribute
  • sequence
  • variable
Student Instructions

Display samples.

Show rubric so they understand expectations.

4 Independent Activity

Create a new emoji:

-Create a specific emoji using pre-determined attributes and variables.

-Use the www.madewithcode.com and other block or text-based coding websites to further explore creating on-screen images.

-Use the "print screen" (shift+command+4) shortcut in other programs.

Student Instructions

Students work independently on project online.

5 ExitTicket

Grade based on rubric.

Give constructive feedback.

Student Instructions

Display printed work for class to share. 

Peer rubric feedback.