ITS 301 HTML and CSS Training - OEM Certkit

This course is intended for students who want to learn to recognize and write syntactically correct HTML and CSS, structure data using HTML elements, and create and apply styles using CSS.

The Information Technology Specialist program is aimed at candidates who are considering or just
beginning a path to a career in information technology. The ITS program is taking over from the
Microsoft MTA program.

Prerequisites:
There are no prerequisites for this course.

Course outcome:

• Understand HTML Fundamentals
• Understand CSS Fundamentals
• Structure Documents Using HTML
• Present Multimedia Using HTML
• Style Web Pages Using CSS

Who should attend:
This course is intended for new and experienced programmers that want to learn how to write and troubleshoot HTML and CSS code. Previous programming experience is not required but recommended.

CertKit content:
E-learning courses:

Introduction to HTML5

Establishing a Development Environment
Course: 15 Minutes

• Course Introduction
• Choosing an Editor for HTML
• Setting up a Development Environment for HTML
• Verifying Document Validity with HTML

HTML5 Syntax
Course: 11 Minutes

• Using Markup to Create an HTML5 Document
• Using Tags in an HTML5 Document

Introduction to HTML5 Structure
Course: 22 Minutes

• Adding a !DOCTYPE Declaration to an HTML5 Document
• Creating the Structure for an HTML5 Document
• Adding a Head Section in an HTML5 Document
• Adding a Body Section in an HTML5 Document

HTML5 Meta Tags and Comments
Course: 18 Minutes

• Creating a Basic HTML5 Document Structure
• Using Meta Tags in HTML
• Using the New Meta Tags Introduced in HTML
• Using Comments in HTML

Basic HTML5 Tags
Course: 15 Minutes

• Using the Paragraph Tag in HTML
• Using the P and BR Tags in an HTML5 Document
• Using the Heading Tags in HTML

HTML5 Coding Best Practices
Course: 14 Minutes

• Using Coding Best Practices for HTML
• Using Code Spacing and Formatting in HTML

HTML5 Hyperlinks
Course: 24 Minutes

• Creating Hyperlinks in HTML
• Using Hyperlinks in an HTML5 Document
• Creating In-Site Hyperlinks in HTML
• Creating an E-mail Link in HTML
• Using Absolute vs. Relative Links in HTML

Fonts and Special Characters
Course: 11 Minutes

• Manipulating Font Styling Using Tags in HTML
• Using Special Characters in an HTML5 Document

Practice: Working with HTML5
Course: 20 Minutes

• Exercise: Generating Web Pages Using HTML

HTML5 Layout

HTML5 Page Objects
Course: 20 Minutes

• Course Introduction
• Using Block Level vs. Inline Elements in HTML
• Using the Div Tag in HTML
• Using Object Positioning in an HTML5 Document
• Using Logical Divisions and Spans in HTML

Basic HTML5 Structure
Course: 9 Minutes

• Creating the Basic Structure of an HTML
• Creating the Basic Format of an HTML

HTML5 Lists
Course: 15 Minutes

• Creating a List with HTML
• Using Lists in an HTML5 Document
• Configuring a List in HTML

HTML5 Tables
Course: 17 Minutes

• Creating a Table with HTML
• Using Tables in an HTML5 Document
• Configuring a Table in HTM

HTML5 Basic Formatting
Course: 11 Minutes

• Using Color with HTML
• Creating Clickable Hotspots on Images with HTML

Working with Images
Course: 15 Minutes

• Inserting Images in an HTML5 Document
• Resizing Images in an HTML5 Document
• Wrapping Text Around Images in HTML

Articles and Sections
Course: 29 Minutes

• Using the Article and Section Tags in HTML
• Using Semantic and Structural Elements in HTML
• Changes to the Address and Cite Tags in HTML
• Using the Details and Summary Tags in HTML
• Using the Header and Footer Tags in HTML
• Using the Figure and Figcaption Tags in HTML
• Using the Nav Tag in HTML

Inserting Video with HTML
Course: 10 Minutes

• Using Videos in an HTML5 Document
• Using Flash Files in an HTML5 Document

