Quickstart to Web Design

In this tutorial, you will learn the basics of web design. By the end, you will have built a very simple website. This tutorial will be simple, concise, and feature the minimal amount of code and terminology needed to build a website.

A website is composed up two basic technologies, frequently mistaken as programming language: HTML & CSS. HTML is known as a markup language meaning it does not involve logic, and is simply meant for formatting text and displaying digital media such as images, and video. CSS is known as a stylesheet language, which is used to describe the style and design of the content that HTML provides such as background color, font-size, size of images, color of text, etc.

Table of Contents

  1. Setup the Dev Environment
  2. Coding with HTML
  3. Styling with CSS
  4. Finishing HTML
  5. Finishing CSS
  6. References

1. Setup the Dev Environment

Before you start building a website, you will need two tools: a web browser to test with (preferably Chrome or Firefox) and a code editor. Download, install, and open either Chrome or Firefox and one of the text editors.

Code Editors (Mac):

  1. Sublime Text
  2. Atom
  3. Komodo Edit

Code Editors (Windows):

  1. Sublime Text
  2. NotePad++


2. Coding with HTML

Finally, we get to the good stuff. You will be building a simple poem webpage. See the picture below:

webdesign_quickstart_full_page_screenshot

This is how the final web page will look with both HTML and CSS.

Now that we’ve gotten the preliminary stuff out of the way, lets not waste anymore time and dive in. Open  your code editor. Personally, I like to use Sublime Text when I’m building websites.

In your Documents directory (folder) on your computer, create a new directory called WebDesignTutorial.

WebDesignTutorial_finder_screenshot_1

Open your code editor and create a new file called index.html, and save it in your WebDesignTutorial directory.

empty_sublime_text_indexDOThtml_screenshot1

Your directory should now look like the picture below:

finder_window_webdesign_tutorial_indexDOThtml_screenshot

 

Now it time to code. In your code editor, type the following in your index.html file and save:

<html>
<head>
    <title>Web Design Tutorial</title>
</head>
<body>

</body>
</html>

Your code editor should look like:

 

sublime_text_html_boilerplate

Let’s explain what we just did. The code that you see is HTML. Every website on the internet includes code similar to what we just typed including the major websites like Google or Facebook.

Why did we name our file index.html?

index.html is a special name that web browsers recognize as the main page of your website. It is also referred to as the home page. Whenever your visit facebook.com or google.com, the index.html file is the first file that gets shown.

What is <html>, <head>, <title>, and <body>?
These are known as HTML tags. There are well over 50 HTML tags that offer different functionality, but we will only focus on about 11 of them. You do not need to memorize all of these tags. When I code I always keep an extra tab open in my browser of a website with a list of HTML tags to serve as a reference; like a dictionary for HTML. The Mozilla Developer Network (MDN) is one of my favorite HTML references.

The <html> tag lets the web browser know that this code is an HTML document. The <head> tag is where you put descriptive content about the website such as the title of the website hence the <title> tag. Code nested inside the <head> does not get displayed directly on your web page. The <body> tag is the main tag that you will put everything that you’d want users to see. It is your canvas.

What about the tags that begin with the forward slashes like </html> or </body>?
These are referred to as closing tags. Tags without the forward slash are known as opening tags. It just lets the web browser know where you start and end the code nested inside. The majority of HTML tags include both opening and closing tags, but there are a few exceptions.
We are now ready to view what we have coded so far in the web browser. Make sure to save your file, then double click on the index.html file in your WebDesignTutorial directory.

 

blank_webdesign_tutorial_page

Your web page should be blank because we did not put anything inside the opening and closing body tags. However, notice your URL address bar. You should see some text resembling: file:///Users/rashadrussell/Documents/WebDesignTutorial/index.html. 

This is the file path to your website’s index.html file.

Looking back at the picture of our poem webpage, we need to add a picture. You can use any picture, so I’ll let you choose. To find license free high quality photos online, one of my favorite sites is unsplash.com. You can find the photo that I used at this URL:
https://hd.unsplash.com/photo-1466220666686-90bdba318c9a

We need to save the image to our website’s directory, so that we can reference it with a relative path. Right click on the image, and click Save Image As. Save the image to your WebDesignTutorial directory as mountain.jpg.

Now, lets code it into our webpage. Inside your <body> tags, in add the following:



<img src="./mountain.jpeg" />

Your index.html should look like the following:

 

quickstart_webdesign_tutorial_html_with_image

 

Save the file, and refresh your web browser. This is a giant image, so you’ll need to scroll down to see it all. Plus, the top of the image is white so, it may be hard to notice at first until your scroll.

Lets explain the code.

What is <img src=“./mountain.jpg” />?
This is known as the image tag. This HTML tag is used to add images to websites. Note, like I mentioned earlier, there are a few tags that does not require a closing tag. The image tag like a few others are closed within themselves. That’s where there is a forward slash at the end of the tag.

