Assignment 1: Work Through the Courses at Codecademy.com
Assignment 2: appendTo’s Screencasts
“Level up your skills with our on demand, pragmatic training solution. No signup required. No catch. No kidding.”
A handful of good introductions, if I may:
Assignment 4: Install and Learn Firebug (or the Developer Tools)
You can open the developer tools panel by pressing
Option + Command + Ion the Mac, or
Control + Shift + Ion the PC.
You’ll learn a lot by opening up your tool of choice and just clicking around while on one of your favourite websites. Here are a couple of resources that will get you up to speed:
- Firebug website and wiki
- Introduction to Firebug on CSS-Tricks
- 10 Reasons Why You Should Be Using Firebug here on Nettuts+.
- Firebug: White to Black Belt by me, on the Tuts+ Marketplace.
- Developer Tools
- Developer tools website
- Google I/O 2011: Chrome Dev Tools Reloaded by Paul Irish
- Google Chrome Developer Tools: 12 Tricks to Develop Quicker by Paul Irish
Assignment 5: Read a Book
So now you’re familiar with the basics. However, there’s a lot more to learn. While I could recommend a list of books that would bankrupt you, I’ll keep it to four of the highest-quality books you’ll find anywhere:
Assignment 6: Build Something!
As you worked through the resources above, you should have been following along with the code samples: pulling them apart, and tweaking them to see what happens. But now it’s time to really strike out on your own. It’s time to actually build something.
So, what can you build? There’s a lot you can do. Here are a couple of ideas.
- A Photo Gallery: Display a set of photo thumbnails and a main photo. When a user clicks a thumbnail, have the larger version of the thumbnail (not the thumbnail itself) replace the current main photo. Bonus points if you can overlay a caption coming from the thumbnail
alttag, or loop through the photos if the user hasn’t clicked one for a minute.
- A To-do List: This might sound tougher than it is; but I’m not suggesting you build a full-fledged to-do application. Just have a text box with a button beside it; when you click the button, the entered text becomes an item in an unordered list below. Clicking on a list item removes it. It sounds simple enough, but there are several gotchas that it will be good for you to think about as a beginner.
- An Animating Box: Animation is always tricky, but it doesn’t have to be complex. Have a
I’m sure you can think of other projects that will be great practice. Of course, push yourself out of your comfort zone; that’s the only way to learn.
Most Popular Libraries
While there’s certainly a countless number of libraries available, you should try to stick with a popular choice – at least at first.
Assignment 8: Keep up with the Masters
Drop what you’re doing, and subscribe/follow these developers. This is a requirement.