CSS3 Border Styles
Course: 10 Minutes

• Creating Borders Using CSS3 in HTML
• Creating Rounded Borders Using CSS3 in HTML

Practice: Working with HTML
Course: 20 Minutes

HTML5 Forms

The HTML5 Form Tag
Course: 21 Minutes

• Course Introduction
• Using the Form Tag in HTML
• Adding the Form Tag to an HTML5 Document
• Manipulating Form Field Attributes in HTML
• Setting the Value and Name Attributes in HTML

Selection Form Fields
Course: 16 Minutes

• Using the Password and Textarea Form Fields
• Creating Radio Buttons in HTML
• Creating Checkboxes in HTML
• Creating Dropdown Lists in HTML

HTML5 Form Input Types
Course: 37 Minutes

• Using the Color Chooser Attribute in HTML
• Using Number Fields in HTML
• Using Color Fields in HTML
• Using Color Pickers in HTML
• Adding a Number Chooser Field to an HTML5 Document
• Adding a Range Slider to an HTML5 Document
• Setting a Numerical Range in HTML
• Using a Range Slider in HTML
• Using a Calendar in a Form in HTML
• Setting Date Forms in HTML

Submitting Form Data
Course: 10 Minutes

• Submitting Form Data in HTML
• Submitting a File to a Server in HTML

Validation and Completion Attributes
Course: 35 Minutes

• Using the Novalidate Form Attribute in HTML
• Using Placeholders in Forms in HTML
• Using Required and Placeholder in Forms in HTML
• Using the Autocomplete Form Attribute in HTML
• Using the Datalist Tag in HTML
• Adding a Datalist to a Form in HTML
• Using Email Form Field Validation in HTML
• Using Regular Expressions in HTML
• Using Regular Expressions with Inputs in HTML

Form Input Attributes
Course: 22 Minutes

• Using the Autofocus Input Attribute in HTML
• Using the Form Input Tag in HTML
• Using the Form Action Input Attribute in HTML
• Using the Form Target Input Attribute in HTML
• Using the Min and Max Input Attributes in HTML

Practice: Working with HTML5 Forms
Course: 20 Minutes

• Exercise: Enhance Forms20

HTML5 APIs and Media

APIs, Elements, and Selectors
Course: 33 Minutes

• Course Introduction
• Using the Drag and Drop from the File API in HTML
• Using Geolocation with HTML
• Finding HTML5 Elements Using querySelector
• Finding HTML5 Elements Using querySelectorAll
• Finding the First Instance of an Element in HTML5
• Finding Multiple Elements Using Selectors in HTML

Web Storage and Files
Course: 18 Minutes

• Using Session Storage with HTML
• Using Local Storage Objects with HTML
• Selecting Files Using the File API with HTML

Working with XML
Course: 30 Minutes

• Using XML with HTML
• Using AJAX with HTML
• Enhancing HTML5 with the XMLHttpRequest API
• Inserting Server Files into an HTML5 Web Page
• Swap HTML5 Pages Using XMLHttpRequest

HTML5 Debugging
Course: 22 Minutes

• Using Browser Best Practices with HTML
• Verifying HTML5 Browser Support
• Debugging HTML

Working with Media in HTML
Course: 25 Minutes

• Playing Audio Files in HTML
• Playing Video Files in HTML
• Manipulating the Source Attribute in HTML
• Using the Audio and Video APIs in HTML
• Obtaining Time-Related Information in HTML

Advanced Media Techniques in HTML
Course: 21 Minutes

• Configure Media Events in HTML
• Preloading, Looping, and Muting Media with HTML
• Sourcing Dynamic Audio and Video Content in HTML
• Configuring Audio and Video MIME Types in HTML
• Accessing Playhead Position in HTML5 Media

Practice: Web Page Development Using HTML
Course: 20 Minutes

• Exercise: Using HTML5 APIs and Media20

HTML5 and CSS3

Introduction to CSS3
Course: 37 Minutes

