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:
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
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.
Firefox still has two plugins that I really like:
- 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.
- 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.
Do you have a plugin/extension/web-site you found useful ?