Today’s Goals:
- Learn how to find information on our class website
- Discuss websites and apps we like
- Create a webpage describing your summer in 6 words
Today’s featured website:
- https://www.patatap.com/ – JavaScript makes our boring computer keyboards a lot more fun! Let’s view the code. How can you do that and/or have you done that before? Can you read this code? What do you recognize?
Monthly desktop wallpaper!
- Smashing Magazine is a great online resource to learn about web design. Each month designers from around the world create monthly-themed desktop wallpaper (we will create these later in the year). This wallpaper is available for free- check out September’s here!
Explore the class website
Check out our class web site to find answers to the following questions. Write them down on your computer, phone or a piece of paper.
- What’s my dog’s name?
- Where should you go to see what we’re working on in class?
- When will you begin learning JavaScript?
- What percentage of your grade is effort?
- What are you most looking forward to learning this year?
- Name someone in my class last year who’s name begins with a “J.”
- What’s the date of the last tweet that was posted to the class account? What was the tweet about?
- What’s on the Cool Stuff page?
- What’s the first thing you should do before creating your own web site?
- Where can you find all of the featured websites we look at every class?
- What is on the After School? page?
Sites & apps we like
Talk to the person next to you and make a list. Then we will share with the class.
- What websites do you use often? Why?
- What apps do you use often? Why?
6 Word Summer Vacation
- Think about how you spent your summer. Write down a few sentences or words that describe your activities. You can do this on paper, on your phone, or somewhere on your computer (sticky note on desktop, Notepad, Google doc, etc.)
- Choose 6 words to describe your summer. Feel free to look at these examples: https://thimbleprojects.org/agoldsberryteacher/537670 (mine) and https://d157rqmxrxj6ey.cloudfront.net/mozillalearning/11703/ (sample project).
- Find a background image to use for your 6 word summer. Go to either pexels.com or unsplash.com (free stock image sites we’ll use frequently). Once you find an image, click on it and leave the page open in your browser.
- Now view the sample project https://d157rqmxrxj6ey.cloudfront.net/mozillalearning/11703/ and click Remix. Let’s look at the code. Where do you change the words? Where do you change the background image?
- Your code (HTML and CSS) is on the left and your project preview is on the right. Click on Tutorial for step by step instructions or simply try changing the code to see what happens.
- To add your background image, go back to the picture you selected in step 3 and right click on it. Then select “copy image address” and paste the link in the correct place to change the background image.
- Change the words in the project to the six words you chose to describe your summer.
- Questions: How could you change the font size? How could you change the banner? How can you change the link and photo credit name to add the information for your photo?
- To finish: Make sure you show me your completed project. Optional- publish the project if you want (you will have to sign up for a free account.
- Reflection and discussion: talk to person next to you and then we’ll share some thoughts as a class
- How is telling a six-word story similar to or different from telling a longer one?
- How do images add to a story?
- How did changing part of the code change part of your story?
- What was it like to start with someone else’s story to remix? How was it different from beginning a story on your own?