Vitamins_and_Minerals RSS : Gourt

Rails 3.2.1

Greetings, folks! If you haven’t been keeping up with the latest Rails news, we have a new version! Ruby on Rails 3.2.1 has recently been released with some very welcome changes! Faster development mode – Rails now only reloads the classes you’ve actually changed between requests in development mode. Explain queries – In development mode, you can automatically show the explain of certain queries by calling .explain at the end of your query. The results will go in your log. Active Record Store – Active Record now has a built in way to do key/value storage right from your models. No plug-ins or external gems required! You can also check out the change log of all of the fixes and changes, both big and small. Enjoy!

Treehouse Groups are live!

You can now create a Treehouse Group Account for your company, university, school or any grouping of two or more people. Group plans are 25% cheaper so it’s a great way to save money. We’ve added a simple Groups Dashboard that allows you to see … Group Activity: Who’s watching videos and unlocking Badges Ranking in your Group, based on Badge unlocks More info … Group pricing is 25% off normal prices, which allows people with large groups to save a bit of money. You only need 2+ people to sign up. If you’re already a Member, you can’t be brought into a Group. We’ll address this in v2 of Groups. However, please contact Support if you need help: help@teamtreehouse.com Sign up here We have big plans for adding more features to Groups, so stay tuned. This is just an MVP (minimum viable product) release, so we could get it out to you all and see what you think :) General Design Refresh Tyson, our new Designer has also done a site-wide refresh on the app. It’s even easier to use now and super fast. Tyson lead the Digg Design Team for awhile so he knows all about optimizing for speed :)

Free Video: Getting started with iOS development

In this 6 minute video, we will get you started with iOS development by learning about the benefits of Apple’s iOS Dev center and how to gain access to the integrated development environment (IDE) called Xcode. This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like … Accessibility CSS3 Aesthetic Foundations Django HTML CSS HTML5 iOS Development JavaScript jQuery NoSQL PHP Responsive Web Design Ruby Ruby on Rails UX Version Control WordPress Theme Design New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Another Round of Treehouse Nerd Merit Badges!

We recently launched Treehouse and, thanks to you, it’s been successful beyond our wildest expectations. Thank you all so much! We had so much fun celebrating with our previous giveaway, that we thought we would do another one.If you tweet to @treehouse the name of your favorite web app, we’ll randomly pick 10 winners to receive a "Mike the Frog" Nerd Merit Badge! Here’s a picture of what they look like:

Pears: An open source collection of common markup & style

Lo and behold, Mr. Dan Cederholm has done it again! This time the folks over at SimpleBits unveiled their latest project, Pears, an open source WordPress theme that enables you to get your own pattern library up and running quickly. This is super helpful to collect, test and experiment with your collection of semantic HTML & CSS patterns. For beginners it can be a great way to begin to understand the relationship between markup and style. No matter which audience you fall into, it is a handy tool for improving speed and productivity. Also make sure to take notice of the Pears website itself, which is beautifully designed and responsive. Thanks Dan, for making our lives more enjoyable with Dribbble and easier with Pears. :)

Future Insights Live – Early Birds Extended!

If you caught Ryan’s article last week, he told you about our brand new, not to be missed Vegas event – Future Insights Live! We’ve combined the Future of Web Apps, Design and Mobile into one massive five day event all geared toward you! Whether you’re a Web Designer, Developer or Entrepreneur there will be something for everyone. We are launching a brand new scheduling app within the next couple of weeks which will list full details of the huge conference schedule and give you an overall feel for the event. So with that in mind, we have decided to extend our Early Birds (saving you $200) until 24th Feb! That way you can see EXACTLY what you’re paying for. We’ll be launching the full schedule by the end of the week, so please check it out and join us for our biggest event yet!

Check My Colours

