Thursday, October 31, 2013

Holloween class recap & Homework assignment

Thanks all who came to the Halloween class! I know you have a lot going on with your other classes, and with life in general, and probably Halloween in particular, so it is an honor to have you show up for an "optional" class about I subject I love.

Today we did some CSS layout exercises. We started with an undecorated sample resume (http://bit.ly/1dUTtzy) and over the course of the class we used the plunkr environment to turn it into something that looked decent.  We worked with CSS properties like font-size, font-weight, text-align, margin-bottom, margin-top, margin-left, margin-right and a few other things. We discussed the difference between using "em" and "px" for setting the font size and we create an anchor that used an "email href". There are many ways to do the same thing and we did a couple of small experiments to demonstrate that.

The homework assignment is to use the same CSS techniques we practiced in class to make the U.S. Constitution have a nice presentation. The link to the homework is below:

http://bit.ly/17vQMml

Doing this work should help cement the concepts and techniques we went through in class. Please post a link to your plunkr solution here on the blog. If you missed class, try to do it anyway. We're here to help...and remember you can always GTS!

Today we handed out a few $1 bills for laughs. Who knows, maybe next class I'll hand out $5 bills. Let you classmates who have been ditching class know they may not only be missing out on learning so lucrative skills, but they may be missing out on cash prizes ;)

I really love programming and development of all kinds (web, server, embedded systems). It is a lot of fun once you get going with it and people actually pay you good money to do it! Pretty fricking amazing! Anyway, love having you come to class and hope to see you all really develop your developer chops over the next couple months.

Have a great weekend!

-Dan

8 comments:

  1. Hey guys, I just had a quick question. Once my homework is completed, how can I upload it to the blog? If I remember correctly, that's how you wanted us to hand it in, yes?

    Please let me know.

    ReplyDelete
  2. Hi Pierz. Post the link to your plunk in a comment to this blog post. -Dan

    ReplyDelete
  3. Roger that~!

    http://plnkr.co/edit/OBqXbW8Ar1C6wdpXGKOf

    ReplyDelete
  4. Nice work Pierz. Just a bit of coaching from looking at your HTML/CSS: Unless you really know what you are doing, try to stick to one style of measurements. You used px, em, and %. This might get harder to manage on a bigger project when you get strange behavior.
    Thanks for pioneering the effort of posting your homework Pierz!

    ReplyDelete
    Replies
    1. Thanks Derek, I'll pick a format and implement it.

      If you wouldn't mind, can you give me any examples of when you might want to use a specific style of measurement over another?

      Thanks,
      -Piers

      Delete
    2. Piers,
      This is a really good question. I think the biggest difference is that em behaves better when you are zooming a web page. In chrome is is ctrl-shift-plus to zoom in and ctrl-shit-minus to zoom out. Here are some people arguing the merits of both: http://stackoverflow.com/questions/609517/why-em-instead-of-px. I tend to use px more often than not despite this, but will probably commit to learning the ins-and-outs of using ems for text.
      Because of responsive design, a movement to make web pages behave well on mobile devices, tablets and full sized screens, people are using %'s for widths of items. Speaking of layouts, look at the blog post for Nov 7th and do the reading and homework surrounding Twitter Bootstrap, which when used correctly, will ease many web page layout whoas.
      Cheers,
      Derek

      Delete
  5. Pierz, this looks really good! I like that you were able to make this look really good with just a minimal amount of CSS. Nice job!

    One note: for the .section selector, you are using "font-weight:italic". Change that to "font-style:italic" and the sections will change to really displaying italic.

    Nice job with this one.

    ReplyDelete
    Replies
    1. Hey Dan, thanks a bunch! I'll make sure to go back and make the change.

      Delete