This is a beginners course in web application development. No specific web experience is required but an understanding of general programming concepts is expected.
This module will introduce web application development and will introduce the tools that will be used during the course. Each of the three technologies (HTML5, CSS3 and Javascript) will be introduced and some simple websites / web applications will be created.
By the end of the day each participant will be confident in their ability to create a web application, deploy it to a web server and test and debug it.
More detail on the technologies we are using. This day is split into 3 distinct modules where we do a deeper dive into each of the 3 technologies. By the end of this day the participants will be confident in their knowledge of HTML, CSS and Javascript.
HTML5 Deep Dive
History of HTML
HTML5 tags
Semantic markup
Coding conventions
Divs
When to use tables
Images
CSS Deep Dive
Using CSS for styling
CSS Selectors
CSS properties
CSS resets
CSS layouts
Cross browser concerns
Which CSS features can I use
Media queries
Fonts, text styling
Javascript Deep Dive
Javascript syntax
Variables, types, numbers, strings, dates
Functions, function parameters, return values
Programming constructs - loops, conditionals
Object oriented Javascript
Anonymous functions
Callback functions
Debugging techniques
A lot more detail on how to really use Javascript in a web application. The use of Javascript frameworks. Communicating with the server using AJAX. Using jQuery to make AJAX calls. Making advanced ui interactions like an in-placed edit. Creating a simple grid which allows in-place editing and has a dialog.
Javascript Frameworks
Introducing JQuery
AJAX
JSON
In place editing
JQuery UI
Creating a web application that has a grid and a dialog
CSS is really important for web application development so this module is a fairly advanced look at CSS and how it is used in the web applications of today. We will look at using CSS for layouts and explore traditional and modern layout methods. We will talk about mobile first as a design paradigm and do real world examples with responsive and reactive designs.
Some advanced CSS concepts
Using CSS for layout
Traditional CSS layout using floating divs
CSS layout using flexbox
Responsive Design
Reactive Design
How Javascript libraries, frameworks and controls are used in real-world applications. There are many Javascript libraries and this module is designed to give participants a good view of what is available. The majority of these are free and open source.
jQuery
jQuery plugins
jsGrid
Chart.js
The frameworks / libraries used can be tailored to suit individual technology stacks.
Best practices / coding standards
What are key issues that you need to be aware of when developing web applications. How usable will your application be to general users? How will it behave for users with assistive technologies? What can you do to facilitate the translation of your application into other languages?
Accessibility
Usability
Localisability
HTML coding standard suggestions
CSS coding standard suggestions
Javascript coding standard suggestions