Developers often write tests to make sure their code is working properly, and designers should be thinking along the same lines. It’s difficult to test aesthetics, but with tools like Spur App you can make sure that your design looks good for people with color blindness and other mild vision impairments. You can also make sure that your design has enough contrast and feels "balanced" on both sides. Check My Colours is another web-based tool that can help out. Simply type in your live URL, and you’ll get a listing of all the areas where your color contrast can be improved. It’s a bit more technical than simply looking at a black and white image, but it’s good for more detailed analysis, especially on a complex web application that might have lots of dynamic views.

Full Day Web Design Workshops: Which Would You Pick?

At Carsonified Towers, we’re all getting super excited for May, when The Future of Web Design hits London for another three days of learning and inspiration. As ever, we kick off the show with four full-day workshops – each lead by a totally inspirational industry leader. From 9am am to 5pm, we’ll be rolling up our sleeves and knuckling down for a serious hit of web savvy. Numbers are capped at 40 for each workshop, ensuring a great learning environment. This year’s chosen workshop topics are already proving popular. First up, we’ve got the unstoppable force of web awesomeness that is Paul Boag. Director of Headscape, Paul will be leading a crash course in Running A Successful Web Design Business: ”We like to think that being a successful independent web designer is about creating great websites. Its not. Running your own business is about a lot more than having the right professional skills. ” After wowing the crowds as a Rising Star back in 2011, Steve Fisher has rapidly become one of our most popular speakers. He’ll be joining us again in London to lead his Rock Solid UX Deliverables workshop: “No longer something that has to always be hugely complex and costly, we’ll cover the back-to-basics approach to UX design in this workshop and how to practically dispatch a rock solid responsive web design UX deliverables package.” Next up, creator of the uber popular Coach to 5K app, Josh Clark will be crossing the Atlantic to deliver his Teaching Touch workshop – a sell out success at FOWD NYC last year: “The workshop presents nitty-gritty ‘rule of thumb’ design techniques that together form a framework for crafting finger-friendly interface metaphors, affordances, and gestures for a new generation of mobile apps that inform and delight.” Last but not least, longtime Carsonified favourites, the Web Standardistas will be joining the fun, to teach their Good Ideas Grow On Paper workshop: “Armed with some fundamental design principles and an abundance of tools – which naturally includes the Standardistas’ ‘Bag of Awesome™’ (containing a veritable cornucopia of material) – we show the aspiring analogue designer a range of methods for breaking out of the stranglehold of the often clichéd digital world.” Which workshop appeals the most to you? For detailed information on all of them, head on over to our schedule page… Thanks to Nationaal Archief for the photo used above.

SQL Fiddle

If you like jsFiddle, then you will love SQL Fiddle. It allows you to select a database, build a schema, populate the schema and run queries against it. The service currently supports MS SQL, MySQL, Oracle, and PostgreSQL. Why is this interesting? You can compare databases, post questions to forums along with your schema and query or just prototype an idea.

Free Video: Control Flow

In this 4 minute video, you will learn about the concept of control flow in Ruby. This goes in to using if/else statements and case statements This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like … Accessibility CSS3 Aesthetic Foundations Django HTML CSS HTML5 iOS Development JavaScript jQuery NoSQL PHP Responsive Web Design Ruby Ruby on Rails UX Version Control WordPress Theme Design New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Git For Designers (Part 1)

