home > training > WEB101: Web Development Fundamentals using HTML, CSS and JavaScript

WEB101: Web Development Fundamentals using HTML, CSS and JavaScript

$2,495

  • 5 Days
  • Replay™ Class Recordings Included
  • Microsoft SATV Voucher Eligible

SATV EligibleUse your Microsoft Software Assurance (SA) Training Vouchers to attend this course.

Interested in scheduling a date for this course?
Request A Date
x
Course:
  • This field is for validation purposes and should be left unchanged.

Course Description

This 5-day instructor-led course provides students with little or no web development experience to obtain a solid grasp of the core fundamental parts of any web site which include HTML, CSS and JavaScript. You will learn what they are, how to write them, and how they work together.

You will learn to create web pages from scratch in this hands-on interactive training class. Students begin by using a simple text editing program (Notepad) and then work with modern tools including IDE (Integrated Development Environment) and Google Chrome Developer Tools.

Additionally, you will gain understanding or how to optimize the use of CSS and HTML and use your own custom-made templates to ensure clean simple approaches to web development.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

Outline

Module-01-Introduction

This module is an introduction to the technologies students will work with throughout the course. HTTP request and responses are covered, and the browser is explained as a program that accepts data from a user. Students will have a thorough understanding of how web pages are requested, constructed, delivered and displayed.

This module includes an introduction to Google Chrome Developer Tools.

  • Introducing HTML
  • Introducing CSS
  • Introducing JavaScript
  • HTTP – Browsers – Devices – Web Servers
  • Introducing Google Chrome Developer Tools

Lab: Easiest Web Page in the World made with a simple text editor.

 

Module-02-HTML

This module covers HTML tags and attributes. It includes an understanding of the Box Model and Normal Flow.

Students will be exposed to and work with almost every current tag as defined in the HTML5 Specification.  Students will learn about attributes, id’s, classes, and the idea of overloaded classes that can later be used in CSS.

Students will learn about how to markup existing content in order to convert it to an HTML document.

Students will learn about DOCTYPE tags, including the latest one and those they may run into when working on legacy projects.

Lessons

  • You are here
  • Syntax
  • Box Model
  • Normal Flow
  • Doctype(s)
  • Tags
  • Attributes
  • ID’s
  • Classes
  • Name
  • Tables
  • Images
  • Audio
  • Video
  • W3C
  • Structure
  • Templating
  • More on Google Chrome Developer Tools

Lab: Create an HTML Template Page and Validate It.

Lab: Create a simple 5-page Website Using the Template and validate the pages.

Lab: Every Single Tag (…almost).

Lab: Convert a Word Document to an HTML Page and Validate it.

 

Module-03-CSS Foundations

This module is all about the foundations of good CSS. Syntax, Selectors, Rules and approaches are addressed. At the end of this module Students will have a solid understanding of the core of CSS and how it is applied to HTML pages

Lessons

  • You are here
  • Syntax
  • Graceful Degradation
  • Syntax
  • Applying the CSS
  • The Cascade
  • Selectors 100
  • Classes and ID’s
  • Pseudo Classes
  • Fonts
  • Colors
  • Borders
  • Backgrounds
  • Structure
  • Layout
  • Navigation 101
  • Goggle Chrome Developer Tools CSS

 

Lab: Create CSS for the website created in the HTML Module with a fixed width layout and validate it.

Lab: Create CSS for the website created in the HTML Module with a Liquid layout and validate it.

 

Module-04-CSS Beyond the Basics

This module covers some more advanced CSS techniques. Web pages are displayed on a variety of devices and this module and the previous module give students the proper foundation to understand Responsive Web Design techniques they will cover in an upcoming module.

Lessons

 

  • Advanced Selectors
  • CSS3 Animations
  • Vendor Prefixes
  • Cover
  • Vertical and Horizontal Layout Techniques
  • Multiple Column Layouts
  • Grids

 

Lab: CSS3 Animations

Lab: Cover Layout

Lab: Zebra Striping

Lab: Liquid Design

 

 

Module-05-HTML Forms

This is an important part of any web developers skillset. Students will learn how to create HTML Forms from the ground up. This allows users to add input to web pages so that data can be processed.
HTML Forms Introduction

  • Controls
  • Attributes
  • Methods
  • Actions
  • Buttons
  • Grouping
  • Validation
  • ARIA Attributes
  • Layout

