Due For This Class

• Read CSS Layouts - Fixed vs Fluid
• Read All About Grid Systems and Choosing a Grid System

Activity

In this class we're going to encounter some spooky / creepy / cool effects that show off the power of CSS and HTML. We will be utilizing a lot of things we've learned already this semester as well as some new effects.

We will be using a tool called CodePen. CodePen is a great tool that allows you to play around with HTML and CSS (and Javascript) and see the results right in your browser! It also allows users to share their code and to make copies of other people's code to play around with it (kind of like Github!).

Because CodePen allows you to code right in the browser, you don't have to make your normal HTML page structure - no , etc. You simply start writing what you would normally have in the browser. It's more limited than a full website, but it's a great thing try out new concepts and to experiment.

1. Create an account on Codepen (you can use your github account to login!)
2. Create a new pen
3. In the bottom right-hand corner, you'll see three buttons - for "HTML", "CSS", and "JS". Click the "JS" one (we aren't using Javascript so we can hide this)
4. In the HTML section, create a heading (h1, h2, etc) and put some text in it.
5. In the CSS section, give your body a background color.
6. In the CSS section, set your heading to a larger font size. Give it a color.
   

Change color on hover!

1. Let's try to change the color when we hover over the heading (the following instructions assume you're using h1)
   • create a new rule. The selector should be h1:hover
   • inside the rule, set the color to a different color than your normal text.
   • try it out! the text should change color!

Using Google Web Fonts in CodePen

You can use Google Web Fonts in Codepen. Just go to Google fonts, pick a font, and use the @import version of the font (the second tab in the 'use' section). Put this at the top of your CSS.

@import url(http://fonts.googleapis.com/css?family=Kavoon);

Fading!

1. When we hover our text, it makes it immediately the new color. What if we wanted to make it a different color slowly?
2. We can use transition. Transition lets us affect the things that happen if the element changes (for example, when you hover). There are lots of reasons an element might change - the one we are using now is when you hover over something.

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

We want to set the color to change slowly by using the following code

h1 {
  transition: color 1s;
}

Read more about transitions

Text Shadow

1. Let's try to add a text-shadow.
   • inside the normal h1 rule, add a new property
   • the property name is text-shadow.
   • there are four values - three numbers and a color.
   • the first number is the x-offset. the second number is the y-offset. the third number is the blur. the color is any CSS color (including rgba - for semi-transparent colors)
   • your final property should look something like this

       h1{
     ...
     text-shadow: 4px 10px 5px #167DAD;
     }
     

Circles!

1. Let's try to make a circle. First, make a box - create an empty div and give it a class.

     <div class="circle"></div>
   

2. In your CSS, give your circle a background color, and a width and a height. Set it so it's centered in the window

     .circle{
   background-color: orange;
   width: 150px;
   height: 150px;
   margin: 0px auto;
   }
   

Glowing!

1. Let's make our circle glow!
2. We can add shadow to boxes too - not just text.
3. In your CSS, in the style for the circle, set the box-shadow with a shadow that has no offset (the first two numbers will be 0), and a lot of blur. Set the color to yellow (or any other color that will stand out on your page)

Growing!

1. We can use CSS to make things bigger and smaller.
2. Let's make our circle bigger when we hover it.

.circle:hover{
  transform: scale(3);
}

Well, that's a sudden change! Let's add a timing to that transition to slow it down a bit! Remember, our transition goes in the CSS for the original element (not the hover)

.circle {
  ..
  transition: transform 1s;
}

Read more about transform and the things you can do!

Exploring other Pens

When you're looking at other people's pens, you will often see that people are using funky code that only sort of looks like HTML or CSS (or sometimes not at all). There are different short-cut ways of writing HTML and CSS that require special processing by a script before the browser can understand it. For us, if you find a codepen that you are interested in, and it has "weird" looking code, you can click the little eye icon in that code box. This will switch the view so you see the processed code.

• Cool Text Shadows
• More Cool Text Shadows
• Button effects
• Another button effect
• Star Wars Opening Crawl

There are some crazy CodePen demos out there. Explore! Fork things! Try things out!

Homework

Content Planning Homework - due Monday, November 3

• Sitemap

  • Using a sitemap tool (such as draw.io) or another method that allows you to create a structured chart, create a sitemap for your final project
  • Email this to me, whether as a screenshot, a graphic, or a link to your sitemap online

• Initial content planning documents (answer the first two sets of questions from Monday's lesson). Email to me as a text document, a link to a Google Document, or a link to an online planning tool.

Content

• What content will you need to have?
  
• What content is already created? What will you need to create?
  

Navigation

• What will your menu items be?
• What pages will you need?
  
• What content will go on each page?
  
• How will people navigate through your website?