Hi designers! I’m not a designer. Sorry. I’m a developer. I can barely tell when things look good or not. This week I learned that there are different ampersands out there (thanks, Allison!). But that’s not why I’m writing today. We all have to work together. Professionally, one way we do that is by using version control. A version control system tracks changes to your code. There are a lot of different version control systems out there. Today we’ll be talking about git. Specifically, as it relates to designers making web sites. Why Use Version Control? You might be wondering why you should use version control, even for a site you’ll never collaborate with anyone on. This is a valid question. I can best illustrate the answer with a scenario you may have encountered in the past. Let’s say you’re in the middle of making a site and want to try something crazy with the css. Maybe you want to do a bit of an experiment and make everything strange shades of yellow and red. You don’t know if you’re going to keep the work when you finish it. Since it’s an experiment, it would probably be a good idea to not mess up your working version of the site. At this point, you might be thinking of creating a copy of the site and making your changes on the copy. Maybe you’re sure that you’re going to use this work and you’re going to crank through. Maybe it doesn’t work out, though. Wouldn’t it be nice if you could take a snapshot of your site now, do your experiment, and not have to worry about whether you mess things up? That’s exactly what version control is for! Step 1: Install and Configure Git In order to start working with git, though, we need to install it. Git is fairly easy to install. If you’re using Windows, GitHub has an excellent set up guide to get git installed on Windows. They also have great guides for Mac OS X and linux. If you don’t already have git installed, follow those guides and come on back here. Once you have git installed, you have to tell it who you are. This is done using the config command. Open Terminal and type in the following: $ git config --global user.name "Jason Seifer" $ git config --global user.email "jason@teamtreehouse.com" Step 2: Initialize a repository We’re going to initialize a git repository now. A repository is just a directory with one or more files we want to track the changes of, in this case our web site. Open up terminal (or command prompt on Windows) and change to the directory containing the site you want to put in to git. You do that with the cd command. I’m going to put my web site in the Sites/think_vitamin directory. [~] $ cd Sites/think_vitamin [~/Sites/think_vitamin] $ Once you’re in there, type the following: [~/Sites/think_vitamin] $ git init Assuming you have correctly installed git, you should see the following: Initialized empty Git repository in /Users/jason/Sites/think_vitamin/.git/ This is git telling you that thinks are working and that the path it gave you is now a repository. If you don’t see that output, go back to step 1 and verify that everything was correctly installed. Step 3: Add Your Files Now that we have initialized our git repository, we have to tell git what files we want to add to the repository. In order to do this, we use the add command. The add command takes either a single file or a path. The add command takes the changes you’ve made and adds them to something in git called the staging area. The staging area is kind of like a waiting room for git. It lets you tell git what changes you’re going to add to the main index. Since we are already in the directory with our web site, we’ll tell it to add the path of the current directory: [~/Sites/think_vitamin] $ git add . At this point, you won’t see any output. My example is just an index.html file. In order to see what git is about to stage, you can use the status command: [~/Sites/think_vitamin master]$ git status # On branch master # # Initial commit # # Changes to be committed: # (use "git rm --cached ..." to unstage) # # new file: index.html # The first line of the output says “On branch master“. In git, a branch is just a pointer to something called a commit (explained in the next section). Since this is our first commit, git lets us know that on the second line of output where it says Initial commit. Next, git says there are changes to be committed. My index.html file is there since it’s the only thing I have in the directory right now. This is good! Step 4: Commit Your Changes A commit in git is a pointer to a series of changes that you have told git you want to track with the add command. When you commit your changes, git writes them to the index. This is git’s way of saying “this is what the repository looked like at this point in time.” So let’s commit our changes: [~/Sites/think_vitamin]$ git commit -m "Initial commit" [master (root-commit) 542d5fa] Initial commit 1 files changed, 1 insertions(+), 0 deletions(-) create mode 100644 index.html Here we use the commit command to tell git to commit our changes to the repository. The -m argument told git that we want to give the commit a message. My message here was “Initial commit” because this was the first commit to the repository. As you make changes, you can be much more descriptive. This is helpful when working on larger teams. Time Pope has a great article on writing good commit messages if you’d like any pointers. The important thing about commits is that, once you have committed changes, you can always go back to how your repository was at the point in time of that commit. How cool is that? That means that you’re now free to make horrible changes to your site. Wnat to see how Comic Sans looks for all the headers? Go for it! You can always go back. Step 5: Make some changes Now that things are committed, you can feel free to make some changes to your code. In my example web page, I made changes to the header of the page. Now we can run git status again to see what happened: [~/Sites/think_vitamin]$ git status # On branch master # Changes not staged for commit: # (use "git add ..." to update what will be committed) # (use "git checkout -- ..." to discard changes in working directory) # # modified: index.html # no changes added to commit (use "git add" and/or "git commit -a") Now we’ll add the file we just changed: [~/Sites/think_vitamin]$ git add index.html 1.9.3 [~/Sites/think_vitamin]$ git status # On branch master # Changes to be committed: # (use "git reset HEAD ..." to unstage) # # modified: index.html # Finally, we’ll commit the change: [~/Sites/think_vitamin]$ git commit -m "Modify home page header" [master bc8251b] Modify home page header 1 files changed, 1 insertions(+), 1 deletions(-) Great! We just made our first two commits. Our co-workers will love us for writing a descriptive message along with the second commit, too, although they might also still be mad for taking the last cup of coffee. Step 6: Make a branch Remember earlier when we were talking about making experimental changes that you may want to keep? That’ what branches are for! Branches let you easily separate your work. You can have two branches going at the same time with different work. Branches are great for experimentation with something that you’re not sure you’re going to keep. Let’s say we wanted to change the font on all headers to Comic Sans. You’re not sure how this is going to look (bad) but your client really wants you to give it a try anyway. Let’s create a branch to do that just in case we want to switch back. In git terms, we call this process creating a branch. We do that by checking out the branch and passing a flag to git saying that we want to create it: [~/Sites/think_vitamin]$ git checkout -b comic_sans Switched to a new branch 'comic_sans' Now that we’re on our comic_sans branch, we are free to make changes and commit them. This won’t affect anything on our master branch until later. Let’s make our changes: [~/Sites/think_vitamin]$ git status # On branch comic_sans # Changes not staged for commit: # (use "git add ..." to update what will be committed) # (use "git checkout -- ..." to discard changes in working directory) # # modified: index.html # no changes added to commit (use "git add" and/or "git commit -a") Git also let’s us see what changed in between what we’re about to stage with the diff command: [~/Sites/think_vitamin]$ git diff diff --git a/index.html b/index.html index 159202e..266d025 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ - Hello world + Hello world We can also add and commit the change with one command by using the -a flag when committing: [~/Sites/think_vitamin]$ git commit -am "Make header font comic sans" [comic_sans 94af8b2] Make header font comic sans 1 files changed, 1 insertions(+), 1 deletions(-) Now we’ve committed to the comic_sans branch. Sweet! Step 7: Merge your changes Our client is now happy with the header changes. Our experimental branch we created now needs the changes to make their way back in to our main branch. We do this through a process called merging. What we want to do is merge or changes from the comic_sans branch back in to the master branch. First, we have to go to the branch we want to merge to. We do that by checking out. This time, we won’t use the -b parameter since we’re not creating the branch: [~/Sites/think_vitamin]$ git checkout master Switched to branch 'master' Now we use the merge command to get our changes from the comic_sans branch in to master: [~/Sites/think_vitamin]$ git merge comic_sans Updating bc8251b..94af8b2 Fast-forward index.html | 2 +- 1 files changed, 1 insertions(+), 1 deletions(-) Boom! Now we have all of our changes in to git. If we want to see what these changes were, we can use th log command to get a nice display of times, dates, and authors: [~/Sites/think_vitamin]$ git log commit 94af8b2e976ba11755f7483bc761ea2b9a747e0a Author: Jason Seifer Date: Wed Feb 1 15:07:45 2012 -0500 Make header font comic sans commit bc8251b338b8ac4451888e1da482708df6264529 Author: Jason Seifer Date: Wed Feb 1 10:16:41 2012 -0500 Modify home page header commit 542d5fab4c86d29a125a78b8a89366f70bdfaa9d Author: Jason Seifer Date: Wed Feb 1 10:10:01 2012 -0500 Initial commit Well Done! In this article we learned how to install git, create a repository, change branches, and commit changes to our code. In the next article in this series, we’ll learn about removing files, going back to different commits, and pushing up to GitHub and working with other people. Stay tuned!