• Course Introduction
• Creating Web Pages with CSS3 Formatting in HTML
• Using CSS3 Syntax in an HTML5 Document
• Using Inline CSS3 Styles in an HTML5 Document
• Adding Attachments in an HTML5 Document
• Creating a CSS3 Style Sheet for an HTML5 Document
• Using Basic CSS3 Syntax for an HTML5 Document

Basic CSS3 Usage
Course: 29 Minutes

• Using Inline CSS3 in an HTML5 Document
• Adding a Style Sheet to an HTML5 Document
• Choosing to Use an Attached Style Sheet in HTML
• Modifying HTML5 Tags with CSS3
• Alternating HTML5 Table Row Colors Using CSS3

Block Elements
Course: 26 Minutes

• Using Block Elements in HTML
• Manipulating HTML5 Lists with CSS3
• Manipulating DIVs with CSS3 in an HTML Document
• Modifying HTML5 List Bullets Using CSS3
• Using Spans and CSS3 in an HTML5 Document

Referencing HTML Objects
Course: 23 Minutes

• Using ID and Class in an HTML5 Document
• Applying CSS3 Styles to IDs in HTML5 Documents
• Applying CSS3 Styles to Classes in HTML5 Documents
• Modifying Hyperlinks Using CSS3 in HTML
• Setting the Hover and Visited States in HTML

Overriding CSS3 Styles
Course: 18 Minutes

• Setting the Color of Visited Links in HTML
• Applying Styles to Child Elements Using CSS3
• Overriding CSS3 Styles in HTML
• Manipulating Objects to Display or Hide in HTML

Practice: Creating an HTML Page Using CSS3
10 Minutes

• Exercise: Formatting an HTML page with CSS10

HTML5 Layout with CSS3

Changing the Direction of Text
Course: 16 Minutes

• Course Introduction
• Setting the Text Direction in an HTML5 Document
• Rotating Text with CSS3 in an HTML5 Document
• Rotating Divs with CSS3 in an HTML5 Document

Manipulation Techniques Using CSS3
Course: 25 Minutes

• Aligning Text with CSS3 in an HTML5 Document
• Positioning Text with CSS3 in an HTML5 Document
• Positioning Objects with CSS3 in an HTML5 Document
• Setting HTML5 Divs to Overlap Using CSS3
• Using CSS3 Relative Positioning in HTML5 Documents
• Using CSS3 to Overlap Text on an HTML5 Image

Modifying Divs Using CSS3
Course: 32 Minutes

• Using Nested Divs to Create an HTML5 Navigation Bar
• Adding Basic Animation to HTML5 Divs Using CSS3
• Using CSS3 to Turn HTML5 Divs into Buttons
• Configuring HTML5 Divs to be Placed Side by Side
• Using CSS3 to Center an HTML5 Div Layout
• Modifying HTML5 Hyperlinks Using CSS3 Styles
• Setting Vertical Alignment for Div Contents

How to Create a Dropdown Menu
Course: 39 Minutes

• Adding a Basic Navigation Menu with Divs in HTML
• Formatting a Navigation Menu Using CSS3 in HTML
• Adding a Background Image to a Div Menu in HTML
• Changing the Mouse Cursor Using CSS3 in HTML
• Animating a Div Image on Mouse Hover in HTML
• Using the HTML5 Nav Tag
• Creating Flyout Menus Using HTML5 Lists and CSS3
• Applying a Gradient Fill to HTML5 Lists

Practice: Manipulate and Format the HTML5 Objects
Course: 20 Minutes

• Exercise: Design an Effective Layout on a Web Page

HTML5 and Advanced CSS3

The CSS3 Transform Property
Course: 33 Minutes

• Course Introduction
• Rotating Objects Using the Transform Property
• Distorting Objects Using the Transform Matrix
• Applying 3D Transformations
• Positioning Objects Using Transform
• Scaling Objects Using Transform
• Skewing Objects Using Transform
• Adding Perspective Using Transform

Animating with CSS3
Course: 33 Minutes

