Building Our First Website

Posted on by tchastkavich

Shape of the Day:

  • Checking in on Scavenger Hunt and Name Tag (should be complete)
  • Start on webpage describing summer in 6 words
  • Create a folder on your Network Drive
  • Complete Review Questions about HTML

Website of the Day:

http://www.koalastothemax.com/ – Is this just a big circle or…?

1. Name Tag and Scavenger Hunt

Ensure Mr. Chastkavich has seen both your Name Tag and Scavenger Hunt – these are your first marks for the class.. and they are easy ones!

2. Summer in 6 Words – Your first webpage for the class

  • 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).
  • Reflection and discussion: talk to person next to you and then we’ll share some thoughts as a class
    1. How is telling a six-word story similar to or different from telling a longer one?
    2. How do images add to a story?
    3. How did changing part of the code change part of your story?
    4. What was it like to start with someone else’s story to remix? How was it different from beginning a story on your own?

3. Create a folder on One Drive

  • Start by accessing One Drive.. see if you remember how to access it
  • Create a folder called Web Dev 10
  • Once you’ve created it from the browser version, try syncing your one drive account to the computer. This may take some time if you have a lot of folders to sync. In that case, you can always pause it, and sync only the folders you need – for now it can simply be the Web Dev 10 folder you created. Put the folder on your desktop!
  • Now if you have to work on a different computer, you should be able to access one drive and you can sync it there as well if you like. Or you can access any files from the browser version.

4. Complete the following Questions for Review of HTML (if any questions are too challenge you may use Google):

  1. What characters are used in an HTML tag?
  2. What else do you notice about HTML tags?
  3. Why do we have to use HTML tags?
  4. What are meta tags?
  5. What is the head section?
  6. What is the body section?
  7. What is the title tag? Where can you see it?
  8. How do you create a comment? Why are comments used in this project and what do they help you do?
  9. Is CSS used in this project? How do you know?
  10. How does CSS look different than HTML?
  11. Is JavaScript used in this project? How do you know?
  12. If you think JavaScript is being used here, what is it being used for?
  13. Come up with three questions about this code and/or HTML tags.
    • Now finish off by going to the website of the day and see what HTML tags you recognize.