HTML, CSS and JavaScript

This course is currently not scheduled on the open calendar, but can be organized on request.

Request Course

Duration

3 day(s)

Audience

Web developers who want to learn how to create modern websites

Prerequisites

Some general IT knowledge is helpful

Objectives

After completing this course, participants will know enough about HTML, CSS and JavaScript to be productive on an existing project, or create a simple modern website

Methods

Classroom training with hands on exercises

Description

The future is web. If there is one trend in the IT inductry that can be clearly distinguished it must be the movement towards HTML, CSS and especially JavaScript. Where dynamism in websites used to be provided by browser plugins like Flash, those days are now over. Modern websites go all-in on JavaScript. This is possible because of modern evolutions in HTML. However, with all that jazz about all the new advanced HTML5, CSS3 and JavaScript features, it is easy to forget; you still need a sound understanding of the basic principles.

These principles do not start with HTML5. They start with a general understanding of the mechanics behind any HTML version. Also, most HTML5 sources start with the prerequisite of already knowing some web mechanics. That's why RealDolmen offers this course: to make sure you don't fast forward and don't miss crucial insight. Througout the course we will cover all the three corner stones web applications: HTML, CSS and JavaScript.

In the first part, we will take the time to start from scratch in learning the foundation: the semantic model or HTML page. This will include creating a basic page structure, images, anchors, tables, forms, containers and formatting elements. This part of the course has been carefully designed not to require any previous technical knowledge, and is thus suited for both to-be web developers as content editors for CMS products like Drupal.

In the second part, we will deal with the looks of our website. Using the content from the HTML semantic model, we will style our site so that it looks appealing, and invites people to stay on your site. We will focus primarily on the technical aspects of this styling with CSS, but any creative thinking about the design of your site will surely come in handy. We will teach you how to turn the ideas in your head into a real website. Topics involved are formatting styles, positioning and layout.

The third and final part will deal with JavaScript. In this chapter we introduce how you can program your website to perform all sorts of dynamic things. Granted: programming is not easy, but anyone serious enough about creating websites needs to know how to do it. Especially in the new generation of websites. Many HTML5 features also revolve around JavaScript, so you'll need it to get to the advanced features. Some topics involved are how to create functions, variables, statements and objects. How to use the built-in features of JavaScript and how to respond to browser events. We even take a look at Ajax, JSON and the prototype model of JavaScript.

HTML, CSS and JavaScript
- HTML, CSS and JavaScript
  - Goal
  - Agenda
- Introduction
  - The Internet
  - Publishing a Website
- Basic Page Structure
  - HTML Pages
  - Web Browsers
  - Tags and Elements
  - Attributes
  - Block-Level and Inline Elements
  - Nested Elements
  - Document Structure
  - Doctype
  - Head Elements
  - Link, Style and Script Elements
  - Meta Element
  - Body Element
  - Testing, Debugging and Validating
  - Comments
- Semantic Elements
  - Semantic Elements
  - Section Headers
  - Paragraphs and Line Breaks
  - Formatting as Semantic or Presentation Elements
  - Basic Formatting
  - HTML 5 Semantic Elements
  - Lists
  - Images
  - Horizontal Rules
  - Anchors
  - Tables
  - Irregular Tables
  - Logical Table Groups
  - Forms
  - Form Elements
  - HTML 5 Form Elements
  - Control buttons
  - Embedding Foreign Objects
- Cascading Style Sheets
  - What are Styles and Style Sheets?
  - Creating Style Sheets
  - Style Cascading
  - Selectors
  - Measurement Units
  - Formatting Properties
  - Layout
  - Box Model
  - Display
  - Positioning
  - Floating
  - Clearing
- Introduction to JavaScript
  - What is JavaScript?
  - What can you do with JavaScript?
  - JavaScript Sandbox
- JavaScript : Good Practices
  - Adding JavaScript to your site
  - Troubleshooting and Debugging
  - Comments
  - JavaScript Data Types
- Variables
  - Variables
  - Null, Undefined and Constants
  - Statements
  - Assignments
  - Operators
- Statements
  - Conditional Statements
  - Looping
- Functions
  - Functions
  - Timers
  - Objects
  - Using Objects
  - Built-in JavaScript Objects
  - Object Literals
  - JavaScript Object Notation (JSON)
  - Arrays
  - Browser Objects
  - Manipulating Page Contents
  - Events
  - Xml Http Request (XHR)
  - Classes and Constructors
  - Prototypes
- Summary
  - Conclusion

Details