• Creating Animation with CSS3
• Animating a Picture Using CSS3
• Using CSS3 Animation Keyframes
• Cycling the Color of a DIV Using CSS3 Animation
• Rotating Objects Using CSS3 Animation
• Using Advanced CSS3 Animation Techniques

Modifying a Document Using CSS
Course: 15 Minutes

• Changing a Website's Background Color Using CSS3
• Changing a Website's Background Image Using CSS3
• Modifying Background Images Using CSS3 Styles

Columns and Image Alignment
Course: 9 Minutes

• Creating Columns and Flow Text Using CSS3
• Using Image Alignment

Advanced CSS3 Techniques
Course: 47 Minutes

• Using CSS3 Pseudo Selectors
• Adding CSS3 Pseudo Selectors
• Creating Drop Shadows Using CSS3
• Creating Linear Gradients Using CSS3
• Creating Radial Gradients Using CSS3
• Creating Gradient Text Using CSS3
• Making Items Transparent Using CSS3
• Changing the Range Slider Style Using CSS3
• Drawing Triangles Using CSS3

Practice: HTML5 and Advanced CSS
Course: 20 Minutes

• Exercise: Creating HTML5 Animations with CSS320

HTML5 and JavaScript

Introduction to JavaScript
Course: 22 Minutes

• Course Introduction
• Using JavaScript Tag
• Navigating to a URL with a Button
• Popping up a Window with JavaScript
• Describing JavaScript Alert, Confirm, and Prompt Pop-Ups
• Debugging JavaScript

JavaScript Syntax
Course: 22 Minutes

• Using JavaScript Punctuation
• Using External vs. Internal JavaScript
• Inserting Javascript Code in HTML
• Using JavaScript in HTML Tags
• Formatting JavaScript in HTML

JavaScript Basics
Course: 49 Minutes

• Using JavaScript Variables
• Using JavaScript Math Operators
• Using Conditional Statements
• Using JavaScript For and While Loops
• Controlling Loops Using Break and Continue
• Using Labels with JavaScript Statements
• Using Substrings with JavaScript
• JavaScript Functions
• Passing Values to JavaScript Functions
• Passing HTML Object Information to JavaScript Functions

Fundamental JavaScript Implementation
Course: 24 Minutes

• Reading the Content of HTML Objects
• Change the Content of HTML Objects
• Accessing HTML Classes
• Changing the Class of HTML Objects
• Modifying CSS3 Styles Using JavaScript
• Accessing and Changing HTML Tags

Practice: Create an Interactive Web Page
Course: 20 Minutes

Exercise: Formatting an HTML Page Using JavaScript20

HTML5 Graphics and Canvas

HTML5 SVG Graphics
Course: 32 Minutes

• Course Introduction
• Using Scalable Vector Graphics (SVG) in HTML5
• Drawing Lines Using SVG in HTML5
• Drawing Rectangles Using SVG in HTML5
• Creating Rounded Corners Using SVG in HTML5
• Drawing Circles and Ellipses Using SVG in HTML5
• Drawing Polylines Using SVG in HTML5
• Creating SVG Text in HTML5
• Rotating SVG Graphics in HTML5
• Placing Text on a Path Using SVG in HTML5
• Using Transparency with SVG in HTML5

The HTML5 Canvas
Course: 21 Minutes

• Using the Canvas in an HTML5 Document
• Setting up the HTML5 Canvas
• Sizing the Canvas to the Screen in HTML5
• Moving the Canvas in an HTML5 document
• Rotating the Canvas in an HTML5 document

Basic Canvas Drawing
Course: 23 Minutes

• Drawing Lines on the HTML5 Canvas
• Rendering Text on the HTML5 Canvas
• Drawing Rectangles on the HTML5 Canvas
• Drawing Arcs and Curves on the HTML5 Canvas
• Drawing Circles with the HTML5 Canvas
• Loading and Displaying Bitmaps on the HTML5 Canvas

Color and the HTML5 Canvas
Course: 16 Minutes

• Setting the Canvas Color in HTML5
• Placing an Image on the HTML5 Canvas
• Creating Gradients on the HTML5 Canvas
• Clearing the HTML5 Canvas