What is src=“./mountain.jpg”?
This is known as the src (source) attribute. HTML attributes is code that describes, manipulates, or add information to the content of an HTML tag. The source attribute is used to tell a tag where a file is located. In our case, we were interested in adding the mountain image to our webpage; therefore, we needed to tell the image tag where it was located. The mountain image was located in the same directory as our index.html file, which is why we pretended the name of the file with a dot-slash (./). The dot-slash means look in the current directory.

I feel like cheating a bit. That image is a tad bit too big, and it would be annoying to continue to adding more HTML code only to keep scrolling a long distance down the web page to see what we wrote. The best way to handle a big image is to resize it with CSS. Therefore, let’s skip to the CSS. We will come back to the HTML later.

 

3. Styling with CSS

Finally, we get to the CSS. Now we can start adding style to our webpage, and the first thing we want to do is to turn that mountain into a pebble lol. Sorry, pun intended. We are going to resize the mountain image to a smaller size.

Inside your head tag, but below the closing title tag, add the following:

<style>
    img {
        width: 680px;
        height: auto;
    }

</style>

Your index.html file should look like the following and save:

 

web_design_quickstart_sublime_text_image_styles

 

Refresh your web browser, and you should see the following. Now that feels better. Gives us a little more room to breath.

 

web_design_quickstart_downsized_header_image

Code Explanation:

What is <style>?

This is the style tag. The style tag is used to write CSS. Code inside the style tag is CSS. Notice the curly braces, colons, and semi-colons. This is known as CSS syntax. CSS syntax is different from HTML syntax, which has a lot of greater-than, less-than, and forward-slash symbols. Syntax is just a programming to refer to the coding style of a programming language. Human languages like Spanish, Japanese, and Swahili all have alphabets and symbols unique to their language. The same is true for programming languages. In this tutorial, you were able to learn two more languages.

The CSS code reads: Grab all the image (img) tags on the page, and set their width to 680 pixels wide, and height to auto.

To add style to an HTML element, you’d use what is known as a CSS selector. A CSS selector is used to grab all the HTML elements that match, and apply the CSS styles to it that are inside the curly braces. In our case, we used the image tag (img) selector to grab all image tags. Then we gave those image tags, a CSS styles width and height. There are well over 100 CSS selectors and styles combined, but it’s a good thing we do not need to memorize them. There are a few fundamental CSS styles and selectors that are repeatedly used, which you will eventually memorize, and the rest you can simply keep a tab open with a reference to the others.

What is width: 680px?
This is the width CSS style. It is used to set the width of an HTML element. 680px is 680 pixels. In this case, pixels are just a unit of measurement to describe how wide or tall an HTML element should be.We use pixels to measure the size of and the distance in-between HTML elements.

What is height: auto?
This is the height CSS style. It is used to set the height of an HTML element. The auto value tells the web browser to automatically set the height for you rather that you explicitly specify a pixel height. If you explicitly set the width of an image, and set it’s height to auto, the web browser will constrain the proportions of the image, and the same can happen vice-versa. You are free to explicitly set the height by pixel value, but the image may look skewed and distorted if you don’t know the appropriate with value.

According to our final design, we still need to center the image. We will add one more CSS selector and style to achieve this.

Add the following below the closing curly brace of the img selector:

body {
    text-align: center;
}

Your index.html file should look like the following:

web_design_quickstart_css_body_align_center

Code Explaination:

We just used the body CSS selector to target the body tag. The body tag includes all of our webpage’s content. Then, we tell the body tag to center the text of all the HTML tags nested inside the body tag, this includes the img tag. Even though the image tag is not technically text, the text-align style centers anything text or not.

Lets Jump back into some HTML. We still need to add our poem, the title, and author below the mountain image.

4. Finishing HTML

Lets add the poem’s title Comfort Zone, and author’s name below the mountain image.

Add the following code in your body tag:

<h3>Comfort Zone</h3>
<h5>Poet: Julie Hebert</h5>

Your index.html file should look like the following:web_design_quickstart_header_tags

Code Explanation:

What is <h3>?

This is the header-3 tag. Header tags are used to emphasize import text such as titles, headings before paragraphs, etc. If you were writing an essay you’d title each section: Introduction, Body, Conclusion, well the same is true for websites. In our case, we wanted to make the title of the poem emphasized.

Header tags range from 1 to 6 with 1 being the largest and 6 being the smallest: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. We used the <h5> header to emphasize the poet’s name, but we didn’t want to make it as big as that poem’s title.
Save your index.html file, and refresh the webpage. Your webpage should look like the following:

 

web_design_quickstart_header_tags_webpage

 

Finally, for our last bit of content, we need to add the poem itself.

Add the following code to your index.html file:

<div class="stanza">
    <p>We all have a comfort zone,</p>
    <p>In which we all retreat.</p>
    <p>When times get tough it's hard to not</p>
    <p>Feel like you are beat.</p>
