Call Us: +32 2 466 00 16
Email: info@u2u.be
Follow Us:

Programming with JavaScript, jQuery, HTML and CSS

5days
Training code
UJSWEB

Upcoming sessions

27 Aug 2018
15 Oct 2018
03 Dec 2018
Book this course

The HTTP Protocol

You can't start developing for the web without knowing the fundamentals. This module talks about the HTTP protocol used to request resources from the server. We'll explore the details of what is used for a browser and for a server to make sure the communication is legitimate.

  • Http Verbs and their meanings
  • Request and Response Headers
  • Interpreting Status Codes
  • Redirection
  • Caching Resources

HTML Basics

The structure of a web page is created on HTML. We'll have a look at basic elements like input fields, divs,... to make sure the content is structured in the way we want.

  • Anatomy of a page
  • How a page is parsed
  • Some important HTML elements
  • Semantic Elements
  • Styling and Behavior

Forms

Working with forms is one of the most important aspects in HTML development. It makes it possible for the user to send data to the server

  • Form Elements
  • How Forms Work
  • Useful Attributes and Functions
  • Validation

CSS Essentials

A web page only looks nice when we start styling it. HTML is great to get all of our content on the page, but when we want to change the font, the colors, the location of everything we need some way to target these properties. CSS is the language we'll use to make sure the browser renders the page in the way we want to. We'll start with basic selectors and end with how Responsive Design works.

  • Styling websites using CSS
  • CSS Selectors
  • Responsive Web Design and Media Queries
  • Understanding Inheritance & Cascading behavior
  • The Box Model

CSS Positioning

One of the hardest parts of CSS is making sure that every element is located at the correct position. We'll explain how to do this and which properties have what kind of effect on the elements in the page.

  • Flow, display, float
  • Positioning elements
  • Flexible Box
  • Page layout strategies

Responsive web design with Bootstrap

Your web site needs to look fabulous on any device; whether it's a laptop, tablet or phone. Let bootstrap be your guide in the messy world of media queries.

  • Normalizing and Resetting
  • The Grid System
  • Utility classes
  • Customizing look and feel
  • Components: navigation, popovers ...

JavaScript Introduction

JavaScript is THE programming language for the web, and it's becoming more and more important in other areas as well. In this module we'll take a first look at the language and how to make our lives easier by using it efficiently.

  • Why is JavaScript important?
  • What is ECMAScript?
  • Performance
  • Picking the right Libraries
  • Developer Tools

JavaScript Language Fundamentals

In this module, we'll talk about the very basics of JavaScript. JavaScript can be a very tricky language, so we'll try to explain a couple of its quirks as well. This way, we can avoid surprises later.

  • Using Variables
  • Primitives and Objects
  • Functions: more powerful than you'd expect
  • Understanding Scope
  • Strict Mode
  • Error Handling

JavaScript Collections

Collections are a big part of OO programming, they allow you to map one-to-many or many-to-many relationships, as well as let you work with sets of data. In this module, we'll take a look at the different types of collections in JavaScript, and their uses.

  • Storing multiple values in Arrays
  • Useful Functions
  • Using Objects as Maps
  • Sets, Maps and Others

JavaScript Constructors and Classes

A lot of developers are familiar with the concept classes in OO programming. We can use the class pattern to mimic this functionality in JavaScript. We also take a look at the native class syntax introduced in ECMAScript 2015

  • Creating your own Objects using Constructors
  • Prototypes
  • Class pattern and ECMAScript 2015 Class syntax
  • Using Properties to encapsulate your fields
  • The 'this' keyword explained

JavaScript Dealing with Async Code

Asynchronous code is really handy in JavaScript, since it allows us to keep the UI responsive while running a lot of code. In this module we'll see how to make our code run asynchronously.

  • Threading in JavaScript
  • Using Callbacks
  • Event Handling
  • Working with Promises
  • Async and Await

Structuring JavaScript Applications and Tooling

Hey new JavaScript developer! You are using WebPack right? WebPack? Yes, and Gulp and npm, you need those. Oow and definitly use Babel. It's soo good... If your face looks like a big question mark right now, that's quite normal. Setting up a JavaScript project can be quite the challenge. It's easy to get lost in the overwhelming amount of tools and best practices. In this module we'll create some clarity about these tools and teach you how to set up a modern JavaScript project.

  • Using Libraries
  • Content Delivery Networks
  • Getting Libraries with npm
  • Modules versus the Global Object
  • Using Task Runners like Gulp
  • Bundling and Minification Tools like WebPack
  • PolyFills and Traspilers like Babel and TypeScript
  • Tools for Code Quality

Browser Interaction with jQuery

JavaScript can be used in all sorts of projects, but when used in a browser it's best accompanied by a DOM library. jQuery is a great first library to learn how to interact with the DOM and makes many common tasks trivial. popular parts include selectors, event handling, making ajax call, animations, ...

  • The jQuery Ecosystem
  • Querying with CSS selectors
  • Generating HTML
  • Setting Attributes and Properties
  • Styling from Code
  • Dealing with Forms
  • Event handling with jQuery
  • Comparing jQuery with other UI libraries

REST Services

This module is about communicating with the backend. REST allows client-server communication using HTTP.

  • REST
  • Verbs and URLs
  • XML and JSON format
  • Example with node.js and Express

Client-side Service Consumption

By using AJAX we can call server-side actions from our client-side code and process the results in a quick, user-friendly manner.

  • Getting data using AJAX
  • Fetch API
  • External Libraries

Web Storage

Storage for browsers has been a nightmare for long. We could use cookies to store things, but that would be sent back and forth all the time. Enter Web Storage, a couple of features that allow us to store a bit extra in each browser. We'll look at Local and Session storage and compare it to IndexedDB.

  • Storing key-value pairs
  • Tracking Changes
  • Local vs. Session Storage
  • Browser Database Storage

This course is about front-end (client-side) web development. It’s what the user sees, touches and experiences in the browser. You’ll learn how to build modern, interactive websites by learning the fundamentals of HTML, CSS, and JavaScript — three common coding languages on which all modern websites are built. This course is about the browser not the server.

Developers who want to build rich web applications based on open industry standards. This course is independent of the server-side technology you are using, so feel free to attend whether you use PHP, ASP.NET, Python, Ruby on Rails... A basic understanding of programming - in whatever language - is advised.

© 2018 U2U All rights reserved.