Static pages can easily be generated by using the three building blocks: HTML, CSS and Javascript. You can think of HTML being the structure of the page, while CSS adds the style, colours, margins, etc. Javascript allows for interactivity – for instance by giving the user the chance to write into a search bar.

This webpage is a perfect example of taking some general HTML structure and turning it into a great looking web page, solely by adding additional CSS code. Take 5 minutes to click yourself through and get a feeling for how CSS works. Just by intuitively trying to make sense of the CSS snippets, can you guess what they’re exactly doing? If you don’t understand the syntax of the code yet, do not worry! All of this will be explained in further detail later.

CSS Zen Garden is a web page that has been redesigned by many just by using different CSS classes. When clicking on the web page, make sure to click on the design proposals on the right hand side of the web pages. The examples below demonstrate how the basic structure of HTML can be completely turned around with CSS code:

Very often, developers pick existing HTML and CSS structures and adjust them according to their needs. In order to be able to do this, you will first have to learn the basics of how those two languages work. Very soon, you will be able to work with templates.

For dynamic web pages, the layer system gets a little bit more complex. First of all, your front-end needs to be connected to a consistency layer by following some business logic you have defined. This will allow you to code interactive social media networks such as Facebook and Twitter, but is beyond the capacity of this course.

Resources