Programming with HTML, CSS, and JavaScript (HCJ501)

Course Length: 5 days

Delivery Methods: Available as private class only

Course Overview

HTML, CSS, and JavaScript are the key technologies used to create engaging and interactive web applications. HTML provides the structure, CSS enhances the appearance, and JavaScript brings functionality to the web pages. Mastering these technologies is essential for any web developer looking to build professional, user-friendly websites and applications. This comprehensive programming course covers the fundamentals and advanced concepts of HTML, CSS, and JavaScript, making it perfect for developers who want to deepen their knowledge and skills.

This course offers an in-depth exploration of HTML, CSS, and JavaScript, including best practices for coding and design. Participants will learn how to create well-structured web pages, style them effectively, and add dynamic features. Through practical exercises and real-world examples, attendees will gain the expertise needed to build sophisticated web applications that meet modern standards and user expectations.

Course Benefits

Gain a comprehensive understanding of web development, from client-side to server-side programming.
Master HTML through hands-on exercises that cover everything from basic document structure to advanced attributes and elements.
Develop the ability to write well-structured HTML pages using semantic elements for enhanced web accessibility and SEO.
Learn how to create interactive and dynamic websites by embedding CSS and JavaScript directly into HTML documents.
Understand the fundamentals of CSS, including selectors, combinators, and styling, to create visually appealing web pages.
Enhance web pages with advanced CSS techniques like media types and animations to tailor content to different devices.
Acquire JavaScript skills to manipulate web page content dynamically using the HTML DOM and respond to user events.
Explore JavaScript's capabilities in handling data, functions, and events to create interactive and user-friendly web interfaces.
Master form handling in HTML and JavaScript, ensuring data integrity and user-friendly form validation.
Utilize regular expressions for advanced form validation, ensuring robust data processing and user input management.

Course Outline

A Quick Overview of Web Development
1. HTML is Part of a Team
2. Client-side Programming
3. Server-side Programming
Introduction to HTML
1. A Simple HTML Document (Exercise)
2. HTML Elements, Attributes, and Comments
3. The HTML Skeleton
4. Viewing the Page Source
5. Special Characters
6. History of HTML
7. The lang Attribute
Paragraphs, Headings, and Text
1. Paragraphs
2. Heading Levels
3. Breaks and Horizontal Rules
4. The div Tag
5. Creating an HTML Page (Exercise)
6. Quoted Text
7. Preformatted Text
8. Inline Semantic Elements
9. Adding Inline Elements (Exercise)
HTML Links
1. Text Links
2. Absolute vs. Relative Paths
3. Targeting New Tabs
4. Email Links
5. Adding Links (Exercise)
6. Lorem Ipsum
7. The title Attribute
8. Targeting a Specific Location on the Page
HTML Images
1. Inserting Images
2. Image Links
3. Adding Images to the Page (Exercise)
4. Providing Alternative Images
HTML Lists
1. Unordered Lists
2. Ordered Lists
3. Definition Lists
4. Creating Lists (Exercise)
Sectioning a Web Page
1. Semantic Block-Level Elements
2. Articles vs. Sections
3. Sectioning the Home Page
4. Sectioning Content and Styling
5. Sectioning the Pages (Exercise)
Crash Course in CSS
1. Benefits of Cascading Style Sheets
2. CSS Rules
3. Selectors
4. Combinators
5. Precedence of Selectors
6. How Browsers Style Pages
7. CSS Resets
8. CSS Normalizers
9. External Stylesheets, Embedded Stylesheets, and Inline Styles
10. Creating an External Stylesheet (Exercise)
11. Creating an Embedded Stylesheet (Exercise)
12. Adding Inline Styles (Exercise)
13. div and span
14. Styling div and span (Exercise)
15. Media Types
16. Units of Measurement
17. Inheritance
CSS Fonts
1. font-family
2. @font-face
3. font-size
4. font-style
5. font-variant
6. font-weight
7. line-height
8. font
9. Styling Fonts (Exercise)
Color and Opacity
1. About Color and Opacity
2. Color and Opacity Values
3. color
4. opacity
5. Adding Color and Opacity to Text (Exercise)
CSS Text
1. letter-spacing
2. text-align
3. text-decoration
4. text-indent
5. text-shadow
6. text-transform
7. white-space
8. word-break
9. word-spacing
10. Text Properties (Exercise)
JavaScript Basics
1. JavaScript vs. EcmaScript
2. The HTML DOM
3. JavaScript Syntax
4. Accessing Elements
5. Where Is JavaScript Code Written?
6. JavaScript Objects, Methods, and Properties
7. Alerts, Writing, and Changing Background Color (Exercise)
Variables, Arrays, and Operators
1. JavaScript Variables
2. A Loosely Typed Language
3. Google Chrome DevTools
4. Storing User-Entered Data
5. Using Variables (Exercise)
6. Constants
7. Arrays
8. Working with Arrays (Exercise)
9. Associative Arrays
10. Playing with Array Methods
11. JavaScript Operators
12. The Modulus Operator
13. Playing with Operators
14. The Default Operator
15. Working with Operators (Exercise)
JavaScript Functions
1. Global Objects and Functions
2. Working with Global Functions (Exercise)
3. User-defined Functions
4. Writing a JavaScript Function (Exercise)
5. Returning Values from Functions
Built-In JavaScript Objects
1. Strings
2. Math
3. Date
4. Helper Functions
5. Returning the Day of the Week as a String (Exercise)
Conditionals and Loops
1. Conditionals
2. Short-circuiting
3. Switch / Case
4. Ternary Operator
5. Truthy and Falsy
6. Conditional Processing (Exercise)
7. Loops
8. while and do…while Loops
9. for Loops
10. break and continue
11. Working with Loops (Exercise)
12. Array: forEach()
Event Handlers and Listeners
1. On-event Handlers
2. Using On-event Handlers (Exercise)
3. The addEventListener() Method
4. Anonymous Functions
5. Capturing Key Events
6. Adding Event Listeners (Exercise)
7. Benefits of Event Listeners
8. Timers
9. Typing Test (Exercise)
The HTML Document Object Model
1. CSS Selectors
2. The innerHTML Property
3. Nodes, NodeLists, and HTMLCollections
4. Accessing Element Nodes
5. Accessing Elements (Exercise)
6. Dot Notation and Square Bracket Notation
7. Accessing Elements Hierarchically
8. Working with Hierarchical Elements (Exercise)
9. Accessing Attributes
10. Creating New Nodes
11. Focusing on a Field
12. Shopping List Application
13. Logging (Exercise)
14. Adding EventListeners (Exercise)
15. Adding Items to the List (Exercise)
16. Dynamically Adding Remove Buttons to the List Items (Exercise)
17. Removing List Items (Exercise)
18. Preventing Duplicates and Zero-length Product Names (Exercise)
19. Manipulating Tables
HTML Forms
1. How HTML Forms Work
2. The form Element
3. Form Elements
4. Buttons
5. Creating a Registration Form (Exercise)
6. Checkboxes
7. Radio Buttons
8. Adding Checkboxes and Radio Buttons (Exercise)
9. Fieldsets
10. Select Menus
11. Textareas
12. Adding a Select Menu and a Textarea (Exercise)
13. HTML Forms and CSS
JavaScript Form Validation
1. Server-side Form Validation
2. HTML Form Validation
3. Accessing Form Data
4. Form Validation with JavaScript
5. Checking the Validity of the Email and URL Fields (Exercise)
6. Checking Validity on Input and Submit Events
7. Adding Error Messages
8. Validating Textareas
9. Validating Checkboxes
10. Validating Radio Buttons
11. Validating Select Menus
12. Validating the Ice Cream Order Form (Exercise)
13. Giving the User a Chance
Regular Expressions
1. Getting Started
2. Regular Expression Syntax
3. Backreferences
4. Form Validation with Regular Expressions
5. Cleaning Up Form Entries
6. Cleaning Up Form Entries (Exercise)
7. A Slightly More Complex Example

Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Live Private Class

Private Class for your Team
Live training
Online or On-location
Customizable
Expert Instructors

Request Proposal