We're finally about to talk serious business.
This is a rather special chapter, quite different from what you have read so far.
Until now we've learned how to build basic web pages: adding content, organizing it with HTML and decorating it with CSS.
Now we're about to put all that theory to practice: we're going to create our first complete website, from A to Z.
Creating a website is not an easy task: you must be creative (like me), proficient (as myself) and talented (clearly, you've knocked on the right door).
With that said, you have all the tools you need to start building a professional looking website.
Let's get started.
Creating the blueprint
You're probably already thinking about how awesome your website is going to be.
You're imagining the header, the menus, the background and all the great content you'll add.
And here's where I have to stop you. Not so fast.
Before starting anything of the sort you first need to take a (mental) notepad and start designing the blueprint of your website.
It doesn't need to be very elaborate, in fact it should be the most broad and concise possible, but you should nonetheless have a clear mental picture of what you're website will look like once completed.
The bigger the project, the more valuable this blueprint becomes.
Most of the time a simple scope statement and a few general guidelines are more than sufficient.
Since this is presumably your first project of the sort I'll even help you out by giving you a theme: the exaltation of SiteRaw's awesomeness.
A true Internet monument of worship to let people know just how extraordinary SiteRaw is.
Here is the final result we will achieve at the end of this chapter.
I intentionally went for the most simple and minimalist design possible, so as to put emphasis on the distinct elements that compose a website.
We will also see how to create more advanced designs, with images, gradients and even more dynamic elements.
For example, this is a slightly more advanced design variation that we will also cover in this chapter.
So where do we start?
We know that a website is a combination of:
- Several HTML files which define the content of each page.
- One or more CSS files which specify the style and presentation of the site.
This is the order we will follow for this chapter.
Structurally, it makes sense to start with HTML. You can have content without style but not the opposite.
Let's get started!
Organizing the content
The first step is to lay the foundation of our HTML page.
To do so we will re-use the basic code that we saw in some of the very first chapters of this tutorial.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>SiteRaw</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- Content --> </body> </html>
The <head> portion is relatively complete so we won't be adding anything new.
As we already know, the displayed content goes inside the <body> tag.
So what do we write?
I suggest you start with the HTML structural tags that we discovered at the beginning of this third part.
These will define the basic sections of each web page: the header, the menu, the footer and so on.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>SiteRaw</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <!-- Header --> </header> <nav> <!-- Menu --> </nav> <section> <!-- Main Content --> </section> <footer> <!-- Footer --> </footer> </body> </html>
You can recognize the four sections that shape most web pages: the header, the menu, the main content area and the footer.
They are nearly universal in their application.
This is just a template, there are of course other ways of breaking down the structure.
But what do we place in each element?
The header
Headers are usually composed of either the title of the site, the logo, a banner or a combination thereof.
To keep things as simple and straightforward as possible, I'll just use an <h1> title with an <h2> slogan or subtitle.
<header> <h1>Welcome to SiteRaw</h1> <h2>The Best Site on the Web</h2> </header>
If you do want to use images, know that there are two ways to do so.
- You can use the <img /> tag that we saw in the first part of this tutorial.
- You can also add a
background-imagewith CSS.
The second method is usually preferred for designing web layouts, as it allows you to dynamically alter the size, scale, position and even content of the image directly within the CSS file.
The menu
The menu or navigation bar will contain to essential browsing links that allow the user to go from one page to another.
Depending on what type of site you choose to build, and this is really up to you, the navigation menu you obtain will be quite different from mine.
For my example I'll simply use the most general / all-purpose site structure.
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="features.html">Features</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
You can place as many links as you want, just make sure that the navigation menu is consistent on all web pages.
The main section
Unlike the header, menu and footer, the main section is a dynamic content area.
This means that the content placed in this block will usually vary from page to page, in contrast to the other zones which remain fairly identical on all pages of your site.
We'll divide our main content area into two sections represented by the two HTML elements <article> and <aside>.
<section> <article> <!-- Content --> </article> <aside> <!-- Aside --> </aside> </section>
So what do we put inside these elements?
That is entirely up to you.
Presumably, since every page will be different, you'll want separate content on each one: a brief introduction for the homepage, an in-depth description for the about page, a contact form for the contact page...
We'll learn how to do that in subsequent chapters.
For now I suggest just focusing on the homepage. You can add anything you want: titles, text content, images.
An example is provided at the end of this part.
The footer
The footer is, as explained previously in this tutorial, the area in which you'll be placing content such as legal notices, contact information and so on.
It's probably not the most interesting section of a website and doesn't really offer you much to express your creative freedom, so I suggest you simply add a typical copyright notice or whatever else of the same stripe.
Here is my example.
<footer> <p>© SiteRaw - <a href="http://www.siteraw.com">www.siteraw.com</a> - The Best Site on the Web.</p> </footer>
Nothing very original, just a simple copyright notice and a repeat of the site subtitle.
The complete HTML code
Now that we've added content to all four main blocks of our website, it's time to assemble every component into the final HTML site structure.
Here is the complete HTML code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>SiteRaw</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Welcome to SiteRaw</h1> <h2>The Best Site on the Web</h2> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="features.html">Features</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <section> <article> <h1>Welcome to SiteRaw</h1> <p>SiteRaw is the <strong>best site on the web</strong>!</p> <p>Don't believe me? See for yourself!</p> <p>SiteRaw is so awesome it awesomizes you.</p> <p>Enlarge your awesomeness today by signing up to SiteRaw.</p> <h2>Why is SiteRaw so awesome?</h2> <p>It all started when lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p> <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p> </article> <aside> <div class="aside"> <h1>About SiteRaw</h1> <p>SiteRaw was founded by God.</p> </div> <div class="aside"> <h1>Testimonials</h1> <blockquote>SiteRaw very good site. Mongol never learn coding without SiteRaw.</blockquote> <p class="name">Genghis Khan</p> </div> </aside> </section> <footer> <p>© SiteRaw - <a href="http://www.siteraw.com">www.siteraw.com</a> - The Best Site on the Web.</p> </footer> </body> </html>
Congratulations, you've built your first HTML page.
While it certainly looks impressive at first glance keep in mind that there is are no novelties in this HTML code: you already know the purpose of every HTML tag we used.
But we're not done with our website just yet.
This is only the HTML portion, and only HTML without CSS does not make for the most visually pleasing experience ever.
See for yourself...
I know, I know...
That's why I said we're not done yet.
What's interesting is that this HTML code is more than enough for building any type of layout you want by adding CSS.
We will see several examples of web designs further on in this chapter and they all use the same baseline HTML code.
Formatting the design
Now that we have our HTML code handled, it's time to move onto the CSS.
CSS is a very important part of any website as pretty much every line of code will have an influence on the final design.
We will use most of the CSS property we have already seen in previous chapters, so in case you forgot what one of them does you can always go back to the chapter in which it was introduced.
Or, if you're really lazy, you can just edit the values and see what happens.
Let's start design our website.
Centering the design
If you look back at the mockup of our design, you will notice that the main elements (header, navigation bar, menu and article content) are all centered horizontally.
This is very easy to do in CSS, as we saw in the CSS box model chapter. All you need is to indicate a fixed width and set the margin property to auto.
To makes things simple we will apply that property to the <body> tag, but you can of course create a new element specifically to serve as a container for the rest of your (centered) HTML elements.
Here is the CSS code we will be using.
html { background: #61905c; border-top: 10px solid #386b32; color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); } body { width: 760px; margin: auto; padding: 20px; font: 14px arial; }
You can see the result in the following illustration.
You can already see the foundations of our design: the colors, the alignment of each component and the visual theme of the website.
If you aren't satisfied with some of the design choices I make, feel free to modify the code until you get an adequate result.
You might also have noticed that this code excerpt applies CSS rules to two HTML elements: <html> and <body>.
While the latter is self-explanatory, indicating a fixed width and horizontally aligning the content to the center of the page, I didn't mention why I chose to apply other properties to the former.
This is because, in CSS, many styles affecting a parent element are inherited by their children.
The parent element is the one containing other nodes or nested elements, which in turn are called children elements.
If you want a visual demonstration of this concept, look at the following figure.
For instance, by applying a color property to the <html> tag, every element contained within that tag - meaning all of them since <html> is the root element - will inherit the same color... unless this rule is overwritten elsewhere in the CSS file.
You can try it yourself by changing the color of the headings (<h1>) or the paragraphs (<p>).
Defining the global styles
While designing your website using CSS, you will naturally come to make a distinction between global styles affecting every element of a certain type, for example every paragraph <p>, and more specific styles, only being applied to an individual element and/or its nested children, for example every paragraph <p> within the <aside> element.
It's customary to start will the more general styles at the top of the CSS file and move down as you get more and more specific, if anything for the sake of future readability.
In our example we already defined a background color, a text color and even centered the elements.
Those would be considered global styles or general styles.
There are still a few more details we can add before moving on to modifying the layout of each individual element.
a { color: #a6d8a5; text-decoration: none; } a:hover { text-decoration: underline; } nav, article, .aside, footer { background: #407d38; padding: 0; box-shadow: 2px 2px 2px #386b32; } nav, footer { margin: 10px 0; padding: 0 15px; } footer { text-align: center; padding: 10px 0; }
In this code we added a background to each main component of our website (navigation bar, article, aside, footer) and we made our links a little more visually pleasing - the default blue/purple on a green background isn't the most aesthetically pleasing.
Header and navigation
Now that the general layout of our site is handled, we can move on to designing the more intricate parts.
Let's start with the header and navigation menu.
The header of our website is comprised of two heading titles, <h1> and <h2>.
Since the header is intended to be one of the most striking aspect of a website's visual identity, we can't really leave those two headings with the default layout.
Here is a simple CSS code we can use to improve them a bit.
header h1 { font: 25px/19px Impact; letter-spacing: 2px; margin-bottom: 0; font-weight: 300; text-transform: uppercase; } header h2 { font: 15px "Comic Sans MS"; font-weight: 300; }
You can use any of the properties we've seen thus far, you can even choose to replace the headings with a logo or a banner if you want.
For the navigation menu, since we want a horizontal menu rather than the default vertical bullet list, we have to change the display type of each individual bullet from block to inline.
Other than that, there isn't much difficulty in this code.
nav ul { padding: 0; text-align: center; } nav ul li { display: inline; padding: 0 50px; line-height: 40px; }
Those two CSS rules sets are enough to give you a horizontal menu and make it fit the layout of your website.
As always, you can edit the properties as needed.
The complete CSS code
Just as I did with the HTML, I'll give you my version of the CSS code.
The result should be similar to what I showed at the beginning of this chapter, though if you edited my examples along the way - which I recommend - yours results will obviously differ from mine.
Here is the complete CSS code.
html { background: #61905c; border-top: 10px solid #386b32; color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); } body { width: 760px; margin: auto; padding: 20px; font: 14px arial; } nav { border-bottom: 4px solid #47873d; height: 40px; } nav, article, .aside, footer { background: #407d38; padding: 0; box-shadow: 2px 2px 2px #386b32; } nav, footer { margin: 10px 0; padding: 0 15px; } a { color: #a6d8a5; text-decoration: none; } a:hover { text-decoration: underline; } header h1 { font: 25px/19px Impact; letter-spacing: 2px; margin-bottom: 0; font-weight: 300; text-transform: uppercase; } header h2 { font: 15px "Comic Sans MS"; font-weight: 300; } nav ul { padding: 0; text-align: center; } nav ul li { display: inline; padding: 0 50px; line-height: 40px; } section { display: flex; justify-content: space-between; } article { flex: 0 0 530px; margin-right: 10px; text-align: justify; } article p { padding: 0 30px; } article h1, article h2 { margin: 25px 50px 21px 0; padding-left: 20px; background: #335f2e; font: bold 15px/30px Helvetica; box-shadow: 0 2px 0 #234f1e; } .aside { padding-bottom: 5px; margin-bottom: 20px; } aside h1 { margin: 0 0 20px; text-align: center; background: #335f2e; font: bold 14px/27px Helvetica; box-shadow: 0 1px 0 #234f1e; } aside p { padding: 0 15px; } blockquote { font-style: italic; margin: 0 15px; color: #a6d8a5; } blockquote:before, blockquote:after { content: "\""; /* adds a quote before and after */ font-size: 25px; } footer { text-align: center; padding: 10px 0; }
That was the last bit of CSS, and with this our design is finally finished.
You can see what it looks like below.
Now that the design is finished, you know how to proceed, what are the guidelines to follow, and how you can make your own website layout from scratch.
It's up to you to create a unique design for your site, to put your colors, your background images, your effects, your fonts.
The sky is the limit.
You are allowed, and invited, to use my CSS code as a model.
I know that all these lines of code can make you feel dizzy at first, especially for beginners who have never built a website before.
The good news is that with practice you will not only not feel dizzy at the sight of CSS code anymore, you will also be able to create an entire design without the help of anyone.
It might even be better than mine (non-contractual assertion - results may vary - I am a genius after all).
A complete website
Now that we have both our HTML and CSS codes, what could possibly be left to cover?
For starters, we only ever built one HTML page... a website is (hopefully) more than just one page.
Adding more content to your website is easy, it's only a matter of creating new pages and linking them together.
Don't forget to import the CSS file on all pages, so that they share the same design.
Yes and no.
Remember that only the CSS code is involved in the customization of the design.
Look at the HTML we wrote: there is no information about visual rendering, only about the content to be displayed.
That's what I've been repeating since the beginning of this tutorial so hopefully you get it by now: HTML for the content, CSS for the presentation.
By modifying the CSS you can change the entire layout of your website without touching any HTML code.
Let's use a practical example to demonstrate.
For instance, if you don't like the design we used in our example and wanted something completely different, all you would need is to modify the CSS file.
Here is a different version of the exact same website.
Same HTML, different CSS.
Not satisfied? Let's try something else.
Still not good enough?
Let's try something a little more advanced.
Or you could go for something more minimalist and ergonomic.
Always with the same HTML code.
These "more advanced" designs are not necessarily more complex than what we've seen until now, but they do require more fine-tuning and therefore more CSS code.
What style of design you pick depends on the type of website you are building.
A My Little Pony themed fashy political tabloid might not be the best option.
With this, we've finally built our first complete website.
What's left to learn in this tutorial?
You'll find out in the next chapters.