Server2ClientS2C Home

The aim of this site is to cover the complete spectrum of server side to client side programming. The site is split into two sections covering development, persistence and presentation of data on the server side and development and presentation on the client side. All the individual disciplines come with quick references, case studies and quizzes to support and enhance overall learning and can be accessed from the relevant sections by using the appropriate tabs.

Server Side Programming

This part of the site covers server side programming development, persistence and presentation of data. Client-server programming of this sort can at first appear complicated because of all the components present in the different layers of a distributed system. From a logical viewpoint we can think of the different layers that make up the disparate parts of a distributed system as different tiers of an overall architecture. This way of conceptualizing a system is often referred to as a muliti-tier architecture.

Three-Tier Architecture

The most common form of the multi-tier architecture paradigm is known as the three-tier architecture model and this is the architecture pattern used for this site. The three-tier architecture model separates our client-server programming into three tiers consisting of a presentation tier, an application tier and a data tier. Each tier is developed and maintained as an independent area of work and the different tiers can, and often do, exist on different software platforms. This separation of concerns reduces the complexity of the overall architecture and means any of the tiers can be modifed or even replaced with different technologies independently and without affecting the other tiers. The following diagram is a representation of a three-tier architecture model to aid in understanding of the concept:

three tier architecture

How Server2Client Fits into The Model

We will be using the Java programming language as our server-side language of choice as this is is platform independent and can be run in a wide variety of environments. We then make a through investigation of server side dynamic page loading using Java Servlets and JavaServer Pages (JSP), which the Tomcat Server stores in a JSP container that is translated to a Java class before being executed within the JRE. Persistence of data will be achieved using MySQL which we will connect to using either Hibernate4 or JDBC4. We will look into frameworks and take a tour through the Spring framework which makes all aspects of distributed applications easier to manage and is used in all tiers of our architecture.Although we won't always use an IDE for our development, when we do, we will be using the Eclipse IDE and where required will use the Tomcat Server which we can integrate into Eclipse. The following diagram show how the disciplines for this section of the site fit into our three-tier architecture:

S2C three tier architecture

Discipline Correalation

The disciplines used on the server side of the site have a correalation to the version of Java being used. This can get very confusing and so the table below shows which releases of software work with a particular version of java:

Minimum Java Version Tomcat Version Servlets JSP Spring Version Hibernate Version JDBC Version
56.0.x2.52.12.533
67.0.x3.02.2344

Client Side Programming

In this part of the site we look at the client side of our applications from a more simplistic architecture where we display web pages using HTML in conjunction with CSS, JavaScript and jQuery. Unlike JSP pages these pages are statically served from the host. When using this approach to displaying information, we will ensure that we keep the HTML (structure), CSS (presentation) and Javascript/jQuery (behaviour) separated from each other to conform to best practice. We will also make extensive use of the jQuery API to cut down on the amount of JavaScript required when creating behaviour.

Although generally we won't be using persisted data when learning our client-side programming, there are examples of doing this when we look at four lessons on Ajax starting with an investigation of the Ajax Low-Level Interface. These lessons can be found in the jQuery section of the site.

JavaS2C Home

Java is an object oriented programming language and computing platform that was first released by Sun Microsystems in early 1996 and has grown in popularity ever since. The Java programming language is platform independent and can be run in a wide variety of environments. This is achieved via the Java compiler which converts a document into Java bytecode, which is a highly optimized set of instructions designed to be executed by the Java run time system which is more commonly known as the Java Virtual Machine or JVM for short. In essence the JVM is an interpreter for the Java bytecode and as such, when implemented on a platform can run any Java bytecode on that platform. So although the implementation of the JVM may differ from platform to platform the underlying bytecode is always the same. This flexibility is what makes the Java language so portable.

The use of the JVM also makes the use of Java more secure as the JVM acts like a firewall between the application and a computer. All Java programs are under the control of the JVM and as such the JVM can stop adverse side effects propogating outside the system.

Concerns in early releases of Java over the speed the language runs at, because it is an interpreted language, have since subsided as the JVM has been streamlined and improved. The advantages of portability and security have placed Java at the top of the tree of object orientated programming languages and is why the language is used in so many diverse applications today.

