• 20 hours
  • Easy

Free online content available in this course.

Certificate of achievement available at the end this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/12/18

Digging in

Log in or subscribe for free to enjoy all this course has to offer!

As this course comes to its end, it might be tempting to think that we've seen everything. Seen everything? You didn't really believe that, did you? Come now, you've still hundreds of things to find out about, whether in HTML, CSS, or in related technologies (PHP, JavaScript, etc.).

This chapter aims to give you a few tips to complete your apprenticeship. So don't be sad, there are plenty of other things left to discover!

From the website to the web application (JavaScript, AJAX, etc.)

JavaScript is a language that has been around for some years now and is frequently used on the Web in addition to HTML and CSS. It's probably one of the first languages you'll want to learn now that you know something about HTML and CSS.

What is JavaScript used for? Can't we do everything with HTML and CSS?

You can already do a lot of things in HTML and CSS, but when you want to make your page more interactive, a language like JavaScript is essential.

Here are some examples of what JavaScript can be used for:

  • We'll use it most often to change CSS properties without having to reload the page. For example, you point to a picture and the background of your website changes color (you can't do this with a :hover as it involves two different tags. That's one limit of CSS).

  • It can also be used to edit the HTML source code without having to reload the page while the visitor is viewing the page.

  • It also allows you to display dialogue boxes on the visitor's screen...

  • ... or change the window size.

JavaScript is a language that is closer to programming languages like C, C++, Python, Ruby, etc. HTML and CSS, however, are more description languages: they describe how the page should appear, but they don't give direct instructions to the computer ("do this, do that, etc."), like JavaScript does.

JavaScript is commonly used today for AJAX (Asynchronous JavaScript And XML). This technique is used to change any part of the web page viewed by the visitor by exchanging data with the server. This gives the impression that the pages are more dynamic and responsive. The visitor does not need to systematically reload the whole page.

As browsers are increasingly effective in processing JavaScript, pages that use JavaScript are more responsive. Some websites now being built literally become web applications, the equivalent of software but available as websites!
One notable example: Google Docs, Google's office suite available on the Web (figure below).

The Google Docs spreadsheet
The Google Docs spreadsheet

You'll learn more about Javascript in other courses!

HTML5 related technologies (Canvas, SVG, Web Sockets, etc.)

The W3C doesn't just work on the HTML and CSS languages. While these are certainly the best known, the W3C also seeks to identify other technologies supplementing HTML and CSS. There are a large number of these and they are also often confused with HTML5.

Here's a list of the new technologies introduced in parallel with HTML5 (note that some are not really "new" but they are back on the scene):

  • Canvas: allows you to draw in the web page, inside the HTML <canvas> tag. You can draw shapes (triangles, circles, etc.) and also add and do things with images, apply graphic filters, etc. In the end, all this now allows us to develop real games and graphical applications directly in web pages!

  • SVG: allows you to create vector graphics in web pages. Unlike canvas, these graphics can be enlarged to infinity (the vector principle). The Inkscape program is known for being able to produce SVG drawings.

  • Drag & Drop: allows you to "drag and drop" objects into the web page, in the same way as you can drag and drop files onto your desktop. Gmail uses 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). In particular, you'll use it in combination with Drag & Drop.

  • Geolocalization: to locate the visitor and offer services related to the place where their located (e.g. scheduled times of nearby cinemas). Although the location is not always very accurate, it can identify a visitor to within a few kilometers (with their permission).

  • Web Storage: is used to store a lot of information on the visitor's computer. It's a more powerful alternative to the usual cookies. Information is organized on a hierarchical basis, like in a database.

  • Appcache: tells the browser to put into cache certain files, that it won't seek to systematically download any more. Very useful for creating web applications that can even work "offline" (disconnected).

  • Web Sockets: allows faster exchanges, in real time, between the visitor's browser and the server that manages the website (this is a kind of improved AJAX). It's may be the future of web applications, which will become as responsive as real programs.

  • WebGL: allows the introduction of 3D in web pages, using the OpenGL 3D standard (figure below). 3D scenes are directly managed by the graphics card.

A 3D web application using WebGL
A 3D web application using WebGL

As you can see, there are new worlds for you to discover! Once you know enough JavaScript, you'll be able to go further in managing your website... and even turn it into a real application!

Dynamic websites (PHP, JEE, ASP. NET, etc.)

The languages we're going to discuss here are also programming languages. Like JavaScript? Yes, but with one important difference: JavaScript runs on your visitor's computer, while the languages we're going to see run on the "server" that contains your website.

What difference does it make whether the program runs on the visitor's computer or on the server?

The differences are considerable. Firstly, in terms of power, a server will more often than not be faster than your visitor's computer, and so be able to perform more complex calculations. You also have more control on the server side than in JavaScript... But JavaScript remains irreplaceable as there are some things that you can only do on the "visitor" side.

Server languages generate the web page when the visitor arrives on your website (figure below). Each visitor can thus get a web page personalized according to their needs!

Data exchange with a server
Data exchange with a server

The languages are thus not used for the same things, but they complement each other. If you combine HTML + CSS + JavaScript + PHP, for example, you can handle AJAX (data exchange between the page and the server), perform calculations, store information in databases... in short, build real dynamic websites!

There are many "server-side" languages. Let's mention a few:

  • PHP: one of the most well known. This easy to use, powerful language is used in particular by Facebook. I'm also writing a PHP tutorial!

  • JEE (Java): this Java extension is widely used in the professional world to build dynamic, powerful and robust websites. It's a bit more complex than PHP to get started with.

  • ASP .NET (C#): this is the Microsoft's language and is quite similar to JEE. It's used in combination with other Microsoft technologies (Windows Server, etc.). It uses the powerful .NET framework, which is the developer's genuine Swiss Army knife, and which provides many features.

  • Django (Python): this is an extension of the Python language that allows you to build dynamic websites quickly and easily. It is known for generating ready to use administration interfaces.

  • Ruby on Rails (Ruby): an extension of the Ruby language, quite similar to Django, which allows you to build dynamic websites easily and with greater flexibility.

Ultimately, these languages allow you to make your wildest dreams come true on your website:

  • forums;

  • newsletter;

  • visitor counter;

  • automated news system;

  • member management;

  • web games (strategy games, virtual animal breeding, etc.)

  • ...

Example of certificate of achievement
Example of certificate of achievement