Learning web development the way I wasn’t taught.

A simpler, unorthodox introduction to web development.

What is a web page?

A web page is just a text document with the.html file extension.

The first page of your website is traditionally named index because it acts as an index of links to the rest of your website.

The .html allows you to categorize the contents of a text file by using special keywords called markup.

The key to learning web development is a content first approach.

Let’s get started by opening a text editor of your choice; be it notepad or the atom editor.

A mono-space font like Courier is highly encouraged.

For demonstration purposes our content will be the industry standard dummy text Lorem Ipsum.

Let’s start by ensuring the browser that this is in fact an HTML document by introducing ourselves to our first bit of markup.

<!DOCTYPE html>

<html> </html>

For now let’s focus on our content first approach.

Start by pasting what you would like displayed on your web page inside the <html> and </html> markup tags.

<!DOCTYPE html>

<html> HOME ABOUT US GALLERY Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </html>

Important point to note

HTML does not recognize starting new lines by pressing the enter key and does not recognize the space character beyond a single use in a row.

So the web page we just created looks like:

A screenshot of our index.html document opened in google chrome.

And if we changed our index.html file to:

<!DOCTYPE html>

<html> HOME ABOUT US

GALLERY Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic

typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </html>

It would still look like:

A screenshot of our changed index.html document opened in google chrome.

I’m sure that’s not how you want your website to look.

To apply style rules to the web page we must first categorize our content so the browser knows what to style. This is what markup is.

Let’s start by creating ourselves a list of elements we want our website to contain.

Like most websites our website needs

A body

A header

A navigation bar

Heading text

Some paragraphs

Some links

Let’s translate that to HTML markup with a little cheat sheet

<body>

<header>

<nav>

<h1> , <h2> , <h3> , <h4> , <h5> , <h6>

<p>

<a >

Important point to note

In an HTML document an opening markup tag:

<nav>

Needs a closing markup tag.

The closing markup tag is always the opening markup tag with a forward slash after the first angle bracket.

</nav>

Let’s go through our index.html file and start categorizing our content in English, but following the rules of HTML.

<!DOCTYPE html>

<html>

<body> <header>

<Heading Text> Lorem Ipsum </heading Text>

<navigation>

<link pointsTo="example.com"> HOME </link>

<link pointsTo="example.com"> ABOUT US </link>

<link pointsTo="example.com"> GALLERY </link>

</navigation>

</header> <paragraph>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</paragraph> <paragraph>

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</paragraph> </body>

</html>

We are almost finished creating our first HTML file!

Now we just need to translate the English “markup” we created into HTML which is a simple process with the little cheat sheet I gave above.

<!DOCTYPE html>

<html>

<body> <header>

<h1> Lorem Ipsum </h1>

<nav>

<a href="example.com"> HOME </a>

<a href="example.com"> ABOUT US </a>

<a href="example.com"> GALLERY </a>

</nav>

</header> <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p> <p>

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p> </body>

</html>

We have just created the the first page of our first website!

And its ugly.

We properly categorized all of our contents in HTML so the web browser has some idea of what we need, but since we did not provide any styling rules to the page the browser resorted to its default style document present in all browsers.

Our website now looks like:

A screenshot of our index.html document with proper markup opened in google chrome.

Quick introduction to the basics of styling

To apply style rules to a .html document we need a different type of text document with a different set of language rules called CSS.

A CSS document is a text file just like .html except with the .css file extension.

To apply styles from a .css document to your .html document we need to provide a link to the .css document inside the <head> tag of your .html document.

Important point to note

The HTML <head> tag is different from the <header> tag.

The <header> tag exists inside the <body> tag alongside other elements that will be visible to your viewers.

The <head> tag exists outside of the <body> tag and provides a place for your .html document to link to .css documents and provide meta information.

Meta information is stuff your viewers won’t see but search engines like Google will.

Meta information allows you to suggest to search engines what keywords relate to your website, what description fits your website, and who the author of the website is.

Example meta information inside the <head> tag

<!DOCTYPE html>

<html>

<head> <meta name="keywords" content="Lorem, Ipsum, Dummy Text">

<meta name="description" content="The traditional dummy text.">

<meta name="author" content="Suren Petrosyan"> </head> <body> <header>

<h1> Lorem Ipsum </h1>

<nav>

<a href="example.com"> HOME </a>

<a href="example.com"> ABOUT US </a>

<a href="example.com"> GALLERY </a>

</nav>

</header> <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p> <p>

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p> </body>

</html>

Now that we know about the <head> tag, lets apply the rules we will set in our style document to our .html document by linking the style document.

Make sure you are in the same folder as your index.html document and create a new document. You can name it whatever you like as long as it ends with the .css file extension.

We will be calling our style document:

style.css

Inside the <head> tag of our .html document we will now provide a link to style.css with this one line of HTML.

<link rel=”stylesheet” type=”text/css” href=”style.css”>

The rel=”stylesheet” attribute tells the browser that the document we are linking will have a stylesheet relationship with our .html document

The type=”text/css” attribute tells the browser that the document we are linking is a text file with the .css extension.

The href=”style.css” attribute gives the browser the location of our style.css file. As long as the style.css document is in the same folder as our index.html document this link will work, if not you will have to specify the location of style.css.

Now that we have created a style.css document and linked to it in our index.html document let’s get started with some styling.

A CSS document starts off with any block of code you choose and does not take preparation like HTML.

A CSS block of code consists of the HTML element you are targeting and opening and closing curly braces.

CSS code block targeting the h1 element without applying any style rules:

h1 {

}

After you create a CSS code block for the element you are targeting you can apply style rules that will tell your browser how to render the element.

Let’s style our web page by applying positioning styles to our entire body element so that the content has room to breathe:

body {

margin-left: 45px;

margin-right: 45px;

margin-top: 45px;

}

Give space between our navigation links and make them bold:

nav > a {

margin-right: 15px;

font-weight: bold;

}

The > CSS selector tells the browser to style any <a> tag that is inside of a <nav> tag. Links outside of our navigation bar will not be affected.

And let’s make our paragraphs easier to read:

p {

font-family: sans-serif;

}

Now our web page looks like:

That’s it for the boring part!

Hopefully you learned

A web page is just a text document with special markup.

HTML is not complicated and can be learned in minutes with a content-first approach.

How CSS is used to apply style rules to a HTML document.

Up next: The fun parts of web development

In my upcoming tutorials we will be going in depth into CSS and turning our skeleton webpage into something we could present to a client.

We will cover: