HTML CSS JavaScript

Five posts in and finally we get to the heart of the matter- getting your content onto the page for your users to enjoy. This will be done in two parts. This, the first part, will deal with how to structure your HTML so it makes sense from and organizational standpoint and so that you can easily style it with CSS. Let's look at a stripped down example of what I'm talking about.

Read the rest of this entry »

The body is clearly going to take a while, since it contains all of the content on the page. I'll be breaking it out into chunks. This first post will focus on how I use the body tag itself.

I generally use the body tag to hold basic information about the page to use with both CSS and JavaScript. I want to capture the general type of page (home pages, landing page, gallery page, tertiary page, form page) and then the style of the page within the general type (e.g., art, movies, blog.) Coming up with a good, logical scheme for this kind of thing can generate plenty of unexpected benefits throughout a site build.

It can also help with planning as these classifications can be used as part of the estimation process- "I've got 5 major templates and 10 variations, that'll be 2 weeks of work."

Here are some examples from the ongoing redesign of DrunkenFist.com. These might help to crystallize what I'm trying to do.
Read the rest of this entry »

This won't be the longest entry in this series, but I did want to take a second to outline the way I organize files. You can come up with your own scheme. There are many. This one works for me, so I use it. The basic idea is to keep everything in a logical, easy to find place every time I make a site.

Let's take a quick look at the generic file structure I use:

Grab a copy from the starter assets repository if you'd like to play along at home.

Let's look at each in turn:
Read the rest of this entry »

Last time out we looked at the Anatomy of a Web Page. Using that, let's move on and look at the first of the two major sections, the head.

For the sake of this blog post, the head includes two pieces of code that are actually before the head. Sue me

Using the head from my (recently updated) starter assets project as an example, let's look at the code in detail. First, what it looks like in total:
Read the rest of this entry »

HTML + CSS + JavaScript = Content + Style + Behavior

This the one of the guiding principles of the way I make sites. We want to keep our content/data, in the form of HTML (HyperText Markup Language) code, neatly separated from the rules that tell the browser what it's supposed to look like, in the form of one or more CSS (Cascading Style Sheets) and rules that tell the browsers what it's supposed to do, for our purposes, written in JavaScript.

Why?

Well, there are many reasons. I'll give you two big ones and then it's onto the next section. We've got a lot to cover.

Read the rest of this entry »

Well, I leaked it earlier this week, so I might as well get started.

Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today's best practices. The focus won't be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it's tough to know how the pieces of a web page fit together in the best way. I've got some of that experience and I'd like to share it with people. So at the end of all of this, I'm hoping this series will serve as a one stop shop for people looking to understand the big picture.

First up: The Anatomy of an HTML Page .

Some basic principles:

• Fast: I want pages to be as fast as possible by default.
• Findable: This isn't really the same as SEO, but it's kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
• Standards compliant: I'm not a standards zealot, but I try my best to follow web standards wherever possible.
• Accessible: I try to make pages as accessible as possible.
• Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
• Intuitive: I want developers to look at the stuff I do and say "hey, that makes sense." I also want it to make sense to me when I return to it in six months
• Breakable: Which is a funny way of saying "graceful degradation," a concept that colors a lot of what I try to do. The idea being- if something's going to break, or not work as expected, make sure that it's not totally screwed up

The Rest of the Series

• How To Make a Web Site the Modern Way. Part 0: Introduction
• How To Make a Web Site the Modern Way. Part 1: The Anatomy of an HTML Page
• How To Make a Web Site the Modern Way. Part 2: The Head
• How To Make a Web Site the Modern Way. Part 3: A Quick Aside on Organizing Files
• How To Make a Web Site the Modern Way. Part 4: The Body
• How To Make a Web Site the Modern Way. Part 5: The Body - How To Structure Your Markup