</div>

Code Explanation:

What is div?

This is the division (<div>) tag. This tag is often used to group sections of code together, incase your would want to manipulate them together as a group with CSS. This is one of the most fundamental, important, and widely used HTML tags. For our use case, typically poems are broken into groups of four lines known as stanzas. If you look at our final design, every four lines of the poem has some margin spacing below it before the next stanza starts. This is the perfect use-case for the <div> tag.

What is class=“stanza”?

This is the class attribute. We’ve explained what attributes were when we first introduced the image tag above. The class attribute acts as a label or identifier for a HTML tag. It is used for CSS to identify certain HTML tags by a given name. In CSS,

we can refer to any HTML tag that has a class-name set to stanza and apply styles only to those HTML tags. We could have used any name besides stanza. We could have used class=“cheeseburger”, but that isn’t very descriptive of the webpage that we are building. Any HTML tag is allowed to have multiple class-names, but that is beyond the scope of this tutorial.

What is <p>?

This is the paragraph tag, hence the “p”. HTML really tries to make their tags intuitive, and resemble natural human logic. Each paragraph tag forces the text inside to move to a new line, which is perfect for a poem. We nested four paragraph tags, which includes four lines of our poem or one stanza inside one div. We will repeat this pattern with different text three more times to complete the poem.

Save your index.html file, and refresh the web browser. Your web page should look like the following:

 

web_design_quickstart_first_stanza

 

Repeat the div.stanza pattern to finish the poem. Your code should look like the following:

 

web_design_quickstart_repeated_stanza

 

Save your index.html file and refresh the web browser. Your web page should look like the following:

 

web_design_quickstart_full_page_no_stanza_margins

 

We are one step away from finishing the HTML. Lets add a link. It wouldn’t be considered a website without a hyperlink. That’s the entire point of the internet: connectivity. Lets make a clickable link that will redirect the page to the source of the poem. We will convert the title of the poem into a hyperlink (“link” for short). We will need to modify the code.

Modify the poem title’s <h5> tag to look like the following:

<h3>
    <a href="http://www.wow4u.com/givingyourbest/">Comfort Zone</a>
</h3>

Code Explanation:

What is the <a>?

This is the anchor tag. The anchor tag is used to create links on web pages. When the content inside of an anchor tag is click, the page is redirected to that link. Content inside an anchor tag could be any HTML element: a div, a paragraph tag, an image, raw text, etc.

What is href?

The href attribute is the hyperlink reference. It specifies the URL that the page should redirect to when the link is clicked. In our case, we want to link to the source of the poem, which is where I found it.

Save and refresh the web browser. Notice the color of the title changed to blue and is underlined. This is the default web browser CSS style for anchor tags. You can overwrite these browser default styles with CSS, and style anchor tags with any color, text-decoration, or any other style that you want. Click on the title and notice the page is redirected,

We are finished the HTML. However, we still need to add one final touch-up to the CSS. Notice that there is no marginal spacing between each stanza. Let polish things up.

 

5. Finishing CSS 

Let’s add some vertical spacing between each stanza.

Add the following to the CSS style tag in the head of the index.html file:

.stanza {
    margin-bottom: 50px;
}
Your code should look like the following:

web_design_quickstart_stanza_css

Code Explanation:

What is .stanza?

This is a CSS selector that targets any HTML tag with the class attribute with a value of stanza. In CSS, to reference a HTML tag by its classname, you must prepend the name with a dot. In our case, all four div tags have a classname of stanza; therefore, they are the only html tags that will receive the styles that the .stanza selector chooses. Also note, you can use the same classname on different HTML tags as well. Images, paragraphs, videos, headers, anchors, etc, can all share the same classname as well as multiple, but that is beyond the scope of this tutorial.

What is margin-bottom: 50px?
Margin-bottom is a CSS style that targets the surrounding margin of an HTML tag displayed on a webpage. Setting the value of 50px (50 pixels) to the bottom margin means that the next element below will be 50 pixels apart.

Save your index.html file, and refresh the web browser. Your web page should look like the following:

webdesign_quickstart_full_page_screenshot

Viola! You have built your first website. You learn two coding languages: HTML & CSS. You were introduced to CSS selectors and several HTML tags.

So, what’s next? You now are equipped with a lot of tools to build several basic web pages, but this is only the beginning. Think of ideas to expand on this webpage, and create them. This will help you grow as a developer, and stay tuned for more tutorials to come. In the mean time, I’d recommend Codecademy.com for more in-depth and interactive tutorials. Also, the Mozilla Developer Network (MDN) has a ton of resources to all things web, which you can use to explore HTML & CSS further. Post a comment for any suggestions on what you’d like me to cover next.

Download Full Source Code: https://github.com/rashadrussell/Quickstart-to-Web-Design

 

6. References