Lab: Simple Form

Lab: Complex Form

Lab: Functioning Form Using Google API

 

 

Module-06-JavaScript Fundamentals

This is JavaScript for the very beginners. We start at the beginning build the foundation that students will need as they move into the web development world.

Students are introduced to JavaScript, it’s syntax and its components.  Students are introduced to the JavaScript Console.

Lessons

  • You are here.
  • Syntax
  • The Console
  • Getting the Script to the HTML
  • Statements
  • Variables
  • Operators
  • Comparisons
  • Conditionals
  • Looping
  • Functions
  • Objects
    • Built In
    • Custom
  • Arrays
  • Data Types
  • Events
  • The Console
  • Introduction to Debugging JavaScript in Google Chrome
  • Introduction to JavaScript Regular Expressions
  • Introduction to the Mozilla Developer Network
  • Hoisting
  • Scope
  • Strict

Lab: Alerts

Lab: Wiring Up Events

Lab: Console Loops

 

Module-07-JavaScript and Content

One of the most frequent uses of JavaScript in relation to web pages is interacting with the Document Object Model. Frameworks like JQuery make this task a breeze (no pun intended as Breeze is also a great framework).

Students are introduced to the Document Object Model and learn native JavaScript techniques to interact with it.

  • The Document Object Model
  • Adding Content
  • Removing Content
  • Updating Content
  • Validation

Lab: Counting the Elements

Lab: Finding the Control

Lab: Products Page

Lab: Clicking a Button to Add a List

 

Module-08-XMLHttpRequest (AJAX)

Students will learn the fundamentals of what AJAX is, how to create a request and how to deal with the response.

They will work with several response data types to manipulate their pages and update them using the XMLHttpRequest object.

  • XML Http Request Object
  • readyState
  • status
  • statusText
  • Open
  • Send
  • Response Types
    • Text
    • XML
    • JSON
    • HTML
  • Headers
  • Setting Up the Request
  • Processing the Response
    • Callback Functions
  • Error Handling
  • Updating the DOM

 

Lab: AJAX Update DOM with a Local File

Lab: AJAX Update DOM with a JSON File

Lab: AJAX Update DOM with a REST Query via an API

 

Module-09-Implementing-Responsive-Designs

Students learn what Responsive Design is and how to make their web pages adapt to the devices that are looking at them.

  • Media-Queries
  • Conditional Comments
  • View Port, View Window
  • Images
  • Visibility
  • Strategies
  • Grids

Lab: Conditional Comments Presentation for Legacy Browser Support

Lab: Media Query Presentation for IPAD

Lab: Presentation for IPHONE

 

 

Module-10-Introduction-to-Frameworks-and-Tools

When students leave class, they will be putting their skills to work. In many cases they will work with projects that leverage one or more frameworks.

In this module many of the most popular client side and server-side technologies are covered at a high level.

Students will understand the role of Frameworks and how the work with the skills they learned in this class.

  • JQuery
  • Bootstrap
  • Less
  • Sass
  • Node
  • Angular
  • Java
  • Net
  • PHP
  • IDE’s
  • FTP
  • Lint
  • Web Servers

There are no labs for this module.

 

Module 11 - Putting It All Together

This is a lab-based module with business requirements. This type of lab is referred to as a capstone lab.

Your instructor will guide you through the process of taking business requirements and applying what you have learned in this class to complete them.

Students will use a modern IDE for the lab. They will push their files to a Live Web Server that they, the instructor and other students can browse to in class.

They will use the skills they learned in this class so that they will feel confident that they have mastery of all the things they learned throughout the week.

Audience

This course is designed for those who need a comprehensive understanding of the fundamentals of HTML, Cascading Style Sheets (CSS) and web development tools. This course is a great opportunity for developers who need a remedial education HTML code basics and JavaScript fundamentals.

Prerequisites

Basic computer skills are required for succeeding in this 5-day course.

What You Will Learn

Although the course starts at an introductory level, students can expect to leave with an intermediate to advanced knowledge of web development technologies and fundamentals. Students will gain an understanding of HTML, CSS, Web Forms, JavaScript elements XML and additional web frameworks and tools in this 5-day hands-on course.