Codecademy and Learning how to build websites.

In the last couple of years a wealth of web building software has arrived on the market that allows even the most technically challenged to build a pretty sophisticated website. Software like WordPress is even used by professionals to achieve pretty remarkable and sophisticated websites, sometimes though, a person will want more control they will want to start to lean how to actually code.

Years ago, short of going back to school this was a option that was not realistic to the average novice. These days however the game has changed. http://www.codecademy.com/ is a internet learning tool that will guide you step by step through the process of learning how to code almost every major web based language currently in use. I myself have used it to enhance and build upon the skills I already have.  The lessons are easy to follow, dynamic, and well constructed. Best of all they are free!

If you are a up-and-coming web developer and are looking to expand your skills so you can lean how to build your own sites from scratch I recommend this tool wholeheartedly.

Shorten Your Page Content with Pop-Overs!

Content-heavy web pages can get really long, really fast. There are some ways you can embed small web pages into your website (or hints/tips for pieces of content) with jQuery.

Pop-over windows are an easy way for people to quickly get more information about anything on your webpage, without them leaving the page. We use them on AYSO.org to show video content, or give a little extra information on a “Learn More” link. These pop-over windows are called a lightbox, and there are many different versions of code out there to use. AYSO’s National Office uses the lightbox called Fancybox. It works with images (for an image gallery), inline text, iFrames, Flash files, Google Maps and YouTube. It has been tested on every browser too, so you know it works. You can view demos of Fancybox and download the code here.

Toggle Your Content in a Snap!

A common conundrum for web designers is how to make a lot of content easily accessible for their viewing audience. It’s difficult to navigate through a really long page with a bunch of jump links.

Here’s a clean and easy way to neatly organize your content so that it’s easy to navigate. We use the toggle method throughout the AYSO National website. If you’ve ever looked at one of the FAQ pages or the new Section Meeting microsite, I’m sure you’ve seen it!

jQuery Toggle Method

Let's use a FAQ example. You have a question with an associated answer. We only want to show the answer when you click on the question. With this method, clicking a second time on the question will hide the answer.

QUESTION: Where is the soccer field?

ANSWER: Down the street and around the corner.

Interactive Slideshows For Your Homepage

jQuery offers some neat effects that are easy to integrate into your website. All the user needs is JavaScript enabled in their browser to view the slideshows. It’s a clean way to present items such as upcoming tournaments, important news or announcements. Research shows that people gravitate towards images and visual representations of announcements – which makes a slideshow a great addition to any Region website

Here is a link to SLIDEJS, a simple one to use. They have multiple options for the slideshow, including text versions, image versions and a version with thumbnails. You can even change the transitions from a slide to fade.

The code is as simple as shown below: