Building Our First Website!

Posted on by tchastkavich

Shape of the Day:

  • Name Tag (should be complete)
  • Finish webpage describing Summer in 6 words
  • Create a folder on One Drive and access the One Drive App
  • Complete Questions

Website of the Day:

Website of the day: http://www.crazycardtrick.com/ – What is going on here? Try to look at the code!

1. 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.

2. One Drive Application

  • Hopefully by now you have created a folder on One Drive called Web Development 10. If you haven’t yet, please do so.
  • Now we are going to utilize the One Drive Application that is installed on your computer.
  • First, see if it is already activated in the bottom right of your desktop task bar.
  • If you can’t find it, use the windows key/menu on the bottom left of your screen to search for it.
  • Once it appears on the bottom right of your desktop task bar, right click the icon and select settings.
  • Here you will be able to choose which folders from your One Drive account will be accessible on the current computer you are sitting at.
    • If you want to switch computers or you have to use a different one, you’ll need to do this process again if you want to access the One Drive App and utilize it’s function.
  • Once you have selected your Web Development Folder, it should appear in File Explorer when you open the One Drive “storage space”. These files can now be accessed offline and will update as soon as your computer has an internet connection.

3. Complete the following Questions (if any questions are too challenging you may look for answers online):

  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.