Shape of the day:

• Outline Review – What do you remember?
• Apps and websites that we like – Discussion
• Web Design and Web Development
• Questionnaire about you and Name Tag – Complete if you haven’t yet
• Summer Vacation in 6 words

Website of the day: http://www.patatap.com/

1. Outline Review – What do you remember?

Copy and paste the following questions into Notepad. Answer them without referencing any material! You have 10 minutes.

1. What room number are we in?
2. What day of the week is it today?
3. What are the three components of a website we will be learning about?
4. Describe an expectation of you for this class.
5. I will be showing you at least one new website a day, where can you find the updated list of these websites?
6. Where will assignments be located and turned in?
7. What grade could you get if you are proficient in a competency.
8. What is a required material in this course?
9. Describe one curriculum content item.
10. What is Mr. Chastkavich’s website link?

2. Make a list – Mr. Chastkavich will assign you a partner

1. What websites do you use the most? Why?
2. What apps do you use the most? Why?
3. What is the difference between an app and a website?

3. 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?

4. Creating a Name Tag

You get some choice for this one – you can use:

• Pixlr Express (Photo Editer/Collage Maker)
• Microsoft Paint (Free hand illustrator)
• Canva (Graphic Design Tool) – need to sign up for an account, it’s free!
• Google Doc (Word Processor & Document Editor)

** Remember to attach this file to the first assignment in Teams **

5. Your Summer Vacation, in 6 words – Let’s play with some code!

• • 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. 
  • 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.
  • Click on this link: https://codepen.io/bgregory/pen/MNQOzo  and 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 in one area of the browser and your project preview is in a different space. You can rearrange this with this software.
  • 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: Copy the code from the HTML box and paste it into a notepad document. Save this document and call it “SummerIn6.html” – when you open this file, it should open in your web browser now. However, since that was only the HTML file, you will also need a CSS file – copy the code in the CSS box, paste it into a new Notepad document and save this file as “style.css” make sure you save it in the same folder on your computer. Once you have completed show Mr. Chastkavich.