Metal Toad University: Class 3

For the rest in the Metal Toad University Series, Click Here.

This was a fun class as we talked about CSS, which IMO, is one of the most pleasurable parts of web development. Styling is what everyone sees when they go to your site so it can be viewed as one of the most important steps too.

First we talked about the basics of CSS. It's one thing to be able to apply a class to an element, but it's an entirely different thing to understand and utilize the cascading nature of CSS. We talked about the specificity rules and how IDs are a little too powerful for everyday use and can cause issues down the line. We talked about the speed of different selectors and how you should probably never use a descendent selector (>) unless we were working with HTML that we can't fix, like what comes out of a CMS.

We also touched on the concept of DRY; Don't Repeat Yourself. This will come up more and more as we get into some of the more programming related tasks.

Specific sections of CSS that were covered were:

  • Layout concepts - display, visibility, position, media queries, and floats
  • Images - Backgrounds, gif vs jpg vs png, text replacement, and Base64 inline elements
  • Webfonts - History of fonts on the web, web font creation and licensing, and icon fonts
  • Colors - Hex notation, RGBA colors, and gradients
  • Animation - Basic animations using transition

Finally we ended the discussion with a talk about abstracting classes for maximum reuse.

Whew! We covered a lot. If you attended the class and are feeling overwhelmed, don't sweat it. We'll go over everything in more detail as we continue the class.

The next class will feature a guest speaker, Robbie Ferrero, who will introduce us to JavaScript. JavaScript will be how we do complex client interactions.

Be sure to check out the video for this class:

Filed under 


I gotta say I trust everything that Dan writes about. I mean, how can you not fall completely in love with this man. His eyes twinkle like diamonds. ...

Seriously though, those taking classes from Dan are lucky to do so! I've worked with Dan in the past and learned a lot from him. He's good people.

Hope all is well man! Let's hit some disc golfing once the weather clears.

-Cherz

PS: Simon still has a rash.


I went disc golfing yesterday! Let me know when it's warm enough for ya :)

Thanks for checking this out and feel free to send anyone you want to the class. And tell Simon to quit whining and get back in the box.

Add new comment

Restricted HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>&lt;code&gt;</code>, <code>&lt;blockcode&gt;</code>, <code>&lt;apache&gt;</code>, <code>&lt;c&gt;</code>, <code>&lt;cpp&gt;</code>, <code>&lt;css&gt;</code>, <code>&lt;drupal5&gt;</code>, <code>&lt;drupal6&gt;</code>, <code>&lt;html&gt;</code>, <code>&lt;java&gt;</code>, <code>&lt;javascript&gt;</code>, <code>&lt;mysql&gt;</code>, <code>&lt;php&gt;</code>, <code>&lt;python&gt;</code>, <code>&lt;ruby&gt;</code>, <code>&lt;sql&gt;</code>, <code>&lt;xml&gt;</code>. The supported tag styles are: <code>&lt;foo&gt;</code>, <code>[foo]</code>.

About the Author

Dan Linn, Director of Development

Dan is a Ninjaneer with over a decade of experience in creating and leading the creation of interactive websites. With a background in print, project management, animation and application development he has worked with a number of well-known brands including Daimler/Chrysler, US Department of Energy, the Emmys, DC Comics and Technicolor. Dan is also the official Fun Master of Metal Toad.

While he attempts normality, his ambitions for his off-hour time are many: he still dreams of fronting a band, writing/drawing his comic book, and fighting crime in a costume. His wife and two kids are his superheroes.

Dan doesn't get to code nearly as much as he would like these days, but he's currently in the process of writing a video tutorial series on Grunt.js.