When you first looked at the summary of this tutorial and saw the list of chapters, you were probably thinking something along the line of "WTF?? I have to learn all this to create a website?".

And now that we're reaching the end of this course you might be asking "Is that it? Did we see everything there is to learn?".

Of course not.

While I tried to make this tutorial as wide and exhaustive as possible, sometimes at the risk of covering certain fringe subjects of web development that you aren't likely to run into very often such as audio and video elements, there is always something more to learn.

For starters, we only ever covered two languages: HTML and CSS.

There are many more aspects to web development that we haven't introduced: client-side scripting languages such as Javascript, server-side programming languages such as PHP, database handling with SQL, web applications with AJAX as well as other technologies related to HTML5 and more.

Don't worry, I won't let you leave this page without inflicting upon you yet another chapter full of bewildering concepts and barbaric terminology.

What we know

Before moving on to some of the more advanced technologies involved in website creation, now is a good time to do a quick summary of what we have learned up until this point.

This course was separated into four parts.

Part I: The basics of HTML5.

After a brief introduction to the basic text editors (Notepad, Sublime, Brackets) and different web browsers (IE, Firefox, Edge) involved in web development, we learned how to create basic HTML pages by adding titles, paragraphs, emphasis, links and images.

In this part I deliberately avoided talking about CSS.

The downside is that our web pages were pretty ugly for the first few chapters, but it provided the benefit of only having to learn one language at the time.

Part II: Web design with CSS3.

After a while, it was inevitable that we started introducing the second aspect of web development: designing the layout with CSS.

The chapters may have seem somewhat heavy due to the amount of CSS properties that you had to learn, but that's just the nature of the CSS language.

From colors to backgrounds, gradients to borders, typographical formatting to alignments... there were a lot of CSS properties we had to cover and I did my best to lessen the repetitiveness of these chapters, notably by providing cool examples of the practical applications of these properties.

Part III: HTML and CSS together.

The third part of this tutorial was about combining what we learned in the previous two, namely the HTML and CSS languages, and taking things even further than what we'd have otherwise expected.

After a brief theoretical introductory chapter to HTML5 web page structure, we learned about the CSS box model and different types of layouts before building our first complete HTML and CSS website.

This was the chapter you had all been waiting for.

Part IV: Advanced features.

Finally, we introduced a few of the more advanced - and the term is very relative - features of HTML and CSS such as tables, audio and video elements and media queries.

After seeing how tables work in HTML, we finally got around to seeing forms.

While it was pretty cool to learn how to design form layouts by stylizing the different text fields and other controls, it was nonetheless a slightly frustrating chapter as we couldn't actually do anything with our forms once the data was submitted.

We could get the user to send the data contained in the form by clicking a "Submit" button, but we had no way to receive and interpret that data... for that would require a server-side programming language (PHP, ASP.NET).

At the time I promised that we would cover these server-side languages in greater detail, and so we will a little further on in this chapter.

But before that let's talk about Javascript.

Client-side languages

Is called client-side any computing language that is executed by the client - in most cases, the browser.

As such, both HTML and CSS are considered client-side languages since they are interpreted by the user's browser - specifically the layout engine - rather than the server.

In addition to HTML and CSS, which are respectively markup and style sheet languages, we can mention a third common website component: scripting languages such as Javascript.

While alternatives to Javascript have existed in the past, we can cite VBScript which was developed by Microsoft, there are currently very little viable substitutes for this language when it comes to client-side scripting.

The main reason is that the interpretation of Javascript being handled by the browser's rendering engine, its developers are the ones that have to handle Javascript's implementation... and they probably aren't too eager to repeat the process on yet another language just to provide you with a alternative.

What is much more common is to have Javascript libraries such as jQuery or frameworks such as Angular that attempt to simplify some aspects of client-side scripting.

Javascript demonstration

Since Javascript is interpreted by the browser, you can start using it right away in the same way we've been using HTML and CSS.

Here are a few examples of how Javascript works. Just add the following code anywhere on your page.

<script type="text/javascript">

    document.write("SiteRaw is awesome!");

</script>

This will display the text "SiteRaw is awesome!".

As you may have guessed, <script> is the HTML element used to reference or embed client-side code, usually Javascript.

<script type="text/javascript">

    alert("SiteRaw is awesome!");

</script>

This will produce an alert window containing the text "SiteRaw is awesome!".

The style of the window will depend on which browser you're using.

I won't be going over what each individual Javascript property or function does as this is beyond the scope of this chapter, and there exists a completely free Javascript tutorial right here on SiteRaw which you can read if you're interested in this language.

The purpose of Javascript

You're probably wondering why you'd need to learn another language in addition to HTML and CSS.

The purpose of scripting languages such as Javascript is to make your pages more interactive.

We can use Javascript to do the following.

• display dialog boxes on the visitor's screen
• provide suggested results (autocomplete) on a search field
• automatically fetch information from another document without reloading the page
• customize the verification of form controls such as verifying if a username is available
• produce draggable, droppable, resizable or otherwise sortable elements
• dynamically change the HTML attributes (usually class) of an element on the click of a button
• implement transitions between the different states of an element

Basically you can edit the HTML and CSS codes of your page dynamically, for example on the click of a button or when the user performs a specific action.

Server-side languages

The languages we are about to discover here are also programming languages, but they differ from Javascript by the fact that they are interpreted on the server (web host) rather than on the client (browser).

Javascript code is executed at the same time as HTML and CSS - technically a little after HTML since the first page to load will be the HTML document - while server-side languages are executed before the page is even loaded.

If you want a more visual illustration of the HTTP request/response handshake, take a look at the figure below.

