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.

In my endeavors to learn CSS and relearn HTML, a website of immeasurable value was w3schools. It provides systematic tutorials of HTML, CSS, JavaScript, PHP, and more. What I like best is their interactive examples, where you can edit and mess around with the coding, getting hands-on experience of what was covered in that section of the tutorial. Note, however, that the w3schools is not affiliated with the W3C (Worldwide Web Consortium), which develops open standards and provides tutorials but are not as easy to read. A website known as w3fools has been launched, criticizing w3schools for spreading incorrect information and practices. I didn't take the quizzes or certificates on w3schools, so I wouldn't know about those areas. However, I think w3schools is helpful in learning the basics because of their interactive examples and clearly organized format, and w3fools can be used alongside w3schools to catch any mistakes.

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.

Other Tutorials
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.

Nifty Tools
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