Today’s Goals:

• Period 2: complete school website usability test
• Period 2 & 3: continue learning basic CSS

 Today’s Featured Site:

• http://retrosite.ninja/– See the internet before widespread use of CSS (it wasn’t pretty!)

 Quick PSA’s:

Spirit Week

• Monday – Happy Halloween…don’t forget your costume!
• Tuesday – Boston Sports Day
• Wednesday – Wacky Wednesday
• Thursday – Throw Back Thursday
• Friday – Mustang Pride Day

School Lunch Taste Test

• If you like seafood and have first lunch on Thursday, November 3, email Ms. Smith at rsmith@medford.k12.ma.us

Free desktop wallpaper for November

• Courtesy of Smashing Magazine

 Today’s Assignments

Period 2 ONLY- Usability Test

• School website usability test with Tufts graduate students Kaitlyn and Kerrianne

Period 2 & 3- Notepad++

• Help Notepad++ help you! Go to Settings, Preferences, Auto-Complete and enable automatic completion of brackets and html tags and words and functions (very helpful for both CSS & HTML).

Period 2 & 3- Continuing with CSS

• In case you’re curious, click here to find out how hex values work
• CSS to master this week:
  • How to add CSS code to your webpage: where to put it and how to apply it to your HTML code
  • How to add a CSS comment
  • How to change font color
  • How to change the font (and how to add a Google font)
  • How to align text (left, right, center)
  • How to add a text shadow
  • How to style links
  • How to add an image as your webpage background
  • How to change the body background color
• To practice, you’re going to make something like this. You will work at your own pace and have today & tomorrow to finish. Remember, if you’re really stuck, you can ask someone for help and also view the page source of my example.
• Steps:
  1. Pick a quote (you can use same one from Wall of Inspiration if you want)
  2. Pick a background image (Pexels, Unsplash, TookaPic, Bing ONLY). Download and save this image in your folder or desktop. Make sure you give it a simple, one word name.
  3. Open Notepad++ and start a new webpage by adding opening and closing html, head, title, and body tags. Save this page as quote.html IN THE SAME PLACE YOU SAVED YOUR PHOTO.
  4. Type or copy and paste your quote in your body section in h1 (headline) code. Example here..
  5. Type the name of the person who said your quote below your quote. Put the name in paragraph or em (italics) tags.
  6. Copy and paste a link to the webpage where you got your quote. The visible text that is “clickable” should say Source (like in my example here). This link should open in a new window. If you don’t remember how to add a link, look at one of your past projects or see here. Put your link inside paragraph tags or add some line breaks between your link and the quote author above it.
  7. Now it’s time to add some CSS to style your HTML. Add some style tags to your head section (see your practice page from last week or see here). You only want to add the opening and closing style tag in your head section; that’s all.
  8. Let’s style your quote first. We added it as a headline. Type h1 inside your style tags and then a curly bracket (next to letter P on your keyboard, hit shift key). Type font-size: 60px; (you can change that value if you want). Then type color: #00796B; and go here to choose a color. Finally, center your quote by adding text-align: center;. See this example for help and don’t forget to end each line with a semi-colon ;
  9. Now add a text-shadow to your h1 so your quote stands out more. Add the code like you see here and change the color of the shadow and the size values if you want.
  10. It’s time to style our body section. Type body in your style sheet above your h1, then add a curly bracket. Let’s add a background color by typing background-color: #cccccc; and make sure you change that gray color to something else. Now let’s make sure the font color will match our headline by typing color: #00796B; (make sure the color is the same as your h1). This step will ensure that your link and quote author text will be the same color as your headline. You can also make them a different color if you want. Make sure to add font-size: 20px; (you can change this value) or else the browser will just make it some size. Also add text-align: center; so the link and quote author text line up with the quote.
  11. Let’s add a much more exciting font! You are going to add a Google Font. First, go here and check out the different fonts. When you find one you like, click the plus sign in the red circle. Then, click on Family Selected at the bottom of the webpage. Copy and paste the link href code in your head section below your title tag. Then, copy and paste the font-family declaration in your body section in your style sheet. See this example.
  12. It’s finally time to add a background image! First, see how large your image is (right click on it, and select properties, or the width and height might just show up when you open your folder and look at the image). Make sure your image is no wider than 1500 pixels. If it is, go to Pixlr.com, resize it, and save it to your folder. Make sure you give it a simple, one word name. Now, add this code to your body section in your style sheet. Change the image name to your own.
  13. Last thing: style your link. Grab the code from here, paste it below your h1 in your style sheet, and change the colors. Also add text-decoration: underline; for a:hover.
  14. Extras: Try adding a negative value to your text-shadow. What happens? There is a mistake in the code of the example I gave you. What is it? See if you can change the cursor on your page by adding cursor: alias; or something else from this list – put this property in your body section in your style sheet.