Showcase of the Best Google Fonts

It’s no secret that I am in love with Google Fonts. In fact, I use Google Fonts frequently in Treehouse videos. :) The ongoing drawback to Google Fonts has been the smaller selection compared to other font services, but that’s rapidly changing. Even better, an editorialized web page called “Beautiful Web Type” has popped up that showcases the best fonts that Google has to offer. Loving this!

Styling Images with CSS3

Nick La over at Web Designer Wall put together a great article on how to style images with CSS3. The styles include: Basic Style(rounded corners), Embossed Style, Soft Embossed Style, Cutout Style and Glossy Overlay. I personally love the Embossed Style, it’s ideal for interface buttons. Originally Nick ran into some issues when styling for a responsive layout. He quickly fixed them with an alternate solution. Check out the article to see his solution. Great job Nick, we appreciate the tips and tricks! View the Tutorial Demo Page

Is there a Photoshop grid for responsive web design?

I love responsive web design. It just gets me like no one else can. Now responsive web design gets Photoshop too. A recent post by Elliot Jays Stocks sheds light on the topic and includes a great template for designing your next PSD. You can find the download link on his website or view the simply view the demo if you are impatient like me. You can read all about Elliot’s ideas on his website. He explain everything is great detail. If you read his post you will find it hard to disagree. Fixed designs are becoming harder and harder to justify.

