Web Programming with JavaScript, HTML & CSS - Introduction
Course Description
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 hands-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.
Duration: 5 days
Prerequisites
This is a beginners course in web application development. No specific web experience is required but an understanding of general programming concepts is expected.
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
AJAX
JSON
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 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
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. Using jQuery and Bootstrap developers can create stylish and interactive designs by reusing and customising pre-built layouts and components. 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