Beginning Java5

We start out by downloading a JDK and setting up our environment before beginning our journey into Java5. With the environment set up we introduce the code structure of a Java source file and look at syntax. After this we look at the primitive variables available in Java before discussing method scope. We then take an in-depth look at the symbols used for mathematical and logical manipulation that are recognized by the compiler and commonly known as operators. Every computer language has conditional branching and loop structures and Java is no exception. We finish off this section with a look at the conditional and loop statements available in Java5.

Java5 Objects & Classes

The main emphasis of the Beginning Java5 section of the site was an introduction to the basic building blocks required to write a Java program. This section is all objects and the classes used to construct them. We start by looking at a predefined data type, the Array object. Investigation of this class will give us an insight into using objects and classes before we start to create our own. After this we examine class structure and the syntax required for class construction, before investigating reference variables and how to use them in Java. We have used methods throughout the lessons so far, and the next lesson in the section goes into these members in much more detail. We then look at instance variables and their scope before studying constructors which are used to instantiate our objects. We finish the section by taking an in-depth look at static members, followed by a new feature in Java5, enumerations.

Java5 OO Concepts

Up until now, for learning purposes, we have ignored many important object oriented concepts that we can use within our Java programs. This neglect is rectified in this section where we start our study of OO concepts by looking at encapsulation and how to protect our data. We then tackle inheritance over two lessons where we look at creating hierarchies, overriding methods and the use of super. After this we look at abstraction and how we apply it to our classes and methods. We then examine polymorphism and how to use it with our methods, arguments and return types. Our investigation of polymorphism continues as we investigate interfaces and their usage. We then return to the idea of encapsulation as we look into nested classes, what they are and how to use them. We finish the section with a detailed look at the Object class and the methods we inherit and can override in our subclasses.

Java5 Flow Control

In this section we finish our studies on flow control by studying exceptions and assertions. Firstly we look at Java exceptions where we make a thorough investigation of the exception hierarchy and how Java's exception architecture hangs together. With an overview of exceptions under our belt we look at handling the various forms of exception in our code. After this we look at declaring and throwing exceptions in our code, which we can deal with straight away or allow to propogate up the stack to be dealt with elsewhere. We finish of our investigation of exceptions by creating our own bespoke checked and unchecked exceptions for when needed. With exceptions covered we turn our attention to the assertion mechanism available in Java. We learn appropriate uses of assertions and when not to use them. We also look at the runtime commands used to enable assertions, as and when required.

Java5 API Contents

In our fifth section on learning Java5 we begin our investigations of the Java API by looking at the String, StringBuilder and StringBuffer classes. These predefined classes come with a multitude of methods for working with strings and are part of the java.lang package which is implicitly imported into all out Java programs for us. After this we broaden our horizon of Java by investigating classes that are not implicitly imported into our programs. Before we look at other parts of the Java API however, we need to take a closer look at how Java stores predefined classes into namespaces, which Java calls packages, and how we can import these packages into our programs. With knowledge of packages under our belt we can now look at parts of the Java API outside the default java.lang package. Our first port of call is how we use I/O in Java and for this we will look at the java.IO package. We start our exploration of Java I/O by looking at the class hierarchies involved and then take an in-depth look at the byte stream classes and character stream classes used for this purpose. After this we look at the classes available for working with dates, numbers and currencies. Most languages have an implementation of regular expressions and Java is no exception and we look at the classes used for pattern matching. We finish off our tour of the Java API by looking at formatting and tokenizing our data.

Java5 Concurrency

In our sixth section on learning Java5 we look at multithreading and how to run parts of our program concurrently. We explain the terminology behind concurrency before looking in detail at running parts of a program concurrently by subclassing the Thread class and also by declaring a class that implements the Runnable interface. Running separate threads at the same time is great and we can certainly improve the performance of our programs using multithreading. But what happens when concurrent threads need to access and update some shared resource? Java deals with this problem with synchronization and we investigate how we can control access to our code by synchronising at the method or block level. After this we investigate thread priorities and how we can have the priority set automatically by the invoking thread or assign thread priorities ourselves using methods of the Thread class. We finish our look at concurrency by looking at how threads can interact with each other when they are within a synchronized method or code block.

Java5 Collections/Generics

In our final section on learning Java5 we look at collections and investigate generics. We start by defining what a collection is and look at some diagrams of the collection types to get a feel for the various structures of the classes and interfaces involved. After this we make an in-depth investigation of generics and unravel the strange syntax we get with it. Following on from this we examine the various hierarchies within The Collections Framework by taking a look at some concrete implementations of Sets, Lists, Maps and Queues. We than look at the java.util.Arrays and java.util.Collections classes that contain a lot of static utility methods we can use with our collections. We finish the section by finding out how to sort our collections using the Comparable and Comparator interfaces.

Beginning Java6

We start out by downloading a JDK and setting up our environment before beginning our journey into Java6. With the environment set up we introduce the code structure of a Java source file and look at syntax. After this we look at the primitive variables available in Java before discussing method scope. We then take an in-depth look at the symbols used for mathematical and logical manipulation that are recognized by the compiler and commonly known as operators. Every computer language has conditional branching and loop structures and Java is no exception. We finish off this section with a look at the conditional and loop statements available in Java6.

Java6 Objects & Classes

The main emphasis of the Beginning Java6 section of the site was an introduction to the basic building blocks required to write a Java program. This section is all objects and the classes used to construct them. We start by looking at a predefined data type, the Array object. Investigation of this class will give us an insight into using objects and classes before we start to create our own. After this we examine class structure and the syntax required for class construction, before investigating reference variables and how to use them in Java. We have used methods throughout the lessons so far, and the next lesson in the section goes into these members in much more detail. We then look at instance variables and their scope before studying constructors which are used to instantiate our objects. We finish the section by taking an in-depth look at static members, followed by a new feature in Java6, enumerations.

Java6 OO Concepts

Up until now, for learning purposes, we have ignored many important object oriented concepts that we can use within our Java programs. This neglect is rectified in this section where we start our study of OO concepts by looking at encapsulation and how to protect our data. We then tackle inheritance over two lessons where we look at creating hierarchies, overriding methods and the use of super. After this we look at abstraction and how we apply it to our classes and methods. We then examine polymorphism and how to use it with our methods, arguments and return types. Our investigation of polymorphism continues as we investigate interfaces and their usage. We then return to the idea of encapsulation as we look into nested classes, what they are and how to use them. We finish the section with a detailed look at the Object class and the methods we inherit and can override in our subclasses.

Java6 Flow Control

In this section we finish our studies on flow control by studying exceptions and assertions. Firstly we look at Java exceptions where we make a thorough investigation of the exception hierarchy and how Java's exception architecture hangs together. With an overview of exceptions under our belt we look at handling the various forms of exception in our code. After this we look at declaring and throwing exceptions in our code, which we can deal with straight away or allow to propogate up the stack to be dealt with elsewhere. We finish of our investigation of exceptions by creating our own bespoke checked and unchecked exceptions for when needed. With exceptions covered we turn our attention to the assertion mechanism available in Java. We learn appropriate uses of assertions and when not to use them. We also look at the runtime commands used to enable assertions, as and when required.

Java6 API Contents

In our fifth section on learning Java6 we begin our investigations of the Java API by looking at the String, StringBuilder and StringBuffer classes. These predefined classes come with a multitude of methods for working with strings and are part of the java.lang package which is implicitly imported into all out Java programs for us. After this we broaden our horizon of Java by investigating classes that are not implicitly imported into our programs. Before we look at other parts of the Java API however, we need to take a closer look at how Java stores predefined classes into namespaces, which Java calls packages, and how we can import these packages into our programs. With knowledge of packages under our belt we can now look at parts of the Java API outside the default java.lang package. Our first port of call is how we use I/O in Java and for this we will look at the java.IO package. We start our exploration of Java I/O by looking at the class hierarchies involved and then take an in-depth look at the byte stream classes and character stream classes used for this purpose. After this we look at the classes available for working with dates, numbers and currencies. Most languages have an implementation of regular expressions and Java is no exception and we look at the classes used for pattern matching. We finish off our tour of the Java API by looking at formatting and tokenizing our data.

Java6 Concurrency

In our sixth section on learning Java6 we look at multithreading and how to run parts of our program concurrently. We explain the terminology behind concurrency before looking in detail at running parts of a program concurrently by subclassing the Thread class and also by declaring a class that implements the Runnable interface. Running separate threads at the same time is great and we can certainly improve the performance of our programs using multithreading. But what happens when concurrent threads need to access and update some shared resource? Java deals with this problem with synchronization and we investigate how we can control access to our code by synchronising at the method or block level. After this we investigate thread priorities and how we can have the priority set automatically by the invoking thread or assign thread priorities ourselves using methods of the Thread class. We finish our look at concurrency by looking at how threads can interact with each other when they are within a synchronized method or code block.

Java6 Collections/Generics

In this section we look at collections and investigate generics. We start by defining what a collection is and look at some diagrams of the collection types to get a feel for the various structures of the classes and interfaces involved. After this we make an in-depth investigation of generics and unravel the strange syntax we get with it. Following on from this we examine the various hierarchies within The Collections Framework by taking a look at some concrete implementations of Sets, Lists, Maps and Queues. We than look at the java.util.Arrays and java.util.Collections classes that contain a lot of static utility methods we can use with our collections. We finish the section by finding out how to sort our collections using the Comparable and Comparator interfaces.

Java6 Swing & RMI

We start the section by looking at Graphical User Interface (GUI) concepts and the MVC paradigm and how this pattern can help in removing some of the complexity from the disparate parts of an application. We then introduce the Abstract Windowing Toolkit (AWT) and Swing libraries with an overview of those parts of these libraries we are interested in to create our own GUIs within java. In Swing we store components within other components and we look at the javax.swing.JFrame top-level container class, adding depth to frames using panes and the javax.swing.JPanel background container class. Following on from this we take a look at several of the interactive Swing components available for use when creating our GUIs. Then we take a look at several layout managers we can use to organise the components within our GUIs. We also need to make our GUIs interactive so what we require is a mechanism where we are alerted to a user event, such as a button being clicked, and make a response to it. We look at how we can intercept user events and action them, which is known as event handling. We finish our lessons on Swing by looking at dialogs which are windows that are displayed within the context of a parent window. Dialogs are often used to display some information, show messages to the user or prompt the user for input. We finish the section by looking at Remote Method Invocation more commonly known as RMI and how we can use it to access methods remotely.

Java 7 (Not started yet)  Section Not Started yet

??.

ServletsS2C Home

We can think of a servlet as a Java class which we can use to extend the capabilities of an application server. Servlets have the capability to respond to any types of request but are commonly used to extend applications hosted by web servers such as Tomcat. Servlets give us the ability to serve dynamic web content to users from a container within our web server and are generally used with the HTTP protocol.

The following table shows the correalation between the Servlets, JSP, Tomcat and Java versions used on this site:

Servlets JSP Tomcat Version Minimum Java Version
2.52.16.0.x5
3.02.27.0.x6

Servlets 2.5 Basics

In this section we look at using servlets and will be covering the 2.5 release. We start the section by getting our environment ready for use with the servlets 2.5 specification. The first thing we do is download the java SDK and set a relevant classpath for this. After this we download, verify and install Tomcat 6 to use in combination with our servlet 2.5 classes. A basic understanding of how the HTTP protocol works will give us a better understanding of how servlets are invoked so we talk about the HTTP protocol, the HTTP request/response mechanism, HTTP methods and HTTP response codes. After this we learn about the Java EE5 Platform and how servlets fit into the architecture before starting our in depth investigation of servlets by looking at the java interfaces and classes we need to create our own servlets. We follow our introduction servlets by looking at the servlet lifecycle and then writing our first servlet and then investigate the ServletConfig and ServletContext objects that every servlet gets access to after initialisation. We finish the basics section by taking a detailed look at the request and response objects.

Servlets 2.5 Intermediate

In the first lesson of the Servlets 2.5 Intermediate section we learn how to create HTML forms, interrogate field values passed back to our servlets from HTML forms and how to action an appropriate response to form input. After this in the first of three lessons on conversational state we look at two ways to get around the statelessness of HTTP and the pros and cons of the session management techniques used to do this. First we will look at URL rewriting and then look at the use of hidden fields to achieve conversational state within our applications. In our second lesson on session management we look at cookies, the first of two tracking techniques that are more flexible and work with web applications regardless of page volume. In our final lesson on session management we look at the HttpSession interface and how we can use objects of this type for session tracking. We then look at the three scopes our servlets can have, these being from narrowest to broadest, request, session and context and the attributes associated with them. Following on from our discussion on scopes we discuss multithreading in web applications, whether a scope is thread safe, and if not, when and how we can protect resources within that scope from concurrent access. We finsih the section by looking at redirects and request dispatching.

Servlets 2.5 Advanced

In the first three lessons of the section we do a detailed investigation of context, request and session listeners. After this we look at filters which are Java components that allow us to receive requests and responses and manipulate them through the filtering mechanism. We then investigate wrappers which allow us to create custom requests and responses and look at the Servlet API interfaces that can be subclassed by developers wishing to modify the request or response object. We finish the section with an in-depth look at declarative and programmatic security and how we can use these techniques to secure our web applications.

Servlets 3.0

In this section we look at using servlets and will be covering the 3.0 release. We start the section by getting our environment ready for use with the servlets 3.0 specification. The first thing we do is download the java SDK and set a relevant classpath for this. After this we download, verify and install Tomcat 7 to use in combination with our servlet 3.0 classes.

JSPS2C Home

We use Java Server Pages, more commonly known by the acronym JSP to present data to our users.

Apache Tomcat is an open source software implementation of the Java Servlet and JavaServer Pages technologies and as we will be using servlets and JSPs in sections of this site, we will also be using Tomcat. The version of Tomcat we will be using is dependant upon the version of Servlets/JSP we are using. The following table shows the correalation between the JSP, Servlets, Tomcat and Java versions used on this site:

JSP Servlets Tomcat Version Minimum Java Version
2.12.56.0.x5
2.23.07.0.x6

JSP 2.1

In this section we look at using JavaServer Pages (JSPs) and will be covering the 2.1 release. You need to have an understanding of Java and Servlets to get the most from these lessons, so if you're completely new to Java I suggest going to the Java5 section of the site and doing the lessons there first. If you're new to Servlets you would be better doing the lessons in the Sevlets 2.5 section of the site first.

The following link will take you to the download page for the final release specification for the JSP 2.1 release which you can download and read at your leisure, JSR-245 specification.

For us to use JSPs we need a Java SDK; details of downloading and installing this are given in the Introduction to Servlets 2.5 lesson and a Servlet/JSP compliant web container to host our JSPs on; details of downloading and installing this are given in the Getting Tomcat 6 lesson.

We start the section by discussing why JSPs are used and how they complement Java and Servlets and outline the interface and class hierarchy used with JSPs. We then make a much deeper inpsection of JSPs by looking at the JSP lifecycle and the mechanics of how a JSP is translated into a full-blown servlet. After this we look at the anatomy of JSP by investigating the various components that can be used within a JSP page and then look at the implicit objects we can use within our JSP pages. In the fifth and sixth lessons we investigative the directives and scripting elements available when constructing our JSP pages. We finish our discussion of JSPs with two lessons on the standard actions we can use when creating our JSP pages.

EL 2.1

In this section we look at using the Expression Language (EL) and will be covering the 2.1 release. The main purpose of using EL is to remove Java syntax from JSP pages, thus making page creation more natural for non-Java programmers. In our first lesson we look at the syntax of EL, how EL expressions are evaluated, general rules for El use and EL literals. In lesson two we look at the arithmetic, relational, logical, conditional and empty EL operators we can use within our JSP pages. Our third lesson teaches us we to use EL to access object properties and attribute values from any scope and we then look at EL implicit objects in lesson four. We finish the section by looking at the different ways we can configure our pages to allow scriptless JSP pages and also to disable EL evaluation within JSP pages.

JSTL 1.2

In this section we learn how to remove Java scripting completely from our JSP pages by using JavaBeans and EL in conjunction with the JavaServer Pages Standard Tag Libraries 1.2 (JSTL) and we will be covering the 1.2 release. We start by downloading JSTL 1.2 and then spend five lessons looking at the Core, XML, Ii8n, Database and Functions JSTL libraries. We then look at writing our own custom tags using the Simple Tag API. We then look at EL Functions which are very similar in concept and implementation to the custom tags before finishing the section by investigating tag files.

JSP 2.2

Not started yet.

PersistenceS2C Home

Persistence is the terminology used for storing or persisting our data onto a permanent storage medium. Persistence of data will be achieved using MySQL which we will connect to using either Hibernate4 or JDBC4.

FrameworksS2C Home

Frameworks allow us to do complicated tasks easier by taking away a lot of the boilerplate code and repetetive tasks from the programmer. There are many types of frameworks covering all aspects of computing available. One of the most widely used and encompassing of these is the Spring Framework which will cover in this section.

IDEsS2C Home

We have completed most of the lessons on the server-side of the site using Java commands within a command prompt window so we could see how Java worked 'under the hood'. This is a great way to really understand how for example we get our source files to compile and how to point to different Jar files we need via the classpath.

In the real world Integrated Development Environments, more commonly known by the acronym IDE can really help us develop complex architectures and take a lot of mundane tasks out of our hands and are in common usage for developing code and automating a lot the implementation details for us. This helps make us more productive and now we know what is going on 'under the hood' is not something that will seem to happen magically, we will know it is just automated for us by the IDE.

The Eclipse ID

One of the most popular IDEs that we can use to make development of our Java applications easier is the Eclipse IDE and the latest download is easy to get and totally free to use. In our first lesson on the Eclipse IDE we look at downloading and installing this IDE. After this we look at running and configuring the IDE. In our third lesson on the Eclipse IDE we look at integrating Tomcat into the Eclipse IDE.

ServersS2C Home

Apache Tomcat is an open source software implementation of the Java Servlet and JavaServer Pages technologies and as we will be using servlets and JSPs in sections of this site, we will also be using Tomcat. The version of Tomcat we will be using is dependant upon the version of Servlets/JSP we are using. The following table shows the correalation between the Tomcat, Servlets, JSP and Java versions used on this site:

Tomcat Version Servlets JSP Minimum Java Version
6.0.x2.52.15
7.0.x3.02.26

Tomcat 6

In this section of the site we will be downloading, verifying and installing Tomcat 6 to use in combination with our servlet 2.5 classes and JSP 2.1 pages. After installing Tomcat 6, we look at starting up, testing and shutting down the Tomcat 6 server gracefully. In our third lesson we will be looking at how to download Tomcat 6 for use with the Eclipse IDE.

Tomcat 7

In this section of the site we will be downloading, verifying and installing Tomcat 7 to use in combination with our servlet 3.0 classes and JSP 2.2 pages. After installing Tomcat 7, we look at starting up, testing and shutting down the Tomcat 7 server gracefully.

HTML 4.01S2C Home

This part of the website aims to take you on a journey of discovery by introducing structure to our web pages through (X)HTML. We will start with the basics, introduce some more detailed concepts in the intermediate tutorials before going into somee advanced techniques. Each part is cross referenced and complemented by the reference section for HTML 4.01.

What are HTML and XHTML?

Hypertext Transfer Protocol, more commonly known as HTTP and Extensible Hypertext Transfer Protocol known as XHTML are the language of the web. HTML and XHTML are what we use to give our web pages structure.

HTML4 Basics

These lessons get us started with the tools we need and give basic guidelines on creating and updating files and folders. We then explain HTML syntax and then introduce some structure to our web documents. As the lessons progress and we learn more HTML tags and become more confident we start building up a nice little webpage. To summarize, we bring everything we have learnt from the HTML4 basic tutorials together, which will lead us nicely into the HTML4 Intermediate Tutorials.

HTML4 Intermediate

We start the intermediate lessons with a discussion of the differences between HTML and XHTML. We then introduce some more structure to our web documents and some formatting tags. We take a final look at images and links, before introducing tables and forms. To summarize, we bring everything we have learnt from the HTML Intermediate section together, which will lead us nicely into the HTML4 Advanced Tutorials.

HTML4 Advanced

We begin with a lesson on how to import CSS and JavaScript files into our HTML documents and how to insert meta information. After this we take a look at interactive images and embedded objects. We take a final look at tables and forms and bring everything we have learnt from the HTML4 Advanced section together in the summary. Lastly we go through the list of tags in HTML4 to avoid, which will end our exploration of HTML4.

HTML4 Reference

A fully linked set of references covering the lastest HTML 4.01 W3 specification. The references include all the HTML4 elements which are cross referenced alphabetically, by function and by lesson so its easy to find what you need and how to use it.

HTML5 (not started yet)

This part of the HTML tutorials will cover all the latest from the evolving HTML5 specification but is not yet under construction.

What is CSS?S2C Home

Cascading Style Sheets, more commonly known as CSS are used to present our HTML and XHTML in exactly the way we want it to look. Whereas HTML and XHTML all all about the structure of our web pages, CSS is all about the presentation.

CSS Basics

Our journey into the world of CSS, begins with these CSS Basics lessons. The skill level is aimed at people with little or no CSS experience, although some basic knowledge of HTML is assumed. An introduction to HTML is given in the HTML Basics section of this website and is worth a visit if you are completely new to HTML as well as CSS. These lessons get us started with the tools we need and give basic guidelines on creating and updating files and folders. We then explain CSS syntax and introduce some textual and spacial CSS properties to our web documents. After this we discuss how all elements are contained in a type of box, commonly known as 'the box model'. We investigate 'the box model' and the basic CSS properties associated with it. To summarize, we bring everything we have learnt from the CSS basic tutorials together, which will lead us nicely into the CSS Intermediate Tutorials.

CSS Intermediate

In the CSS intermediate lessons we begin by looking at backgrounds and how they give our canvasses colour, take a final look at the CSS 'Box Model' before examining advanced tag selectors and pseudo selectors. We explain how inheritance works and then investigate specificity and the cascade. After this we explore how to position and display our elements and then bring everything together in the intermediate summary.

CSS Advanced

Our sojourn into the world of Cascading Style Sheets ends with these CSS Advanced lessons. The skill level is aimed at people with CSS experience, or who have completed the basic and intermediate tutorials. We begin by looking at generated content and then take a final look at the CSS selectors by examining attribute selectors. We then see how to use CSS for styling lists and tables and then investigate navigation bars and page layout. After this we look at the printed page and the few CSS Properties we haven't covered before. We finish our exploration of CSS with a summary where we go over everything we have learned in this section. By the end of the CSS Advanced Tutorials we will have covered all the CSS properties and selectors available for use in the 2.1 specification.

CSS Reference

A fully linked set of references covering the lastest CSS 2.1 W3 specifications. The references include all the CSS properties along with valid colours, selectors and much more. All the CCS properties are cross referenced alphabetically, by function and also by lesson so its easy to find what you need and how to use it.

CSS3 (not started yet)

This part of the CSS tutorials will cover the newest CSS3 specification but is not yet under construction.

What is JavaScript?S2C Home

JavaScript is an object oriented, event driven scripting language that works on multiple platforms and allows us to add dynamics to our web pages. Whereas HTML is all about the structure and CSS the presentation, JavaScript allows us to change the behaviour of elements. Unlike server-side languages, such as PHP, which have to communicate with a web server before actioning events, Javascript responds immediately in client side mode, leading to much faster response times for users. In the following tutorials we will start with the basics and gradually introduce more advanced topics as we move through the lessons. We will ensure that we keep the HTML (structure), CSS (presentation) and Javascript (behaviour) seperated from each other to conform to best practice.

JavaScript 1.5 Basics

In these basic lessons we start by writing a simple 'Hello World' program in JavaScript. Following on from our simplistic 'Hello World' program we look at JavaScript Syntax and the anatomy of the 1.5 version of the language. We then examine the various ways we can insert JavaScript into our HTML. After this we look at basic maths functions creating variables using the var statement. After this we take our first look at some of Javascripts predefined objects by looking at the Object and String objects and some of the methods associated with them. We finish the basics section by examining booleans and the Boolean object.

JavaScript 1.5 Intermediate

We start the intermediate section by looking at arrays and the Array object and some of the methods. We continue our look at some of JavasScripts predefined objects by examining the Date object and some of the data and time methods available for use with this object. After this we take a first look at conditional statements with the if....else construct, before looking at the loop statements JavaScript offers us. We look at some more maths functions, compact our code by using object literals and functions, before finishing the intermediate section with a look at regular expressions.

JavaScript 1.5 Advanced

In these advanced lessons we start by taking at look at some more conditional statements and then see how to utilize JavaScripts error handling. We then take a final look at maths by exploring the Number and Math global objects. After this we finish our three part lessons on object creation before looking at the domain object model and how to bring our pages to life with events. We then tackle the tricky subjects of function recursion and closures before finishing our study of Javascript by looking at the globals and functions not covered in previous lessons.

JavaScript 1.5 Reference

All the global objects, constructors, properties, variables and pre-defined functions, as well as statements and operators available in the JavaScript 1.5 version. This comprehensive reference section gives usage for each item and their methods if applicable.

JavaScript 1.8 (not started yet)

This part of the JavaScript tutorials will cover the very latest version of the JavaScript 1.8 releases.

The jQuery LibraryS2C Home

This part of the website is all about the jQuery library and how to use it. Though knowing JavaScript isn't a prerequisite of learning jQuery it will certainly make the journey easier. If you are completely new to the JavaScript and jQuery disciplines I recommend using the JavaScript section of the site first. You need to have an understanding of HTML and CSS to get the most benefit from these tutorials. Visit the HTML and CSS sections of the site to get to grips with these disciplines.

What is jQuery?

Written by John Resig, jQuery is a fast and compact JavaScript library that allows simplified usage of DOM traversal and modification, event handling and AJAX as well as giving us more selectors to work with and some nice effects and animations. With jQuery we can write concise powerful code which would take many lines of JavaScript code to achieve the same results. jQuery also positively encourages seperation of concerns so there is no adulteration of the markup when using this powerful library. In these tutorials we will be using the last jQuery major release to work with all versions of IE, that being version 1.9.

jQuery 1.10 Basics

In these basic lessons we start by looking at how to download jQuery and start using it in our pages. We will use the same simplistic 'Hello World' program we looked at on the JavaScript side of the site, to get a feel for how the jQuery library works. We then take a look at the jQuery Core and Internal methods and properties. We investigate elements selection using the selectors already available in HTML 4.01 and HTML5 as well as the custom selectors provided by jQuery itself. After this we look at the jQuery DOM element methods as well as those methods that allow us to traverse the DOM in a simple and concise way. Following this we see how to work with CSS classes and their attributes before finishing with a look at the CSS properties methods available.

jQuery 1.10 Intermediate

We start the intermediate lessons by examining the methods available for filtering our matched sets. We then take a look at DOM manipulation and how to do inner, outer and wrapped DOM insertion as well as modify and replace DOM elements. Creating visually stunning effects in jQuery is a breeze as we find out when we explore the jQuery methods and properties available to fade, slide and control effects. We finish the intermediate section by exploring the multitude of jQuery general, copy, data and type utilities we can use.

jQuery 1.10 Advanced

We start the advanced section by looking at Events, which are used to bring our pages to life. jQuery cuts through the browsers differences and makes event usage simple and elegant as we will see when we investigate loading, browser, keyboard, mouse and form events. We continue our investigation of events by looking at the Event Handler Attachments available. We then look at three powerful objects that jQuery provides for us, the Events object, the Callbacks object and the Deferred object. Following on from this we take an in-depth look at ajax starting with the jQuery low-level interface and ajax shorthand methods. We then examine ajax serialization before concluding our ajax studies and the lessons for this side of the site with a look at ajax global event handlers.

jQuery 1.10 Reference

A fully linked reference covering the jQuery 1.10 major release giving syntax and usage, arranged in sections for easy retrieval of relevant information.

jQuery 2.0 (not started yet)

This part of the jQuery tutorials will cover the very latest version of the JavaScript 1.8 releases.

go to top of page Top