Shape of the Day:
- Name tags and Scavenger Hunt
- Discussion on websites and apps that we like to use
- World’s First Website, History, Evolution, and Web design vs Web Development
- Create a webpage describing your summer in 6 words
Website of the day: http://www.crazycardtrick.com/ – What is going on here? Try to look at the code! Check out this site too! – https://codepen.io/alvaromontoro/pen/xagVOa
1. Complete your name tag
Please complete your name tag if it is not yet completed. Make it your desktop wallpaper… for now.
2. Scavenger Hunt
Show me your completed scavenger hunt if you have not yet done so.
3. Make a list with a partner – Answer these questions:
- What websites do you use the most? Why?
- What apps do you use the most? Why?
- We will discuss as a class
4. Web Design, History in the making:
- Click here to see the first website ever made
- A history of web design can be seen here in 9 animated gifs
- From HTML all the way to mobile browsers, the evolution of the web has come a long way
- Web design vs web development – what’s the difference anyway?
5. Your Summer Vacation, in 6 words
-
- Think – how did you spend your summer? Write words or sentences that describe things you did. Use the computer software at your fingertips (sticky notes on desktop, Notepad, Google doc, Microsoft Word, Office 365)
- ONLY Choose 6 words to describe your whole summer. Look at these examples: https://glitch.com/edit/#!/remix/nasal-headline (mine) and
https://d157rqmxrxj6ey.cloudfront.net/mozillalearning/11703/(sample project). - Find a background image to use for your page. Use either pexels.com or unsplash.com (we will be using these free stock image sites frequently). After choosing an image, click on it and leave the page open in a separate window for later.
- Go back to the sample project – https://d157rqmxrxj6ey.cloudfront.net/mozillalearning/11703/ and click Remix. Let’s take a look at the code. Where do you change the words in HTML so that it changes on the page? Where is the code to change the background image?
- Your code (HTML and CSS) is on the left and your project preview is on the right.You can either click on Tutorial for step by step instructions or try changing the code to see what happens. You can also follow the instructions below, OR try reading the comments in the code and follow the steps there.
- When you are ready to add your background image, go back to the browser window with the image you selected and right click on it. Select “copy image address” and paste the link in the spot that replaces the previous image in your code – this should change the background image.
- Change the words in the project to the six words you finalized to describe your summer vacation.
- 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? Where can you get this information?
- 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).
6. 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?