Java Training Professional Training Solutions Ltd

Courses

Web Programming with JavaScript, HTML & CSS - Introduction

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
Format
Instructor-led, in person or live online

What the course covers

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

Course dates

There are no public dates for this course yet. We also run it on request for teams. Contact us to arrange a date.