Kevin Rose and Jason Calacanis confirmed for Future Insights Live in Vegas

We’ve just confirmed that industry leaders Kevin Rose and Jason Calacanis will be speaking at Future Insights Live in Vegas on April 30 – May 4th! Future Insights Live is our new show that combines Future of Web Apps, Future of Web Design and Future of Mobile into one huge 5-day, 5-track, 1,500 person conference. It’s going to be epic and you won’t want to miss it. Early bird pricing (save $200) is almost over, so grab your ticket today.

Free Video: iOS Tab bar (UITabBarController)

In this 7 minute video, you will learn the basics of the UITabBarController and how to create one using the Xcode project template. This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like … Accessibility CSS3 Aesthetic Foundations Django HTML CSS HTML5 iOS Development JavaScript jQuery NoSQL PHP Responsive Web Design Ruby Ruby on Rails UX Version Control WordPress Theme Design New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Twitter Bootstrap 2.0

Twitter Bootstrap 2.0 will be coming out January 31st. In the mean time, there is a pre-release you can check out and report on any bugs that you find. Twitter Bootstrap is a great HTML and CSS framework that has been gaining a lot of popularity recently. You can check out sites built with bootstrap on the unofficial Built With Bootstrap tumblr. You can also follow @twbootstrap on Twitter. Here’s some of what’s new in this release: Responsive layout (!) with media queries. New 12 column grid (the old one was 16 columns). Stacked forms are the default. Split button dropdowns. New Pills. Navigation lists. New Dropdowns. Tabbles in any direction. New JavaScript plugins.

A New Year, A New Responsive Dribbble Portfolio – Part 1 of 2

What better way to start off the new year than a fresh new Dribbble portfolio? If you are a designer with minimal coding experience and want to display your Dribbble work in all browser sizes, you have come to the right place. We will be creating a HTML5 one page portfolio which pulls your Dribbble information and is responsive in all browsers. This little project will be presented in two parts. Part 1 (this post): HTML/CSS/jQuery set up. Part 2 (coming soon): Convert HTML to PHP and use the Dribbble API to pull your data. Plus IE fixes. The File Structure Let’s dig right in and start off with our file structure. On your desktop create a folder labeled: ‘Dribble-Portfolio’. In that folder create the following files: folder labeled ‘css’ style.css folder labeled ‘images’ logo.png connet.jpg me.png sample.jpg index.html folder labeled ‘scripts’ jquery.js fitText.js It should look a little something like this: *to download the .js and image files simply select the links above and save them to the appropriate file structure. The HTML Now that we have all of our assets and files lets begin with the HTML. Below is the proper code for your ‘index.html’ file. Dribbble Portfolio

Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!

