I got to start by saying that I am not a front-end developer.
That said, today, when there are so many available web-stacks, it becomes inevitable to handle at least a bit of UI.

On this post, I’ll share some info that’ll help you on your way to become a front-end developer, so let’s begin:

Learn CSS!

Learning HTML is not very complicated but if you know nothing about HTML you should probably start there… I assume that you have some familiarity with HTML and that’s why we started here. CSS is a very good practice of separating styling from content. There are many web-sites that will teach you CSS and it’s very easy to Google something you’re looking for, but, if you really know little or nothing at all in regards, I recommend a course called “30 CSS Selectors You MUST memrise” in a beautiful website: memrise – a wonderful free site (there’s also a mobile app) that’ll teach you anything from languages and history to art & literature and much more. In order to dynamically change CSS on the page (and see the result without switching to the editor back and forth and refreshing the page) I highly recommend using LiveCSSEditor – a plugin to chrome which I can’t live without!

Another two plugins to Chrome I find very useful are: MeasureIt! and ColorZilla

Javascript & jQuery

Codecademy is another awesome web-site for self-education, here you can study the basics (and more) of both Javascript and jQuery. This is critical since there’s no other way to manipulate DOM elements after creation, and in fact, whenever you hear the buzz-word HTML5 it refers to Javascript!

In order to debug JS/jQuery on-page I used to use a Firefox plugin called Firebug (which is awesome!), but today I use Chrome and the same developer-toolbox is available in Chrome by pressing F12. Two relevant tabs are “sources” – which allow you to add breakpoints, inspect objects etc, and “console” which enable you to view errors in the code that ran as well as to write a Javascript/jQuery expression and see what it evaluates to. Another good resource for JS is mozilla.

Performance

Google’s PageSpeed add-on to Chrome and Firefox’s YSlow! are two excellent extensions to test the performance of your web-page. Both supply a list of recommendations which, in case you decide to implement, will improve the loading speed of the page. Two websites that offer the same analysis are the famous Pingdom and webpagetest. TMO, you should use more than one tool to have a good coverage. That said, you shouldn’t get too obsessive with the performance grades.

General

Firefox still has two plugins that I really like:

1. Tamper Data is a great tool that helps viewing the parameters that were submitted/received, usually via. forms (HTTP calls). If you want to dive deeper into lower levels of protocols like TCP/IP you’re welcome to installWireShark (previously called: Ethereal), but as a web-developer you’ll probably find yourself using only the filters HTTP/HTTPS anyway.
2. I use Poster mainly to debug REST calls which are usually less of a “UI thing” and considered more as “back-end”. But, if you use AJAX to fetch information from the server you might find this plugin helpful.

If you’re interested in SEO perspective, there are toolbars like seoquake and sites like http://www.seositecheckup.com/  and http://www.hubspot.com that will provide a detailed analysis of your website.

keep learning!

You can do this by subscribing to weekly newsletters like Javascript weekly, online courses, reading blogs (you can search for relevant information via. redit and Hacker News), following pros on Twitter and asking questions on stackoverflow (make sure to answer some questions as well – give back to the community!)

Do you have a plugin/extension/web-site you found useful ?