Progressive Enhancement Part 1, Content
The first stage in building a site is the one that is sadly overlooked, particularly by the artsy fools who call themselves "designers". That is developing content or a reasonable facsimile of future content BEFORE you even think about what the site is going to look like. Content is why sites exist, or at least why they should exist, and yet it is one of the most overlooked aspects of site building on the part of designers, front end coders and even back end developers!
The BIG questions
It all comes down to a series of simple questions that really should be answered before any development begins.
Why do you want people to come to your site?
When I was doing freelance development full time this was something of a litmus test for potential clients and site owners. If your only answer is "I want to make money via advertising revenue" it likely means they do not have anything of actual value to offer visitors. They have fallen for some sort of make money fast scam and are likely better off NOT having a website. I'm not saying you can't help fund a site with advertising, but if that's the only reason you are making one, it is highly unlikely you have sufficient interest in the actual site topic to be successful in doing so.
Though admittedly, I consider online advertisers a bunch of sleazeball scam artists leeching off the teat of legitimate business owners. It was with great trepidation that I even considered adding advertising to this site, and that was done well after the page's intent and placeholder type content was conceived!
Simple fact is if you do not have a passion for the topic - or a knowledgeable team who's expertise you can draw upon for generating content - it is very unlikely your site will end up anything more than a flash in the pan, relegated to "also ran" status at best, falling flat on its face at worst!
What content or services are you offering to visitors?
It is often shocking how many EXISTING site owners - much less prospective ones - cannot actually clearly answer this one. If you don't know what you are offering to people on a site, how can you know how to build it? This is another place where the industry is just completely back-assward as you'll have businessmen with a vague idea of what they want go to one of the template whorehouses like ThemeForest or TemplateMonster to grab some crappy poorly developed inaccessible train wreck pretty picture, and then try to randomly shoe-horn content on the fly into it. You see the same thing if they hire one of these ignorant fools who run around calling themselves "designers" when they don't know enough about HTML, CSS, JavaScript or accessibility to be designing a blasted thing! That type of nonsense might work for a newspaper advertisement, but has no place on the web and is a significant contributor to why so many websites fail within their first year!
How is what you are offering any different from existing sites?
Questioning how the site offers anything new is often not applicable when it comes to small sites for local businesses; they are often one of two or three competitors in the market and just want to get their name out there. That's fine. But if you want to compete on the global stage you need to do things better, cleaner, and more accessibly than anyone else in the same field. Simple fact is that it's VERY unlikely at this point that your idea is actually unique, or that as someone starting out with a site that you have the chops to know enough about what websites actually are to have an informed opinion on the subject.
What makes your content have "value" to visitors?
This is another one that often results in blank stares. We in the know often say "content of value" but what does that actually MEAN? The answer ends up being a bit like Potter Stewart's explanation of what constitutes pornography. "I can't tell you what it is, but I know it when I see it."
Put plainly so far as website content goes, content of value is information, images, movies or other data that users want, share, and are willing to go out of their way to get at. If you can take something people are willing to jump through burning hoops to get, and then remove the hoops and hand it to them on a silver platter, you're golden.
Sadly a lot of sites with content of value make users jump through all sorts of stupid hoops to try and get at it. Poorly written JavaScript that means you MUST have scripting to get at the content. Poorly written non-semantic markup just makes the content harder to get at for those with accessibility needs. Massive code bloat thanks to developer ineptitude and garbage frameworks that make the content take so long to load, most people will just bounce to some other website on the same topic. Simple fact is the majority of websites. It also can kill you on ranking well in search since with bad/broken markup and a lack of clearly marked content just makes that too have to work all that much harder.
So let's do it!
Generally speaking you figure out what you are going to want on your main page first. For this example we'll make a 'fictional' website called "CutCodeDown" which is about web development. (gee, really?). Follow along with the plaintext file here:
The first thing any site should have is a common header. This is the heading under which everything on all pages would be a subsection. In this case I have the site name, a hypen, and the tagline "Minimalist Semantic Markup".
This is followed by a menu with some commonly used links. In production these will likely change, but it's a good placeholder on which to build. We also will likely have a section of social media links, so just put a sentence there spaced out by linefeeds to say that.
A "call to action" in the form of a news item is usually a good idea to make room for before the main content... so again another simple line to say that.
We then have our heading for what the page ACTUALLY contains. As the content heading we will indent after it to make it clear that we are in a section. Using tab indents to make this clear will keep things easier when we add our HTML later.
Under that section heading we have our various news items or blog entries. These too would have their own sub-headings that we space out with line-feeds, followed by some simple placeholder "lorem-ipsum" content.
We repeat that for a second section, de-indent indicating the end of the news and creating a heading for the next section. Since this will be a site filled with articles, we give it some heading text, indent again to say we're inside this heading, and list off said articles or a reasonable facsimile of future article titles.
Since I have a directory filled with sample code dating back a decade or more, I'll toss in a section for that, again just a heading and its content. Typically most people want an advertisement, and regardless of its placement on the page visually this is low-priority and belongs near the bottom of the document.
Finally our footer. I use a row of hypens (that will become a HR later) to indicate that this is a new subsection without heading text.
... and that's our simple plaintext rough draft of the main page of the site. Something you should create long before you even THINK about layout, colours, or presentational images.