Technical Doc

TECHNICAL DOC

Introduction

This is an introduction to basic Web Development

Each of the following sections will introduce the 3 key building blocks of a functional, modern website.

Front End

What is "Front End Web Development? In a nutshell, a webite is built upon 3 key building blocks, as previously mentioned. These building blocks are:

Let's begin with HTML - possibly the first place to begin for anyone who wants to learn website development

HTML

HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language. HTML can be thought of as the basic structure of a Web page. Think of a house, and the HTML might be the floors, walls, roof, and foundation of that house.

HTML consists of a series of elements. These HTML elements tell the browser how to display the content. Below is an example of some HTML elements, represented by "tags", which being with a "< >" opening tag, and finish with a "</>" closing tag.

<header> </header>
<section>
<h1>This is an H1 tag </h1>
<p>This is a paragraph tag </p>
<p>This is a paragraph tag </p>
</section>

Notice how each opening tag, which begins as <>, is closed off with a closing tag </>

This is how HTML tags work. Tags are often self-containing, as shown with the <p> tag or the <h1> tag. But tags can exist inside opening and closing tags of other elements. You can see this in the example above, with the <section> tag; the <p> and <h1> tags are wrapped inside of the opening "section" tag and the closing "section" tag. When tags are contained within other tags, like we've shown above, this is known as the "nesting" of tags

There are also some tags which have an opening tag, but do not need a closing tag. We won't go into them in depth, but here is an example of a tag which does not required a closing tag for it to work:

<img>

Tags like these are known as "self-closing tags".

So that is the basic overview of HTML - the foundation and structure of every web page. In the next section, we will discuss the next building block of a web page - Cascading Style Sheets.

CSS

Let's go back to our house example. We described HTML as the foundation of the home - the walls, floors, and roof etc. But what is a house without painted walls, carpet or tiles for the flooors, or colors or the window frames and roof? We want our home to look presentable, and this is a big part of what CSS does for your web page.

It would be crude to simplify CSS as simply making your webpage look nice. But at a basic level that is exactly what it does. It is the "style" part of Cascading Style Sheets.

The color of the fonts; the color of the background; the size of the images - these are controlled by CSS. But there's more - CSS can be used to create animations, add shadows to elements, transform the size or color of a button when you hover the mouse over it. And that's just the beginning.

When writing CSS, it does not require tags like HTML. CSS has it's own language "rules". At a basic level, when writing CSS, you are typically writing out the following:

Because this is just an overview of CSS, we won't dive too much into the details. But for an example of how CSS can work, see the CSS code that is written below

p {
color: blue;
text-align: center;
font-weight: bold;
}

The "thing" that you want styled is called the 'selector'. In the example above, the selector is 'p'. This selects any HTML <p> tag, and applies the styles that you choose. The styles/rules part of the above code, are those lines that are contained inside the curly braces { }

Next up you have the "style" that you want to apply. In the example, the style is known as the 'property', and is the word which is shown before the colon. For example, "color:"

The color property tells the webpage what color you want the font to be. In the example, this will change the color of the fonts to 'blue'. However, this rule will only apply to any font that is inside of a <p> tag. Why? Because, we are applying the rule inside of the p selector, as mentioned above

The final piece of information we need is the 'value' of the property. With the 'color' property, the value is 'blue'. With the 'text-align' property, the value is 'center'. And with the 'font-weight' property, the value is 'bold'. These are just a few examples of values. Properties often have many values you can choose from, and the rules for values can differ. But these are the basics.

In the next section, we will discuss the final building block of the web page - Javascript.

Javascript

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

JavaScript enables interactive web pages and is an essential part of web applications

Below is an example of Javascript code. To begin, we will create a button using HTML, and give the button an id value of "clickMe":

<button id=”clickMe”>Click Me</button>

This will create a button with the words "Click Me" on it, as you can see above. But that button will not do anything when you click it. That's because HTML doesn't know what to do with it. But with JavaScript, we can create a function that executes when the button is clicked. As an example, see the code below:

<script>

var btn = document.getElementById(“clickMe”);

btn.addEventListener(“click”, alertMe);

function alertMe(){

alert(“The button has been clicked!”);

}

</script>

When this code is created, it creates a pop-up alert message that will appear when the button is clicked.
Conclusion

Web Development is fun, and all you need to begin are the 3 basics of web development. Once again, they are: