How to Start Coding Websites
posted by: Connor WilsonThis is second and final part in a series by Connor Wilson on getting into the web design ‘game’ as it were. This part will focus on the front end/client side coding part of things.
First things first, a clarification:
- Client Side: code that is executed by the client’s (user’s) browser, like HTML, CSS, JavaScript, and the likes. You can see the source code of client side languages.
- Server Side: code that is executed by the server and sent back out to the client in the form of HTML/text, like PHP, Ruby and ASP. You can not see the source code from your browser. This article will not deal with server side languages.
This will be all about the client side languages. Mainly (x)HTML and CSS. I will also be assuming you have no prior experience, and have no idea what either are. Please also note, this is not a tutorial on how to make a web page, rather a guide from one experienced person to someone wanting to learn how to learn, essentially.
The Hyper Text Markup Language
HTML stands for just that: Hyper Text Markup Language. When you put an X infront of it, it stands for eXtensible. The first thing that comes into your head might be, “I’ve heard of this, but what does it have to do with a web site?“.
The answer to that is simple. All web pages output HTML to the browser, which is then read by the browser and outputted to your screen accordingly. Simple, right? All you need to know is that if you want to have a page on the internet, you will use HTML. Whether you outsource the coding and don’t know a thing about it, you still need it.
HTML is like the air we breathe for the web.
Next, with these two seemingly identical ‘languages‘ there must be some differences besides on letter. Of course, there are, but before I can get into that (for now it’s over your head) you need some resources. These links will put you on your way to mastering the most basic of all web languages:
- Basic HTML Tutorials from Pixel2Life
- Your HTML Source (Excellent!)
- XHTML Tutorial Series from W3 Schools
Look like a small list? You don’t need any more than that! It’s that simple. Hopefully you understand.
Cascading Style Sheets
CSS isn’t just a game, you know, it’s what makes websites look the way they do!
For anyone completely new to CSS, I like to get them to do this. This is for Firefox users, and if you aren’t one, then become one 
I’ll also be touching on the cross-broswer issues of today later on. Anyways, here’s what to do:
- Go to any website. You’re reading this on one right now, so head to #2.
- Up top, go View > Page Style and click No Style.
- What happened!?!
You just saw the affect CSS has on web pages. XHTML isn’t to make websites look good, its just the markup. The canvas, if you will. CSS if the paint. CSS styles web pages using a variety of different methods, and to understand this, here are some more resources:
- Your HTML Source Stylesheets (Again, excellent resource)
- Pixel2Life Basic CSS Tutorials
That’s all you should need, really.
HTML + CSS + Web Browsers
When I said the browser outputs HTML accordingly, I meant it. Different browsers will interpret CSS and HTML differently than others. This is an ongoing issue in the web development world, and always will be, mainly for one reason: Internet Explorer. Firefox and other browsers such as Opera, Safari, etc… display CSS more as intended than IE. It’s like IE tried to fix things it sees wrong.
The problem? Your website may look perfect- just as intended- in all broswers, but when you come around to IE things are misplaced, broken and dithered. This can be very discouraging, so it’s important to remember some things:
- There is usually one solution to a problem, but don’t kill yourself finding it.
- HTML ‘if statements’ (conditional comments) can help you to use browser dependent style sheets. Read about it here.
XHTML vs HTML
The differences between the two will be seemingly non-existent or minimal at first, but if you do a little bit of research, you will start to see some differences. This article from W3 Schools outlines one differences, and is a good read for beginners.
Essentially, XHTML is a stricter version of HTML. Today, XHTML is used on the more modern and web-savvy sites. In normal HTML you are likely to come across tables for layouts, animated GIFs and the like, whereas XHTML users are more likely to promote validity and accessibility. All with tons of exceptions of course.
What can these two do together?
A great way to conclude this is to show you a series of websites named CSS galleries. These sites gather the best looking websites from all over the internet that make use of CSS and XHTML properly. Here’s a few good ones:
- CSS Zen Garden - Shows the true potential of CSS. Users submit CSS files to style one HTML file that does not change. Everything must be done with CSS.
- CSS Remix
- CSS Import
- Screenalicious - More basic, but still worth a look.