Canvas Tracking and Animating
Course: 17 Minutes

• Tracking Objects on the HTML5 Canvas
• Tracking Mouse Coordinates on the HTML5 Canvas
• Creating Basic Canvas Animations in HTML5
• Rotating Objects on an HTML5 Canvas

Practice: Creating a Graphic in HTML5
Course: 15 Minutes

• Exercise: Working with HTML5 Graphics

Advanced HTML5

Making Web Elements Editable
Course: 26 Minutes

• Course Introduction
• Manipulating User Editing of HTML5 Form Elements
• Working with Editable Content in HTML5
• Using CSS3 and Sprites to Animate an HTML5 Menu
• Using the CSS3 Box-sizing Property to Fit HTML5 Boxes
• Creating a Dropdown Menu with CSS3 and HTML5

Browser Functionality and Detection
Course: 27 Minutes

• Using HTML5 to Detect the Browser Type
• Detecting HTML5 Features
• Checking for HTML5 Video Support
• Detecting HTML5 Video Format Support
• Detecting Canvas Support in HTML5
• Detecting Canvas Text Support in HTML5

HTML5 and Mobile Devices
Course: 10 Minutes

• Designing HTML5 Web Sites for Mobile Devices
• Detecting a Browser's Screen Resolution in HTML5
• Detecting and Changing Screen Orientation in HTML5

HTML5 Tags
Course: 15 Minutes

• Using the Date and Time Tags in HTML5
• Highlighting Text Using the HTML5 Mark Tag
• Using the Keygen Tag in HTML5
• Using the Wbr Tag in HTML5
• Using the Dialog Tag in HTML5

Working with Storage and Files
Course: 18 Minutes

• Using HTML5 Web Storage Objects
• Checking for File API Support in HTML5
• Reading Files Using the HTML5 File API
• Displaying Image Thumbnails with HTML5 FileReader

Practice: Web Development for Mobile Use
Course: 20 Minutes

• Exercise: Creating a Web Site Using Advanced HTML5

Advanced Features of JavaScript, CSS3 and HTML5

JavaScript Implementation
Course: 35 Minutes

• Course Introduction
• Displaying Time with JavaScript in HTML5
• Creating a Countdown Timer in an HTML5 Document
• How to Use JavaScript Timers in an HTML5 Document
• Creating a Scrolling Marquee in HTML5
• Confirming User Input Using Confirm in HTML5
• Capturing User Input from a Prompt in HTML5
• Using Drag and Drop in HTML5

JavaScript and Forms
Course: 20 Minutes

• Accessing Form Data
• Validating Form Data
• Adding HTML Elements to a Web Page
• Modifying Form Elements

Manipulating Forms with CSS
Course: 16 Minutes

• Modifying HTML5 Form Inputs Using CSS3
• Styling HTML5 Submit Buttons Using CSS3
• Inserting Images in HTML5 Form Fields Using CSS3
• Changing the Style of an HTML5 Form Using CSS3

HTML5 Events and Event Listeners
Course: 23 Minutes

• Using HTML5 Event Properties
• Using the Browser Event Model in an HTML5 Document
• Using an Event Object in HTML5
• Creating Second Generation Listeners in HTML5

HTML5 Meters and Progress
Course: 16 Minutes

• Using the Meter Tag in an HTML5 Document
• Using the Progress Tag in an HTML5 Document
• Customizing Progress Bars in HTML5 Using CSS3

Practice: Form Validation and Feedback
Course: 1 Minute

• Exercise: Working with Form Validation and Feedback

MeasureUp Official ITS Exam Simulation:
     •  120+ questions

Online Mentor

Practice Lab
     •  The Introduction to Programming Using HTML and CSS Practice Lab will provide you with the necessary platform to gain hands-on skills in HTML and CSS. By completing the lab tasks, you will improve your practical skills in HTML fundamentals, CSS fundamentals, structuring documents using HTML, presenting multimedia using HTML and styling web pages using CSS. These same tasks will help you understand the objectives and competencies required by the 98-383 Introduction to Programming Using HTML and CSS
certification exam