Apply for the next session

Lesson Intro

There are a bunch of things that need to come together! So, you’ll see a lot of medleys this week.

You can always work on other things, you know. Practice practice practice.

The Goals

  1. Get a quick introduction to the Cascade

    Cascading Style Sheets! You’ve been using them – and the cascade already, but we haven’t talked about it.

  2. Plan to get a github account

    Pick out a user name! It really doesn’t matter, as long as you can remember it. ; )

  3. Start thinking about how we'll tune up the alpha-net

    It’s a blank canvas, so – how could we combine the challenges and the practice and turn them into a portfolio earlier than later?

  4. Get a quick overview of blend modes in Affinity designer

    There are a few quick tricks to get some texture and mood for background images.

Resets

We use Eric Meyer’s reset, but there are many different ones. Do they make sense? They aren’t a full “reset” because you can’t just take away all of the properties. The intention is to remove any styles that are added by the various browser creators.

If you were to bleach your hair to reset it – you would still have hair. Let us know if you need any other weird metaphors.

Setup

The reset removes most of the browser styles and gets us a clean slate, but there are a bunch of settings we can put in place to make life easier. Have you had a chance to look over all of these examples?

Spend some time with those. If they don’t make sense yet, let’s talk about it.

These site-wide settings will make everything easier to reason about. However, if you don’t fully understand them – they could be an even bigger source of confusion.

Key
concept

Blend modes

Digital imaging and graphics editing software often come with a set of layer blending options. Depending on the assets, order, and blend mode selected – the layers will visually blend in unique ways.

We’re trying to track down what inspired these…

Wikipedia


In our case, we’re using multiply to blend some bunnies with a color field.

Guess what! You can do this right in CSS now! WHAT?!

Today's Exercises:

  1. Go though those Pens again

    Makes sure you have these down. The box-sizing, the images, and the links. Talk to someone about them and explain them. Ask for help if they are still confusing. Try and use them in a project.

    30 minutes suggested
  2. Pick out a GitHub username and get a GitHub account

    https://github.com

    The regular free account is just great!

    And if you haven’t set up Tower yet, then git to it.

    20 minutes suggested
  3. Make some blended background images

    Try it out in our graphics program. Set some images to black and white. Apply some blend modes. Share them with the group. Try out the CSS version. What about this?

    40 minutes suggested

In Conclusion

There are some more tools for your toolbox!

Update your boilerplate and commit your changes in Tower. Ask any questions you have.

Checklist

  1. You understand why we set the box-model to border-box.

  2. You understand why we need links to be display: block when they are parent elements.

  3. You know how to set images to respond to their parent element’s size.

  4. You updated your boilerplate code and committed the changes with Git.

  5. You’re starting to think of ideas for your website.

  6. You played with blend modes in the graphics program.

Questions

  1. Where might you use blend modes in a real project?

  2. What do I want people to think when they visit my website?

Apply for the next session