Marcel Legros - Play the Game of Life

Today, we’re on part three of a six part series designed to help an absolute beginner learn how to build a web site. If you’re new to computing or you have no idea what skills and tools you need to become a web developer, this is for you. The articles aren’t designed to teach you web development skills; they’re meant to give you a push in the right direction so that you can quickly learn those skills on your own. I hope you find my guide helpful. If you do, please Stumble it, so that others can benefit.

Article Outline

Day One - Tools Required for Website Development

Day Two - Skills Required for Website Development

Day Three - The Most Powerful Learning Secret for Website Development

Day Four - Beyond Basics - Tools That Take Your Site To the Next Level

Day Five - Beyond Basics - Skills That Take Your Website to the Next Level

Day Six - Wrap-Up - Summary of Tools, Skills, Books, and Tutorials for Website Development

Day Three - The Most Powerful Learning Secret for Website Development

The most powerful secret to learn how to build websites, is right in front of you. Your internet browser is your most powerful tool to becoming a skilled web developer. Books and tutorials are great but did you know that you can actually view the HTML and CSS for any website on the internet?

Think Like Reverse Engineer

Reverse engineering means to take something apart to learn how it works so that you can build it for yourself. You can learn to build amazing websites of your own with only three items in your toolbox:

• The Firefox internet browser
• The Firebug plug-in installed on Firefox.
• A website you wish to emulate or improve upon.

Step One - Install Firefox

It’s critical you’re using a quality browser for this lesson - Internet Explorer or Safari won’t cut it. If you haven’t already done so, download and install Firefox on your computer.

Step Two - Install Firebug

One of Firefox’s strengths is that it allows you to add any number of plug-ins to it. A well designed plug-in can add a lot of new functionality to the browser. Firebug is probably the most powerful and ingenious plug-in ever created for Firefox. Watch this video tutorial to help you install Firebug quickly.

Installing Firebug

Step Three - Find a Target Website

Have a look at this quick tutorial to explore the basic interface of Firebug. It’s so simple, your jaw will drop!

The Firebug Interface

Step Four - Imitation is the Best Form of Flattery

Firefox and Firebug are the most powerful free tools to help you learn how websites are designed and coded. It’s truly amazing the first time you realize you can go to any site, peek inside of it, tweak it, and begin to understand how the designer put it together. If you followed my advice on Day One and Day Two, you will already have begun to learn about HTML and CSS. Now, with Firefox and Firebug, you have the power to learn from HTML professionals, any time of day or night.

The best way to learn HTML is by emulating other designers’ work that you admire. Feel free to copy HTML and CSS from all kinds of sources and keep a personal library of your favorites in a it’s own folder. I highly recommend emulating examples of code from your favorite sites but I do not recommend copying code from an entire page or site and using it as your own. It’s not illegal to copy HTML code but you’ll never learn and improve if you just copy and paste it into your own domain. Imitation or emulation is a powerful learning tool. Copying is just lazy and unethical.

Bonus Step - Firebug’s Baby Brother

A less functional, but useful, feature built into most browsers, can be located on your right mouse button. Go to any website and right-click anywhere on a blank area of the page (without links, images, or ads.) A context menu pops up - click “View Source” (Internet Explorer, Safari), “View Page Source” (Firefox), or “Source” (Opera). A new window appears with all of the source HTML for that web page. This is also a great feature most people don’t know about or utilize often.

You can’t view CSS stylesheets or inspect and edit web pages this way, so I suggest you focus on learning to use Firebug. Go to http://www.getfirebug.com/docs.html and read the Firebug documentation to get the most out of this amazing tool.

That’s It For Today

Your browser is the most powerful learning secret for website development. Satisfy your curiosity. Immerse yourself in the work of others. Go out there and visit all of your favorite sites to see how they’re built; then apply what you learn to your own work. With this knowledge, you’ll become an HTML pro in no time at all.

Thanks for reading! I hope you join me for tomorrow’s article - Day Four - Beyond Basics - Tools That Take Your Site To the Next Level.