How to Learn Website Development
– by Mary Ecsedy, Project Director, Circuit Riders, LLC
The Web is still relatively new, and knowledge of how it works is not yet widespread within the mainstream culture. Many people still don't understand or appreciate just how much work is involved in creating and maintaining a website. While it can be fairly easy and straightforward, website development is a steep learning curve that never really slacks off. We encourage anyone who is interested to at least give it a shot; the rewards of even a small amount of knowledge can be great, even if it's just enough to help you make sound business decisions that involve your website. This article describes how to learn basic website development.
FREE HTML/CSS CODE EXAMPLE
CLICK HERE FOR A FREE WEB PAGE LAYOUT WIREFRAME!
This is a free website example page that you can copy and edit to learn how to create your own! It's a working tutorial that shows how to use CSS to develop and maintain the styles and layout of your HTML page. The source code is valid and well-formed.
Learn How to Learn
When in doubt, look it up. – The Librarians
The first thing to know about learning website development is that your learning curve will go vertical instantly, and it will never slack off - at least mine never has. The more you know, the more there is to learn.
What you really need to know is this: how to learn what you need to know, when you need to know it.
Read the Documentation
I've been a tech writer since the early 90's, so of course I'm going to tell you to read the documentation. There is a world of information at your fingertips. Much of the technical documentation online is very good, but much of it is also written by developers and not suitable for beginners (including users who are technically savvy).
So you have to learn how to understand the documentation. You need to follow the information upstream, so to speak. If you don't understand something and you need to know it, then look it up. Wikipedia is a very good place to start for solid definitions of words and technical acronyms. For example, read the entries on "HTML" and "CSS". Even if you already know what they mean, the Wikipedia entries will provide a ton of useful information.
Keep a Notebook
This seems so basic it hardly needs to be mentioned, but keeping your own user documentation in a small binder or notebook is essential. Mine is one of the things I'll grab on the way out the door if the building burns down. My notebook includes a section for important website URLs, with logins and passwords, PINS, and other secure notes.
It also has sections for computer network information, tech support contacts, basic procedure notes, step-by-step instructions, syntax examples, and notes and ideas. It bristles with a rainbow of post-it notes in various colors and sizes, most of which are wrinkled and curled with age and use. It's completely unmarked except for the postcard of Delicate Arch in Arches National Park, tucked into the plastic cover on the front.
Website Authoring Tools
Many developers, myself included, prefer to code by hand using Emacs or some other text editor. You can also use a web authoring tool such as Adobe Dreamweaver (Cost: $399), or Amaya (Cost: free from the World Wide Web Consortium).
Many other popular software applications, such as MS Word or Adobe Lightroom, also include an HTML export feature, that will produce serviceable HTML code automatically.
Many of the bigger hosting companies such as godaddy.com provide tools for users with little or no HTML experience to update and maintain their websites.
Content Management Systems (CMS) are designed to give users without HTML experience a way to own and update a site, but you will need technical support to install and configure such a system on your host, and there is still a learning curve.
There are advantages and disadvantages to all of these, but some are more important than others. Different tools produce source code of unequal quality, and this is important for reasons described in the following sections.
Source Code
Do you know how to view the source file of a website while you're looking at it in a browser?
If not, go to the File or View menu and look for something called "Source", "View Source", or "Page Source". Select that option and the browser will display the source file for that page. This is the "real" file. The browser's job is to "parse", or interpret, the source code. The browser reads the instructions located at the top of the file, which tell it what sort of file it is so it knows which rules to apply. Then it displays the visible portion of the file to you the viewer as a rendered web page.
Website File Types
Websites are generally created from one or more types of source files including HTML ("Hypertext Markup Language"), XHTML, CSS ("Cascading Style Sheets), and scripting languages such as JavaScript or PHP. Again, look up these terms in Wikipedia for basic descriptions, or do a Google search for "html beginner".
"HTML" Defined
"HTML, an initialism of HyperText Markup Language, is
the predominant markup language for Web pages. It provides a
means to describe the structure of text-based information in
a document by denoting certain text as links, headings,
paragraphs, lists, and so on and to supplement that text
with interactive forms, embedded images, and other
objects. HTML is written in the form of tags, surrounded by
angle brackets. HTML can also describe, to some degree, the
appearance and semantics of a document, and can include
embedded scripting language code (such as JavaScript) which
can affect the behavior of Web browsers and other HTML
processors.
[HTML,
Wikipedia.org]
Train Your Eyes
Learn how to read source code even if it's just a little bit at a time. You need to train your eyes to see it. The best way to learn is by example, and copying the source of a website you like can be a great way to pick it up quickly. However, you need to be careful! You also need to learn how to judge the quality of the code you copy; just because it works doesn't mean it's written correctly. Browsers allow a great deal of flexibility in source, and it's possible to "force" the layout you want through various means and strategies. However, the rules for web standards and specifications are our friends and should be followed. Do not "make up" your own!
The Source Code Matters!
Website authoring tools generate HTML and other source code automatically, which is another great way to learn how to write it yourself. However, the code matters, and the authoring tools don't necessarily do the best job of handling it. This is an issue that is difficult for business decision-makers to fully appreciate, because it's so technical. But the amount of money put at risk due to poorly written source code is significant.
Bad Source Code is Expensive
There are several areas where badly written source code puts money at risk, all with their own, escalating costs:
Hard to Work With – First, it is extremely difficult to work with badly written source code. For example, working with a page layout that was done in nested tables (i.e., where a table cell contains another table, ad infinitum). It's dense, and hard to find where the rows and columns begin and end. No matter what tool you use, it's going to take more time to work with this code than code that is valid and well-formed. Those costs add up fast, especially if you have an active site.
Badly written source code is extremely expensive to maintain over time. We have seen more than one business struggle or fail as a direct result of the ever-escalating costs of maintaining a website written in non-standard code.
Hard for Search Engine Bots to Read– Second, badly written code is difficult for the search engine "bots" to read. The bots (aka "spiders", "crawlers", etc.) are essentially small scripts that "read" through the source code on a web page, noting what they find and sending information back to the search engine. Every time a bot encounters a link, it sends a copy of itself down that path. If your source code is dense, sloppy, hard to read, and non-compliant with the standards and specifications maintained by the World Wide Web Consortium, then the bots will have a hard time parsing it for useful language. Your site will sink like a rock in the search engine results if your source is bad.
Not All Source is Created Equal
Compare the source for this page, which is valid and well-formed, to the source in this example as an illustration of this point.
Authoring tools may support files with layout done in HTML and CSS, but in my experience the auto-generated code is not very good. Dreamweaver 8 makes all CSS divs 'absolute' by default, for example. Worse, if you select an image that has an "a href" link around it, Dreamweaver won't include the link in the selected code: you have to select it manually from within code view. If you don't know the basics of how to read HTML source, you will not understand why your image link is broken, or how to fix it.
You can create a website page using nested tables and lots of "break" and other tags willy-nilly that will look exactly the same to the viewer as a site written in valid, well-formed HTML/CSS/PHP by hand in a text editor. However, the difference underneath, down in the source code, is enormous. The difference could ultimately cost your client thousands (and possibly tens of thousands) of dollars: the cost to maintain or update badly done website code is exponential over time, eventually becoming so expensive that it can kill a business.
If you are doing professional website development, it is CRITICALLY IMPORTANT that you learn how to write valid, well-formed source code, and that you learn how to validate your source as you work. Take the time to learn what that means. You owe it to your clients.
Source matters. Google and the other search engines deprecate for dense, invalid, badly formed code. If you can't read the code easily, neither can the browser bots, and that makes them very unhappy.
Browsers
You need to check your work in MS Internet Explorer because 80% of the people on the Internet still use that browser, unfortunately. You must also decide wich versions you will support - the difference between version 6.5 and 7 is a living hell for CSS developers. However, you should also download and use Mozilla Firefox, and install the Webmaster toolbar that is available for it. The toolbar provides tools for viewing and validating your local CSS and HTML as you work. Use them.
Website Development by Graphic Designers
Circuit Riders has been in business since 2003, and although we do most of our own graphic design and photography, we have worked with a number of graphic designers with varying degrees of HTML/CSS experience. We have also worked on numerous websites that were originally done by a graphic designer.
In our experience, graphic designers have an especially difficult time transitioning from the fixed world of print output to the fluid world of HTML. It is simply NOT POSSIBLE to maintain absolute control over how the website will appear to all users, and attempts to do so are deprecated by Google because they impose on the user's experience.
If the site is a "vanity" site, that is, a site that showcases your design skills or your client's portfolio, and you don't care about visitor stats, then do whatever you want. Use Flash, hard-code your font sizes, use graphics for all your navigation buttons and javascript for the mouse-overs. Totally impose design on the viewer if the purpose of the site dictates that approach.
However, if you want the site to have high traffic volume and a good search engine ranking, then forget it. Design/develop according to Google's Webmaster Guidelines.
We have spent countless hours trying to educate designers on how to design within the technical constraints of web browsers and monitor settings. The more you know technically, the better you can design within those constraints. I always suggest approaching it as a form of design haiku.
Conclusion
There is so much to learn! You might as well start now. Besides the technical issues such as which HTML/CSS specification to use, which browsers to support, or whether to use dynamic elements such as PHP or a database, you should also know something about monitor resolutions, color profiles, color theory, browser incompatibilities, graphic file formats, SEO requirements, human factors and usability design, information design, the relative drawbacks of Flash and javascript, and more. You need to know how to write for online viewing. If the site uses dynamic pages with a database, or if the site also has any ecommerce elements, you will need to learn about all of that as well; order forms, shopping carts, merchant accounts, sales taxes, shipping, etc.
And we have not even begun to address issues of website ownership such as domain names and hosting accounts, or developing sites for mobile browsers.
Yes, it's overwhelming. When I see job listings like: "SEO expert, perfect intern opportunity", or "webmaster needed for all aspects of our site, $12-$15 per hour", I'm sorry, but I have to laugh. Do you really want a beginner working on your SEO or your online store? Website development is like anything else – you get what you pay for. You may save a lot on the front end by going cheap, but you will pay forever – exponentially – on the back end if you're not careful.
Website development is persnickety, detailed, difficult, technical work with a very steep learning curve, yet it can also be very creative and rewarding. The fundamentals are straightforward, but the details can be a challenge. The best way to begin is to simply start. Good luck!
Mary Ecsedy
Pittsburgh PA
3/16/2009; updated 5/29/2009
For more information, see the links under Website Development on our Resources page.