Monday, November 25, 2013

Intro to jQuery

In the class today we went over an introduction to jQuery.
Make sure you read all about jQuery for any questions you have here: http://jquery.com
For documentation on all the jQuery calls: http://api.jquery.com

We learned how to select elements by ID and by Class name.  The functions we learned about are: hide, show, click, val, text, and html.

For the in class exercises refer to these links:

#1: http://plnkr.co/edit/lHOBZJEpCJIqaYngzdsz

#2: http://plnkr.co/edit/gXFKuOQjrHxPm3qd92UR


Thursday, November 21, 2013

Project preparation

In class today, we built a framework for our future projects.  We set up multiple pages that were all linked together.  We linked to Twitter Bootstrap, a CSS framework to use for our page layouts.  Here is a plunk showing the concepts we covered.  Feel free to use it to get started on creating something big!

Think about the website you want to build for your project.  And don't miss Monday, we are going to introduce JQuery, which makes certain things in javascript a whole lot easier.  From now on, Mondays are for Javascript and Thursdays we will introduce a few concepts and then help you with any projects you are working on.  

If you are wanting to learn some new skillz, Codecademy is a great site to learn all sorts of new things.

Thanks for a great class today guys!

Thursday, November 7, 2013

Advanced CSS

Today, we went into CSS a little deeper.  We used this plunk.  We covered how when you write HTML, the browser styles this for you, WITHOUT any CSS.  When you are viewing a webpage and inspect an element or use F12 to view the Chrome debugger, it will tell you which elements were style by you directly, supplying the file and the line number.  It also shows you which rules were applied via the browser, the rules that are applied by your browser are referred to as "user agent stylesheet".  When you don't have a CSS rule that applies, the "user agent stylesheet" is used.  The "user agent stylesheet" is the default and anything more specific, supplied by you overrides these settings.  You can have multiple stylesheets.  If two rules collide, the LAST one that is applied wins.
I have found the best practice when setting up your rules is to first write your HTML as correctly as possible, then start applying your CSS directly to those HTML elements.  Initially instead of <p class="normal">some text</p> and it's corresponding css rule p.normal { font-size: 12px; }, try to just use <p>some text</p> and css rule p {font-size: 12px;}.  Use classes as exceptions to your normal CSS until you need more control over the element.
More specific rules win in CSS.  div#header wins over #header and div.  p.inverse wins over .inverse and p.  Keep this precedence in mind, and be ONLY AS SPECIFIC as you need to be.  This will help later.  As an example in the plunk, in the CSS I used the selector nav ul li.  This was enough to JUST target the ul (unordered list) from the navigation.  It didn't effect the ul on the bottom of the page.  We could have used classes to do this, but we didn't need to
During class, we downloaded and started using Twitter Bootstrap.  This CSS framework solves many annoying problems with browsers.  It does a reset so your pages should look the same in Chrome, Firefox, Internet Explorer, etc..  This wasn't the case before.  It also makes it easy to create pages with columns.  One of the largest benefits of Bootstrap is that if you follow their guidelines, your web page will work well on a desktop, ipad or smaller mobile device.
I put several divs on the page with twitter bootstrap classes.  These won't do anything until you download the latest version of Bootstrap and put it into your project. Make SURE you have the latest, version 3.0.2.  A couple students got version 2.3 accidentally and it didn't with our HTML.  So download it, look in the CSS directory and copy the contents of the file to bootstrap.css in your project (click "new file" on the left).  Make sure to link bootstrap.css to all of your HTML files.  Create another <link> tag, similar to the one in your index.html file.
There are a lot of things in Twitter Bootstrap.  Take a look at how I used it in the plunk.  You need to have divs nested within each other.  Start with a div like this:  <div class="container">  inside of that put a row <div class="row"> inside of that put your columns.  Each row can have 12 and only 12 columns.  You can use <div class="col-md-12"> to fill the whole page for that row, or you can split it up however you like, for example:  <div class="col-md-4"></div><div class="col-md-8"></div>.  Put your content inside the divs.  In the plunk, I put a border around the divs so it was clear what was happening.

Useful to remember:  Ctrl-F5 forces your browser reload CSS and Javascript.  Remember this when you CSS just isn't responding to what you are doing.

Ok, for homework, download Bootstrap, put it into your project and add a contact us page to the project.  Make sure your menu works to link to it and put some content on there Bootstrap style (container, row, column).  Post your plunks on the blog when you are done, OR if you have problems.  If you get stuck, post and ask what's wrong with the code.  You should have a mini website when you are done, good luck!

Monday, November 4, 2013

JavaScript Fundamentals I

Class Recap

We covered a lot of ground in this class! Maybe a little too much :)

  1. Functions
  2. Control Structures
  3. Loops

We worked together to fill in the missing pieces of a partially complete Lottery web application:

Homework

If you missed this class, don't worry! You can catch up by doing the Homework.

  1. Create an account at Codecademy
  2. See how far you can get through Codecademy's Introduction to JavaScript track: http://www.codecademy.com/tracks/javascript

You can learn a ton by going through these lessons. Whether you attended or not, I encourage you to spend some time on this. It's worth it! (Lessons 1-10 cover material closely related to what we went over in class, plus some.)

Slides