Today’s Goals:

• Review grading
• Finish your CSS practice project & remix someone else’s
• Update your online portfolio
• Learn more about CSS background images

 Today’s Featured Site:

• http://www.csszengarden.com/– See how different CSS styles can make the same webpage appear unique and fresh!

 Grades:

• Click here to see how you will be graded

 CSS Practice

• See Tuesday’s class for instructions if you need to finish. Scroll down to Period 2 & 3- Continuing with CSS, then Steps.
• When you’re done: Be sure to check out the Extras section in step #14. When you’re done with that, you are going to get paired up with another student who is finished and you will remix each other’s projects. To do:
  1. Use codeshare.io so you can share each other’s code. Click Share Code Now and then copy and paste your code into the screen (this is a unique screen just for your code; see the link up top). Your partner will go to the same codeshare link by typing the link into the browser on his/her computer and copying and pasting your code into a NEW Notepad++ file. Then, your partner will copy and paste his/her code in that same codeshare so you can copy and paste his/her code into a new Notepad++ file on your own computer. Each of you will save your new Notepad++ file with the other person’s code as quote2.html (or something like that).
  2. Time to change the CSS! You’re going to make this person’s page look different by changing the following: font (use a new Google Font), text color (choose colors from here), text size (smaller or larger), and finally, a new background image (Pexels, Unsplash, TookaPic, Bing ONLY).

 Online Portfolio

• This is your chance to show off things you’ve created in this class. It’s up to you what you want to add to this page.
• Potential work to add to your portfolio now: Harvest of the Month graphic, Wall of Inspiration quote, a screen shot of the CSS practice page you just completed
• You will continually update your portfolio throughout the year
• Some examples from my students last year: Lincoln, Racquel, Curt, Sam
• Get started: decide what you want to add to your portfolio page. Then, log into the class website here (user name is what you see here for your name, password is whatever you set). Click Pages from the left-hand menu, then search for your name in the search box at the top right. When you find your name, your portfolio page should be right below it. Click edit to start adding content to the page.
• Last step: you need to link your portfolio page to your main page. Go to your main page (list is here, click on your name), then select Edit Page from the top menu. Now, find a place on your page to add a link to your portfolio page (like Lincoln did here).

 CSS Background Image Fun

• There are several different options for adding an image as a background for your webpage using CSS. You’re going to experience these by setting up another webpage with the following code. All of the examples are from here so you can go there if you need some help. Click here to download your starter code. Open up a new page in Notepad++ and paste the code into it; save this as cssbackground.html.
• Change up the background image by doing the following:
  1. Change the background-position: to left, then right.
  2. Change the background-position: left bottom, then left top, then right bottom, then right top.
  3. Change background-repeat: to repeat-y, then repeat-x. Try this with different background-position values like center, left bottom, right top, etc. so you can see how a background image can repeat horizontally and vertically along different parts of the page.
  4. Now you are going to create a fixed background image that stays in place while the page is being scrolled like in this example. Change background-repeat so it’s background-repeat: no-repeat. Add background-attachment: fixed; below the background-repeat line in your CSS code. Now you need enough content on your page to create a scroll bar. Download this code and copy and paste it into your body section.