Latest Work

Title of the Work

As you can see the code is fairly simple. We have a basic HTML5 markup with some ‘viewport’ settings at the top. The ‘viewport’ settings tell devices such as iPhones to display at the devices width and scale. Dribbble Portfolio Also the ‘head’ is reaching out and grabbing some Google font stylesheets as well as our ‘style.css’ file in our ‘css’ folder. We will get to this file in our next step. As we get into the body of the file we have four main sections(header, section(half), section(dribbble) and footer). The header contains two elements. Element one is the logo, feel free to change it. It’s located in the images folder, labeled ‘logo.png’(200x80px). Element two is our social network icons which we won’t see until we add the css styles. For now we are going to link to hash tags. In part two of this tutorial we will be pulling in the correct data via Dribbble.

The next section, section(half) contains our ‘me.jpg’ image and our tagline which are located directly below the header. Feel free to swap out the image(me.jpg) and tagline copy to better personalize your portfolio. The image currently being pulled in is 800x600px as it is scalable to the screen size.

Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!

Our next section is section(dribble) which is going to pull our most recent Dribbble ‘shot’ titles and ‘shot’ images. For now we are going to use dummy content. In part two we will be running a loop to pull the latest projects with the all mighty power of php. You will also be able to choose how many projects you would like to display. For now we are going show twelve ‘shot’ examples.

Latest Work

Title of the Work

