Becoming Better at Web Design and Web Programming

In 1996, I discovered HTML and creating fan websites. I made a ton of those. I spent hours and hours on a Walt Disney website, adding Under Constructions sections and blinking stuff. :) Netscape and Internet Explorer were at war and there were not standards. I did not know much about computers... but was it ever fun.

In 2006 or 2007, unrelated circumstances brought me back to web design. I started playing around in Flash and it was driving me crazy to place a bunch of elements on the timeline with limited control. I like to know how it works under the hood and create it myself. Therefore, I started playing around with ActionScript 3. I spent hours at night, banging my head on the desk trying to figure out object oriented programming. I only had a bad base in HTML, which is a formatting language. But I made it through! I bought myself a few books and searched a bunch of forums.

Once I started creating Flash website, I met limitations and issues. To fix some of the problems, I had to figure out a few PHP functions. I fell in love. PHP and MySQL are my two new best friends. I spent the last 5 years learning more and more about back-end programming, database, HTML5, cross-browser compatibility and so on. I even took a basic web design course to make sure I had my basics covered.

I would like to share with you some useful links I stumbled upon while digging the web for answers and resources. There is soooooooo much to learn that it can be a bit overwhelming to know where to start.

Get your basics covered

  • W3School: This is an extremely complete website allowing you to learn all the tags, naming conventions, functions and usage for all the main web programming languages (HTML, HTML5, JavaScript, jQuery, PHP, SQL and CSS).
  • Mozilla Developer Network: This site is similar to W3School. You can learn about the various elements and functions for the main languages. I find that some HTML tags have much better descriptions on this site.

The Main Things you Should Know

  • I found this awesome Jon Raasch's blog post about the main 10 things a web developer should know. I love this article and it really helped my focus my studies and research on the most important things to learn. You can see below the links I gathered based on the article content. There is much more information in the post, but I refer to the following ones regularly.
  1. Regular Expressions: Regular expressions are really difficult for me. I am still figuring those out, but they are really handy. I am lucky enough to have some great co-worker helping me out with those. I printed the complete website and put that in my reference binder. I took the time to read it all. Helped me extend my attention span. I love learning complex topics. It turns out it is not that crazy, just need to try to use it on a specific purpose, then it will start to make sense.
  2. SEO: Ah, SEO. Everybody is fighting for attention and high traffic on their site. People try to use the right keywords... or overuse keywords to the point of polluting a text to be unreadable... The Jon Raasch's article pointed to this MOZ  webpage. That site is amazing. I printed it and added it to my reference binder. But now. something that makes me happy is that focus is movng a little bit away from SEO, which is still crucial, to great content quality. Make great content and people will come... and STAY!
  3. JavaScript Library: jQuery is incredibly useful to build user friendly interactive websites. It is an extensive Javascript library allowing you to do excellent client-side scripting.
  4. Apache Rewrites: After playing with Drupal and realizing that there were no HTML or PHP pahes anywhere in my source code, I realized that all pages were dynamic... I was really puzzled as how the given URL was not returning a 404 error if the physical page did not exist... The key lied with Apache Rewrites. In a .htaccess file, you can write some rules and regular expressions to transform a portion of your URL into a parameter or redirect to another page. Everything happens behind the curtains, without the user knowing.
  5. Version Control: I recently installed Tortoise SVN on my computer and backup drive. This little tool is awesome. It allows you to version your files, giving you the chance to go back in time and restore an older version of your code if you ever broke something. You might also need to branch out from an older version and code a parallel version of your project. It's incredibly useful.

Additional Tools and References

  • Google Webmaster Tools: If you want to track stats, queries, sitemaps, crawling errors and much more about your various website, you should use Google Webmaster Tools.
  • The Evolution of the Web: So much happened and so much is still happening. This dynamic website covers the entire web evolution's timeline.
  • Schema.org: This site coveres how to use MicroData.
  • Breadcrumb: I found this article about breadcrumbs and best practices.
  • Ampersand HTML Character Code: Accents are not supported will by all browsers or client machines. It is best practices to use the special character ampersand code.
  • Caniuse.com: HTML5 is being progressivly integrated and not allow browsers support all the same features. CanIUse is a great website for you to verify what tag can be safely used.
  • HTML5 Outliner: You can set an outline for your HTML5 websites. If you would like to test it out, you can use that website.
  • CSS Reset: Before starting your website design, you can reset the default CSS values to make sure it is even in all browsers. Not all browsers display the basic html tags the same.
  • Google Fonts: If you would like to safely use other fonts beside Arial, Georgia and Times, you can use Google Fonts

I have many more useful links in bank. Next time I will share Mobile and Responsive Design as well as additional CSS links.

Until then, happy reading.

Who Am I? I'm many things. I'm passionate about tons of stuff. I love travel. I love self-improvement. I'm a sucker for optimization, efficiency, and minimalism. I renewed with mathematics and science, those are so amazing. Astronomy and chemistry are just plain awesome! I'm a student, a mentor, a traveler, a learner, an artist, an animator, and Disney brings me tears of joy! I love to grow and I will never stop! So who am I? All that and everything else I have not discovered about myself yet. It's a never ending answer!

Qui suis je? Je suis beaucoup de choses. Je suis passionné des tonnes de trucs. J'adore voyager. J'adore la croissance personnelle. Je suis vendue à l'optimisation, l'efficacité et le minimalisme. J'ai renoué avec les mathématiques et les sciences, des mondes tout simplement incroyable. L'astronomie et la chimie sont tout simplement génial! Je suis étudiante, mentor, voyageuse, artiste, animatrice et Disney m'apporte des larmes de joie! J'aime me pousser à fond et je ne cesserai jamais! Alors, qui suis-je? Tout cela et tout le reste que je n'ai pas encore découvert de moi-même. C'est une réponse sans fin!