Be like meme creator3/16/2023 So… I knew I had to steal this amazing idea and create a safe-for-school meme generator template that gives students choices of safe for school images (while still giving the awesome Nicole Donaldson all the kudos and credit she is due for the creative and innovative idea – thank you, Nicole, for sharing and collaborating with me)!Ĭlick here to grab your own copy of this template! And best of all – the assignment had STUDENTS TEACHING EACH OTHER about the concept (here, school rules – but potential for ANY topic).SAFE – not out on meme generator websites which can sometimes have vulgar or offensive words or images.When she told me about the assignment, I immediately knew I was in love! While each table had the same grumpy cat face, they all selected different school expectations to reinforce for their classmates in this super fun, silly, and engaging assignment. Instead of standing in the front of the room and going over school rules again, she gave students the assignment to create a meme (you know, those hilarious pictures you see on the internet with white text at the top and bottom) which exemplifies or explains a school rule in table groups using one safe-for-school (but still fun) image she selected. Navigate to the style.One of the awesome teachers I have the privilege of working with at Ault, Nicole Donaldson teaches 5th grade Language Arts, told me about a class meeting activity she recently had her students complete. Next, let's add some basic styling to our website. It should look something like this:Īnd with this we've completed the HTML part! 2) CSS So, wrap all the different elements inside the tags, like this: Meme Generator Welcome to Meme-Genie □ To fix this problem, we have the mighty tag which we'll be using to seperate out the different elements! If you run the website now by clicking the green "Run" button at the top, you'll notice that the elements look kinda weird, something like this: Our HTML code so far: Meme Generator Welcome to Meme-Genie □ Next, we need a Generate button: Generate! īut we need something to display our meme, right? This will add a button on our website that'll let the user input a meme template as an image. For this we'll use tags, specifying that we only want images as our file input: Next, we need to take a meme template as our file input. Here, the min is the minimum text size, max is the maximum text size, value is the default value and the step argument is the stepping interval or the precision of the slider. Add the following inputs under each textarea, like so: Now we want "Text Size" sliders for both our top and bottom text. To achieve this we'll use two tags after our tag: Next, we want our memes to have two text fields: Top Text and Bottom Text, something like this: We'll be writing all our below code inside our tag.įirst, add a heading to the website using the tag: Welcome to Meme-Genie □ Let's start by making a structure for our Meme Generator website. Your coding environment will spin up in just a few seconds! We'll be using an online code editor called for this workshop. Do you like memes? Ever wanted to make your own, but didn't know which apps to install? Don't worry because in this workshop, you'll be creating your own Meme Generator-or as I like to call it, the Meme-Genie.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |