Rapid Introduction to HTML, CSS, and JavaScript Courseware (HCJ101)

In this course, students get a rapid hands-on introduction to client-side programming with HTML, CSS, and JavaScript. The course is meant for students who want to need to get a jump start on all three technologies. Topics covered in the course include an overview of web development, HTML elements and attributes, CSS styling and layout, and JavaScript programming concepts such as variables, arrays, functions, and event handlers.

Students should be prepared to cover a lot of material in a short time and to be ready to spend some time afterward reviewing the content on their own to solidify and build upon the skills taught in class.

Publisher: Webucator

Benefits

Time-efficient learning: This rapid introduction course allows students to quickly acquire essential web development skills, making it perfect for those with limited time or who want to jump-start their learning.
Comprehensive coverage: The course covers all three core technologies (HTML, CSS, and JavaScript) required for client-side web development, providing a well-rounded understanding of the field.
Practical skills: Students will gain hands-on experience through various exercises, helping them apply their knowledge to real-world scenarios and develop practical web development skills.
Dynamic websites: By learning JavaScript, students will be able to create interactive and dynamic websites, improving user experience and engagement.

PowerPoint Presentation

This course includes a PowerPoint presentation that maps to the manual and to the labs:

Outline

A Quick Overview of Web Development
1. Client-side Programming
  1. HTML
  2. Cascading Style Sheets
  3. JavaScript 1
  4. Ajax
  5. JavaScript Frameworks
2. Server-side Programming
  1. Java EE
  2. ASP.NET
  3. Python
  4. PHP
  5. ColdFusion
  6. Node.js
Introduction to HTML
1. Getting Started
2. A Simple HTML Document
3. The HTML Skeleton
  1. The <head> Element
  2. The <body> Element
  3. Whitespace
4. HTML Elements
  1. Attributes
  2. Empty vs. Container Tags
  3. Blocks and Inline Elements
  4. Comments
5. Special Characters
6. History of HTML
7. lang Attribute
Paragraphs, Headings, and Text
1. Paragraphs
2. Breaks and Horizontal Rules
3. Creating an HTML Page
4. Quoted Text
5. Preformatted Text
6. Text-Level Semantic Elements
HTML Links
1. Text Links
2. Absolute vs. Relative Paths
  1. Absolute Paths
  2. Relative Paths
  3. Default Pages
3. Targeting New Windows
4. Email Links
5. Adding Links
6. Targeting a Specific Location on the Page
7. The title Attribute
HTML Images
1. Inserting Images
  1. Making Images Accessible
  2. Alternative Text
  3. Long Descriptions
  4. Height and Width Attributes
2. Image Links
3. Adding Images to the Page
HTML Lists
1. Unordered Lists
  1. Nesting Unordered Lists
2. Ordered Lists
  1. Nesting Ordered Lists
  2. The type Attribute
  3. The start Attribute
3. Definition Lists
4. Creating Lists
Crash Course in CSS
1. Benefits of Cascading Style Sheets
2. CSS Rules
  1. CSS Comments
3. Selectors
  1. Type Selectors
  2. Class Selectors
  3. ID Selectors
  4. Attribute Selectors
  5. The Universal Selector
  6. Grouping
4. Combinators
  1. Descendant Combinators
  2. Child Combinators
  3. General Sibling Combinators
  4. Adjacent Sibling Combinators
5. Precedence of Selectors
6. How Browsers Style Pages
7. CSS Resets
8. CSS Normalizers
9. External Stylesheets, Embedded Stylesheets, and Inline Styles
  1. External Stylesheets
  2. Embedded Stylesheets
  3. Inline Styles
10. Exercise: Creating an External Stylesheet
11. Exercise: Creating an Embedded Stylesheet
12. Exercise: Adding Inline Styles
13. <div> and <spa>
14. Exercise: Divs and Spans
15. Media Types
16. Units of Measurement
  1. Absolute vs. Relative Units
  2. Pixels
  3. Ems and Rems
  4. Percentages
  5. Other Units
17. Inheritance
  1. The inherit Value
CSS Fonts
1. font-family
  1. Specifying by Font Name
  2. Specifying Font by Category
2. @font-face
  1. Getting Fonts
3. font-size
  1. Relative font-size Terms
  2. Best Practices
4. font-style
5. font-variant
6. font-weight
7. line-height
8. font
9. Exercise: Styling Fonts
Color and Opacity
1. About Color and Opacity
2. Color and Opacity Values
  1. Color Keywords
  2. RGB Hexadecimal Notation
  3. RGB Functional Notation
  4. HSL Functional Notation
3. color
4. opacity
5. Exercise: Adding Color and Opacity to Text
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. Exercise: Text Properties
JavaScript Basics
1. The Name "JavaScript"
2. What is ECMAScript?
3. The HTML DOM
4. JavaScript Syntax
5. Accessing Elements
  1. Dot Notation
  2. Square Bracket Notation
6. Where Is JavaScript Code Written?
7. JavaScript Objects, Methods and Properties
Variables, Arrays, and Operators
1. JavaScript Variables
  1. A Loosely-Typed Language
  2. Google Chrome DevTools
  3. Variable Naming
  4. Storing User-Entered Data
2. Constants
3. Arrays
  1. Associative Arrays
  2. Array Properties and Methods
4. Playing with Array Methods
5. JavaScript Operators
6. The Modulus Operator
7. The Default Operator
JavaScript Functions
1. Global Objects and Functions
  1. parseFloat(object)
  2. parseInt(object)
  3. isNaN(object)
2. User-defined Functions
  1. Function Syntax
  2. Passing Values to Functions
3. Returning Values from Functions
Built-In JavaScript Objects
1. String
2. Math
3. Date
4. Helper Functions
Conditionals and Loops
1. Conditionals
2. if - else if - else Conditions
3. Short-circuiting
4. Switch / Case
5. Ternary Operator
6. Truthy and Falsy
7. Loops
  1. while Loop Syntax
  2. do while Loop Syntax
  3. for Loop Syntax
  4. for of Loop Syntax
  5. for in Loop Syntax
8. break and continue
9. Array: forEach()
Event Handlers and Listeners
1. On-Event Handlers
  1. The getElementById() Method
2. The addEventListener() Method
3. Capturing Key Events
4. Benefits of Event Listeners
5. Timers

Required Prerequisites

Working with computers regularly

Useful Prerequisites

Programming Experience
A basic understanding of how the web works

License

Length: 3 days | $105.00 per copy

License Request More Information Download Sample Copy Request Trainer Evaluation Copy

What is Included?

Student Manual
Student Class Files
PowerPoint Presentation