Where to Start – Front End Web Development

A few people asked me if I could show them how to get started in front end web development, so I wrote this little article. If I were start from square one learning front end web development I would start by reading up on the following topics. I’m going to cover just the basics here.

Web Usability

If you don’t get any of the books listed below at the very least get this book. I anyone who works on web sites or is going to hire someone to build them a web site, should read this book. It describes some really basic web usability practices people take for granted.

Learn HTML

There are a ton of references online to learn HTML however it’s good to have a manual right next to you. This is a great book to teach you the right way to use HTML and XHTML.

Dreamweaver is a good WYSIWYG (What you see is what you get. Sounds like wizzy-wig.) editor to use if you are learning how to build web sites. It has a great GUI and is a great code editor. Many web developers only use Dreamweaver to code their entire web projects. Dreamweaver can also be used to help you learn what’s going on visually. For instance you can drop some elements onto the screen (images, text, etc.) and then switch to the code view to see what is happening in the background. I found this book online to walk you through some projects. It looks like it got some good reviews. I haven’t read it, but these are types of books I used to learn HTML.

A program I use on the mac is BBedit. BBedit is in my opinion the best tool for programing on the mac. BBedit has a ton of features and if you know how to use them they make developing very easy.

Learn CSS

This is another manual type of book, but you can actually read straight through this book and learn a ton. I bought this book a few years ago and didn’t even know CSS could do so much. This book teaches the right way to write CSS. The author (Eric Meyer) is known as “The CSS GURU” in the web world.

Learn JavaScript

Once you are familiar with HTML and CSS you should learn some basic JavaScript. This book is more of a manual than a straight read.

A helpful JavaScript library you should get familiar with is JQuery. JQuery makes doing things (like animation, form validation, show and hide screen elements) in JavaScript easy. You don’t need to be a guru to use it, however knowing some basic JavaScript will help.

If you learn HTML, CSS and JavaScript you can do just about any front end project.

Download Firefox

Firefox is the best web browser in my opinion. It has many great features and you can add helpful plug-ins to make it better.

Get some useful plug-ins for Firefox

Web Developer. Web Developer plug-in is very useful for designing and debugging. You can add rules to your page like Photoshop guides to see if elements are lining up onscreen. It has a ruler, html validation, css validation and other validation tools, outline elements and a ton of other tools to help you visually see what is going on for any given web page.

Firebug. Firebug is probably what every web developer has to debug javascript and see what is going on on a page. One of the features I use on a daily basis is the ‘inspect’ feature. If you press inspect you can rollover elements on the screen and view the css for each element. You can even edit the css in the browser to make live changes. The changes aren’t permanent but it really helps to debug. There are many more features you can use with Firebug.

Use Google

I know this sounds like a no brainer but if you cannot figure something out google it. Chances are someone has ran across the same problem. Also you can google “learn HTML” or “learn CSS” and get a ton of tutorials.

Get your own host

Dreamhost is super cheap. For $6 a month and you get host unlimited domains, a free domain and tons of disk space. Use this promo code ( STEVEM21M0NE ) when you sign up and you will get an extra free domain (it saves you $10 a year).

Use WordPress

With a dreamhost account you can use one-click to install a WordPress site. WordPress is the way to go. You can tweak the templates or design your own.

WordPress isn’t just a blogging tool you can use it create sites with the functionality to update your own content. I only create sites using WordPress.

I have read a ton of other useful books, but I think most are beyond this blog post. I’ll publish another post with more books, tools and sites I use for development.

November 30th, 2009 | Categories: Development | frontendnewbiewebdev