The usual model goes as follows.

• the client sends a request
• the server sends the response
• the page is loaded and rendered in the browser

With the inclusion of a server-side language comes an additional step right after the HTTP request.

• the client sends a request
• the page is generated
• the server sends the response
• the page is loaded and rendered in the browser

What that means is that the visitor will never see any server-side code, as it's executed well before the final output reaches him.

The different server-side languages

Unlike with client-side scripting where you only really have one option with Javascript, there are many server-side languages to choose from.

• PHP : one of the simplest and most common server-side languages, PHP is always a good choice for beginners as it is open source, stable and very easy to use. You can read the PHP tutorial on SiteRaw.
• ASP.NET : while not technically a language itself but rather an application framework, ASP.NET is perhaps the most efficient and powerful server-side technology for developing large scale web applications. As with PHP, you can read the free ASP.NET tutorial on SiteRaw.
• JEE (Java) : somewhat similar to ASP.NET, this Java extension is widely used to build powerful and robust websites.
• Django (Python) : an extension of Python that allows quick and easy web development.
• Ruby on Rails (Ruby) : an extension of Ruby, the main selling point is the rather impressive number of libraries.

The two most common languages used for web development are PHP and ASP.NET.

Which one should you choose?

It's really a matter of preference as they both fulfill different needs while simultaneously having a lot of overlapping features, as nearly all programming languages do.

ASP.NET is usually faster and more efficient, mainly because it is compiled rather than interpreted (meaning that everything, including HTML, is turned into machine code before being run), but also has a slightly steeper learning curve and is thus more appropriate for large scale applications.

PHP on the other hands is more accessible to beginners as nearly every aspect of the language was designed to be as straightforward as possible.

It does however suffer from performance issues when compared to ASP.NET, but it's still the recommended choice for novices and small websites.

But what can server-side languages do that client-side technologies can't? Let's find out.

The purpose of server-side languages

Server-side languages are what will allow you to create dynamic websites.

Here are some examples of website features that require a back-end (server) component.

• member areas
• forums
• newsletters
• visitor counters
• comment systems
• databases
• browser games

Basically anything involving authentication or data management.

Server-side languages are what make your site dynamic, in other words it can be constantly updated without it requiring your intervention.

The best examples is of course the Internet forum where nearly everything is automated via a server-side language.

Remember the chapter on HTML forms that we couldn't complete because we had no way of processing the data after it was sent?

This also requires a server-side language such as ASP.NET or PHP, and it's actually an incredibly mundane operation that takes at most a few lines of code.

Server-side languages demonstration

It'll be somewhat difficult to show you examples of server-side languages as we did with Javascript since you would need to download a web server (Apache, IIS, nginx, etc.) in order for the code to be properly executed, and this goes well beyond the scope of this chapter.

You can however read more about the tools needed to run a server-side language on their respective tutorials right here at SiteRaw.

But just for the sake of satiating your curiosity, here is what PHP code looks like.

<body>

    <?php echo "SiteRaw is awesome!"; ?>

</body>

Web applications and AJAX

There are quite a few newer web technologies that work with HTML5 and were introduced at about the same time.

• Canvas : allows you to draw in the web page inside the HTML <canvas> tag. You can draw shapes (triangles, circles, etc.) as well as add text and images, apply graphic filters and more.
• SVG : allows you to add vector graphics inside the HTML <svg> tag. Unlike canvases, these graphics can be enlarged as much as you want, which is the principle of Scalable Vector Graphics.
• Drag & Drop : allows you to "drag and drop" objects into the web page in the same way that you can drag and drop files onto your desktop. Many e-mail providers such as Outlook use it to allow you to easily add attachments to an email.
• File API : provides access to files stored on the visitor's computer with their permission. Often used in combination with Drag & Drop.
• Geolocalization : allows you to locate the visitor more or less accurately.
• Web Storage : used to store information in the visitor's browser, somewhat similar to cookies.
• Application Cache : used for storing certain web pages or other files into cache, useful for creating web applications that can work while offline.
• Web Sockets: similar to AJAX, this allows direct communication between the client's browser and the web server without having to reload the page.
• WebGL : allows the use of a 3D engine within web pages using the OpenGL 3D standard and directly managed by the user's graphics processing unit (GPU).

Most if not all of these features and technologies require Javascript to operate, which is why they weren't covered in this tutorial.

AJAX applications

AJAX is what allows you to move from simple web development to creating complex web applications that function just like desktop software (except for the fact that they run on a browser).

Since client-side languages are used to make your pages more dynamic and functional for the user and server-side languages are used to handle user entries, automation and anything involving persistent data across the pages, what would happen if we were to implement them both in unison?

The best way to describe AJAX (Asynchronous JavaScript And XML) is to consider it as a combination of both client-side and server-side, both front-end and back-end working together.

You're most likely already familiar with AJAX even if you didn't know the name until you read this chapter.

• Have you ever written an email from a web-based mail provider (Outlook, Gmail, Yahoo)?
• Have you ever had to decipher captchas (characters you type to prove you're human)?
• Have you ever seen a web application with an "autosave" feature (Office Online, Google Docs)?
• Have you ever used a modern comment system (Disqus, Youtube, SiteRaw)?

Then you've been using some form of AJAX without even knowing it... and that's what makes AJAX so practical, it enhances the ergonomics of your website in the most inconspicuous manner.

Without AJAX, every time you'd want the client to interact with the server - save a draft, like a video, type in a captcha - the user would have to reload the page entirely in order to submit an HTTP request.

AJAX is the practice of using Javascript to handle these asynchronous requests, meaning that the user will barely even register that an action involving server-side communication is being performed.