Web Development Fundamentals using HTML, CSS and JavaScript

Master the fundamentals of web development with our 5-day HTML, CSS, and JavaScript course, designed for aspiring developers seeking to build a strong foundation in web technologies.

Course Thumbnail

Essential Skills Gained

Checkmark

Understand the core components of web development using HTML, CSS, and JavaScript.

Checkmark

Implement web pages and forms from scratch, enhancing interactivity with JavaScript.

Checkmark

Design responsive layouts and optimize websites for various devices and browsers.

Checkmark

Leverage popular frameworks and tools to streamline and enhance web development projects.

Format

  • Instructor-led
  • 5 days with lectures and hands-on labs.

Audience

  • Aspiring Web Developers
  • IT Professionals
  • Front-End Developers
  • Software Engineers

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.

Calendar icon

Upcoming Course Dates

No upcoming dates. Please check back later.

Course Outline

Download PDF

Module-01-Introduction

  1. Introducing HTML

  2. Introducing CSS

  3. Introducing JavaScript

  4. HTTP – Browsers – Devices – Web Servers

  5. Introducing Google Chrome Developer Tools

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

Module-02-HTML

  1. Syntax

  2. Box Model

  3. Normal Flow

  4. Doctype(s)

  5. Tags

  6. Attributes

  7. ID’s

  8. Classes

  9. Name

  10. Tables

  11. Images

  12. Audio

  13. Video

  14. W3C

  15. Structure

  16. Templating

  17. More on Google Chrome Developer Tools

  18. Lab: Create an HTML Template Page and Validate It.

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

  20. Lab: Every Single Tag (…almost).

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

Module-03-CSS Foundations

  1. Syntax

  2. Graceful Degradation

  3. Applying the CSS

  4. The Cascade

  5. Selectors 100

  6. Classes and ID’s

  7. Pseudo Classes

  8. Fonts

  9. Colors

  10. Borders

  11. Backgrounds

  12. Structure

  13. Layout

  14. Navigation 101

  15. Goggle Chrome Developer Tools CSS

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

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

Module-04-CSS Beyond the Basics

  1. Advanced Selectors

  2. CSS3 Animations

  3. Vendor Prefixes

  4. Cover

  5. Vertical and Horizontal Layout Techniques

  6. Multiple Column Layouts

  7. Grids

  8. Lab: CSS3 Animations

  9. Lab: Cover Layout

  10. Lab: Zebra Striping

  11. Lab: Liquid Design

Module-05-HTML Forms

  1. HTML Forms Introduction

  2. Controls

  3. Attributes

  4. Methods

  5. Actions

  6. Buttons

  7. Grouping

  8. Validation

  9. ARIA Attributes

  10. Layout

  11. Lab: Simple Form

  12. Lab: Complex Form

  13. Lab: Functioning Form Using Google API

Module-06-JavaScript Fundamentals

  1. Syntax

  2. The Console

  3. Getting the Script to the HTML

  4. Statements

  5. Variables

  6. Operators

  7. Comparisons

  8. Conditionals

  9. Looping

  10. Functions

  11. Objects

  12. Built In

  13. Custom

  14. Arrays

  15. Data Types

  16. Events

  17. The Console

  18. Introduction to Debugging JavaScript in Google Chrome

  19. Introduction to JavaScript Regular Expressions

  20. Introduction to the Mozilla Developer Network

  21. Hoisting

  22. Scope

  23. Strict

  24. Lab: Alerts

  25. Lab: Wiring Up Events

  26. Lab: Console Loops

Module-07-JavaScript and Content

  1. The Document Object Model

  2. Adding Content

  3. Removing Content

  4. Updating Content

  5. Validation

  6. Lab: Counting the Elements

  7. Lab: Finding the Control

  8. Lab: Products Page

  9. Lab: Clicking a Button to Add a List

Module-08-XMLHttpRequest (AJAX)

  1. XML Http Request Object

  2. readyState

  3. status

  4. statusText

  5. Open

  6. Send

  7. Response Types

  8. Text

  9. XML

  10. JSON

  11. HTML

  12. Headers

  13. Setting Up the Request

  14. Processing the Response

  15. Callback Functions

  16. Error Handling

  17. Updating the DOM

  18. Lab: AJAX Update DOM with a Local File

  19. Lab: AJAX Update DOM with a JSON File

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

Module-09-Implementing-Responsive-Designs

  1. Media-Queries

  2. Conditional Comments

  3. View Port, View Window

  4. Images

  5. Visibility

  6. Strategies

  7. Grids

  8. Lab: Conditional Comments Presentation for Legacy Browser Support

  9. Lab: Media Query Presentation for IPAD

  10. Lab: Presentation for IPHONE

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

  1. JQuery

  2. Bootstrap

  3. Less

  4. Sass

  5. Node

  6. Angular

  7. Java

  8. Net

  9. PHP

  10. IDE’s

  11. FTP

  12. Lint

  13. Web Servers

Module 11 - Putting It All Together

  1. Capstone Lab

Your Team has Unique Training Needs.

Your team deserves training as unique as they are.

Let us tailor the course to your needs at no extra cost.