The last section is the footer area. This is for any links or Copy Right text you wish to display or link out to. The CSS Now that we have inserted all of our HTML data, let’s add our styles to the page. Simply copy the CSS code below and input it into the style.css file. Here is the CSS code: /* DRIBBBLE PORTFOLIO SITE - 2012 */ /*RESET*/ html,body,div,span,applet,object,iframe,#logo,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{outline:none;border:0;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} /*MAIN*/ body { background:#dce877; margin:0 auto; padding:0 5%; font-family:Open Sans, Arial, Helvetica, sans-serif; width:90%; font-size:13px; line-height:21px; color:#616634; } header, footer { float:left; width:100%; } section { float:left; } ul { list-style:none; margin:0; padding:0; float:left; } a { color:#616634; text-decoration:none; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; cursor:pointer; } a:hover { color:#111; opacity:1; } h1, h2, h3 { font-weight:normal; float:left; } h1 { margin:20px 0; } h2 { font-size:30px; line-height:40px; } h3 { font-size:14px; line-height:40px; } p { font-size:12px; } .full { width:96%; margin:0; padding:2%; float:left; position:relative; } .half { width:46%; margin:0; padding:2%; float:left; position:relative; } .clear { clear:both; } /*HEADER*/ header { position:relative; width:100%; border-bottom:5px solid #bcc664; margin:0 0 20px; } #logo { float:left; margin:20px 0 0; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; } /*CONNECT*/ nav { float:right; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; } .menu { list-style:none; margin:15px 0; } .menu li { display:inline; } .menu li a { width:32px; height:31px; background:url(../images/connect.png) no-repeat; opacity:.5; float:left; display:block; margin:30px 5px; } .menu li a:hover { opacity:1; } .dribbble { background-position:0 0; } .linkd { background-position:-38px 0 !important; } .twitter { background-position:-78px 0 !important; } .facebook { background-position:-118px 0 !important; } .email { background-position:-158px 0 !important; } /*SECTION(HALF)*/ .main-image { width:100%; } .tagline { line-height:140%; color:#616634; font-family:Raleway; font-weight:normal; } /*SECTION(DRIBBBLE)*/ #container { -moz-column-count:4; column-count:4; -webkit-column-count:4; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; float:left; width:100%; } .box { background:#BCC664; padding:5%; opacity:.75; display:inline-block; margin-bottom:10px; border-bottom:2px solid #616634; border-radius:2px 2px 10px 10px; width:90%; } .pic { width:100%; float:left; clear:both; } /*FOOTER*/ footer { border-top:5px solid #bcc664; margin-top:20px; padding:20px 0; font-size:12px;} /*MEDIA QUERIES*/ @media screen and (max-width:960px ) { #container { -moz-column-count:3; column-count:3; -webkit-column-count:3; } } @media screen and (max-width: 768px) { .half { width:95%; } .menu li a { margin-right:1px; } #container { -moz-column-count:2; -webkit-column-count:2; column-count:2; } } @media screen and (max-width: 479px) { #logo { margin:0 0 0 48px; } nav { float:left; margin:0 0 0 50px; } .menu { margin:0; } #container { -moz-column-count:1; -webkit-column-count:1; column-count:1; } } After we save our ‘style.css’ file and refresh our browser, we have a very clean portfolio layout that responds well to the browser size. When you view the stylesheet css code you will see ‘%’ used a lot on the width attributes. The page is styled with a responsive fluid layout in mind. If you have any questions about responsive web sites, please check out ‘Responsive Web Design Foundations’ over at Treehouse. As of now we have a fully functional static HTML5 page which has been tested in the latest versions of Firefox, Chrome and Safari. Because we are using HTML5 and CSS3 capabilities we will not be testing in IE at the moment. Once we finish up part 2 of the tutorial we will set up separate IE files to compensate for it’s lack of functionality with HTML5 and CSS3. The JavaScript Lastly we are going to add a little javascript to our page allowing our ‘tagline’ text to scale with browser size. Insert this snippet of code directly below the footer. This snippet simply links up to our ‘jquery’ and ‘fitText’ files we set in our scripts folder earlier. Then it initiates the ‘fitText’ function and gives it some variables. Feel free to change the max-font-size and min-font-size as your ‘tagline’ will be different. Wrapping Up Now lets review what we have just done. We have set up our HTML Added our CSS styles Inserted a little javascript Congratulations you have successfully set up a static responsive one page portfolio. Source Files Demo Site Still to Come(Part 2) In the final portion of this tutorial we will be using Dribbble API to load in our user data and ‘shots’, as well as IE 7 and up fixes. In the meantime if you would like to know more about HTML5 and CSS3 please check out Treehouse, or contact me at mat@teamtreehouse.com. As always, Get Gnarly and Design your Life! Role Those Credits: Dribbble jQuery Fit Text Treehouse

Scrolling Made Fun

Just when you thought scrolling your web page was getting boring. Scrollorama has stepped the scroll game up with this remarkable jQuery Plugin. Scrollorama allows you to manipulate text when you scroll the page. You can do everything from Transitions to Zoom to Parallax. Check out the Scrollorama site to view some great examples and the plugin’s documentation. This Plugin is great for landing pages and highly interactive web applications. Like CSS3 transitions, use your animations sparingly.

Our new Treehouse Student Plan is live!

We’ve just released our new Treehouse Student plan and it’s only $9 per month! It’s the equivalent to our Gold plan, which is $49 per month, so you’re saving a massive 82%. Anyone who attends a school, college or university is eligible. After you sign up, we’ll ask you to provide proof of your student program. Benefits include: Unlimited access to our Video Course Library. 450+ videos, more added each week on topics like CSS3, HTML5, JavaScript, iOS, Photoshop and more. All videos downloadable for offline viewing. Unlock Badges to prove your knowledge. Complete Project Videos show you how to create real-world sites and apps, from start to finish. All example files are downloadable. 114 Conference Videos from Future of Web Design and Future of Web Apps ($545 value) Closed Captioning on all videos for non-English speakers and the deaf. If you’d like to get Treehouse in to your entire school, college or university, please contact Chris and he’ll be happy to help! There’s a money-back guarantee, and you aren’t tied in to a contract. Sign up today.