Front-end Web Technologies

Request more details:

submit request
This course give participants a good grounding in all aspects of front-end web development. It will be largely independent of server side technologies and will simply use RESTful web service calls using AJAX to manipulate server side data. This is a 5 day hand-on course and will get participants to a high intermediate and perhaps advanced level in their understanding of how to create web applications using HTML5, CSS3 and Javascript. It will also get them comfortable with making server calls using AJAX and the utilisation of Javascript libraries, frameworks and controls.
Day 1- Web application development primer:
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.
Day 2 - Technology Deep Dive:
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
Day 3 - Javascript in action:
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
• In place editing
• JQuery UI
• Creating a web application that has a grid and a dialog
Day 4 - CSS in action:
CSS is really important for web application development so this module is a fairly advanced look at CSS and how it is used in today’s web applications. 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
Day 5 - Real world Javascript and best practices:
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