How HTML5 and CSS has evolved over time and some basic practices!
By: Brendan Fitzpatrick
I will start this blog entry off with a few comments to put things in perspective. I have been a programmer/designer/scripter (C, HTML, Perl, LAMP, ksh and more) for over 20 years. The purpose of this post is to highlight the struggles of an experienced HTML designer over the years while capturing the benefits of the pain. You are not going to learn anyting technical in this post, however; you may learn a new mindset that may increase your learning/ability exponentially. This post is geared toward the pure HTML5/CSS developer, if you are only familiar with UI/WYSIWYG tools such as Dreamweaver or other interfaces then you might not appreciate the full extent of the details explained below, however; I encourage to you to read on!
I’ve built well over 100 websites in the past 20 years with varying degress of success, but to be honest, I’ve never gotten a full grip of HTML5 and CSS, until now, and man, is it complicated! Follow me for future updates.
First, I have to give you a high level of the way HTML design used to be.. and then try to compare it to the new standards of today. 20 years ago it was all about tables (or boxes), you could draw anything you wanted as long as you understood tables and columns. Think of an excel sheet, if you wanted something on the left, you had to type in the box on the left side – something on the bottom then move down and fill in a row below. It wasn’t that easy, but it wasn’t much more complicated than that in order to be an HTML designer. It was pretty much a 2 dimentional drawing.
Nowadays, “fuggedaboutit”.. you need to be an expert in 3 dimentional drawing, think of AutoCAD or Vector drawing.. it’s actually not that bad, but almost as complicated. Think of having a single page design, on a pc it is a menu bar but the same items on a phone are a dropdown menu – 100% controlled by CSS. Is it complicated? Yes. Is it easy to learn? With some practice, yes.
What is the biggest challenge in learning CSS? In my opintion, syntax! I can’t tell you how many hours of video that I’ve watched and how many additional hours that I practiced the techniques, trying to learn. As with any new “language” (loosely interpreted as: HTML, Perl, PHP, CSS, VB. etc.) the initial stages in learning include getting the syntax (or format of commands) down correctly. I’ve spent hours trying to figure out why my code doesn’t display my expected results; and for the most part – it was because I forgot about the required semi-colon, or I added one where I shouldn’t have, or I put a declaration above another declaration which took precedence. Out of 100 tries, I would be lucky if 1 of them yielded expected results. So in my experience, the primary pain is learning, or memorizing syntax – before you can beging to understand the basics.
The key to success? Repeat and prove your errors. Tear the code apart when it doesn’t work out the way that you expect it to. Don’t “accept” something that you don’t understand. Master it at every level possible! Remember that “coding” is a neverending process of learning. Until you can take any website on the internet, from the simplest to the most complcated – and tear it apart manually (ie. using source code) and make any minor change successfully that meets your expected results; you will know that you have a long road of learning ahead of you.
I will say that, the more I learn about HTML5 and CSS, the more complicated it is; however, the more I learn, the more I learn how powerful this new “language” is. As an example, if you were to look at any of my website designs 15 years ago they still look pretty good on a PC, but if you looked at them on a cell phone or tablet they would look horrible.. If you were to look at one of my current designs, they would look okay… okay on all platforms. This goes to show you how much further that I have to go to be a good designer.