- Calculators & Widgets
- Resources & Materials
- Contact Us
Tutorials and Helpful Tools for Coding
A long road ahead...
Being the visual design intern, I obviously had to brush up on my obsolete HTML and my nonexistent CSS skills. HTML (HyperText Markup Language) is a code used for formatting webpages, whereas CSS (Cascading Style Sheets) is a different language which stylizes and beautifies a webpage. Way back during my first and only previous experience of HTML in middle school, I was taught to use tables to format my webpages and to use inline styles, which is where you insert CSS code into an HTML command. Oh boy, did I have a lot to catch up on. These are now considered bad practices, as divs and spans replace tables and external style sheets are preferred for websites over inline styles, which muddles formatting (meaning) with style. However, tables and inline styles are best practices when it comes to HTML emails (which is what newsletters and other such things are), because divs does not display correctly in emails.
Should you wish not to be involved in any of these w3 things, w3fools provides a list of other great tutorial websites, such as www.codecademy.com, which provides highly interactive lessons.
If online tutorials aren't how you learn, then there are helpful books like O'Reilly's Headfirst series. Or if you would rather be taught, ischool has a course on Web Architecture, complete with slides, readings, assignments, and additional resources.
Knowing how to code is a great start, but coding itself can be difficult. That's where plug-ins and other programs come in to make designing webpages and writing code much easier. Listed below are ones that I found most helpful.
- ColorZilla: a color picker and eye dropper tool that can pick up and save the RGB and hexidecimal values of any point on webpage. No more having to screen capture webpages to get their colors!
- Firebug: a nifty program that allows you to inspect the code of a webpage in an organized manner. Instead of viewing a jumbled mess of code, Firebug indicates which element on the page corresponds to which part of the code.
- MeasureIt: a webpage ruler that measures the height, width, and alignment in pixels. Again, no more screen capturing necessary!
Finally, the text editor Notepad++ is much more helpful than the default Notepad. It color-codes different coding languages, provides line numbers, highlights the starting and ending commands, and most importantly, allows multiple text documents to be open. As extra goodies, it will automatically open them again (if you did not specifically close them) when you reopen Notepad++, and when you make changes to a document, its icon changes color, reminding you to save.
posted by Lydia Chang