SkillBuilders Welcome  |  Log in
All Oracle APEX Classes

HTML5, CSS, and JavaScript for Oracle APEX Developers
3 Day Onsite or 21 Hour Online Hands-On Training

In this class you will get a rapid hands-on introduction to the fundamentals of web development using HTML5, CSS, and JavaScript (including jQuery). The course is meant for students who need to get a jump start on all three front end technologies or a refresher on the fundamentals. While the majority of the course material is independent from APEX, it is beneficial for Oracle Developers who are unfamiliar with web development technologies looking to move to APEX.

Students should be prepared to cover a lot in three days (or 21 hours online) 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.

The class is primarily web development with some ties to APEX. Additionally, the following lessons have been added to demonstrate how these languages are used specifically in APEX.

  • Generating HTML dynamically in APEX using PL/SQL
  • Understanding APEX Themes and Templates
  • Adding JavaScript to a page in APEX
  • Using Dynamic Actions (declarative JavaScript) in APEX


Average Student Rating:

Introduction to Web Development

• Static and Dynamic Web Pages

• Web Browsers

• Sever Side Programming

• Client Side Programming

• Common Coding Tools

• Accessibility Laws

• References

How to Code, Test, and Validate a Web Page

• Structure of an HTML5 Page

• HTML5 Syntax Overview & Coding Rules

• CSS Syntax Overview & Coding Rules

• Common Errors

• Code Validation

How to Use HTML to Structure a Web Page

• Search Engine Optimization (SEO)

• Attributes and Elements

• Character Entities

• div and span elements

• Absolute versus Relative URLs

• URLs in APEX

• References

How to Use CSS to Format the Elements of a Web Page

• Adding Style to a Web Page

• Units of Measure

• Colors

• CSS Rule Sets

• Selectors

• CSS Pseudo- Classes

• Fonts

• Indenting and Aligning Text

• Transforming and Decorating

• Adding CSS in APEX

The CSS Box Model

• Height/Width Calculations

• Properties for Height/Width

• Properties for Margin

• Properties for Padding

• Properties for Border

• Radius and Box Shadow

• Properties for Background and Linear Gradient

• Sample HTML and CSS Code

• CSS Generators

How To Use CSS For Page Layout

• Floating and Clearing

• Fixed-Width Columns

• Liquid-Width Columns

• Floated Sidebar

• CSS3 For Text Columns

• Properties for Positioning

• Sample HTML and CSS Code

How to Work with Links and Lists

• Ordered, Unordered, Nested, and Description Lists

• CSS that Changes the Bullets

• The a Element

• Common CSS Pseudo-Classes

• Loads in New Window or Tab

• Linking to Files

• Navigation Lists

How to Work with Images

• Image Types

• img Tag

• Image Alignment

• Pages With Figures and Captions

• Thumbnails

• Image Maps

• Image Editors and Tools

• Favicons

• Images with APEX

How to Work with Tables

• Common Elements for Tables

• CSS3 Pseudo-Class Selectors

• Tables Within a Figure

• Merging Cells

• Accessibility

• Nested Tables

• Tables in APEX

How To Work With Forms

• Attributes of the Form Element

• Input Element Attributes

• Input Elements and Attributes

o Buttons

o Text Input

o Radio Groups and Check Boxes

o Select Lists

o Text Areas

o Labels

o Fieldsets and Legends

o File Upload

• Alignment and Formatting

• Tab Order and Access Keys

• HTML5 Validations

• Regular Expressions

• Datalists

• Progress And Meters

How to Format Web Pages for Printing

• Embedded versus Separate Styles

• Printing Recommendations

• CSS Properties for Printing

How to Use JavaScript to Enhance Your Web Pages

• How JavaScript Fits In

• Document Object Model (DOM) for the Page

• DOM Event Cycle

• JavaScript Placement on Page

• External Versus Embedded

• Demos

o Popup

o Rollover

o Click / Change

o Slide Show

o Tabbed Data

o Validations

• Debugging

• Adding JavaScript to APEX

How to Use jQuery to Enhance Your Web Pages

• Overview

• Adding jQuery to a Page

• jQuery in APEX

• jQuery's DOM Ready Method

• Selecting the Document

• Calling Methods

o Types of Methods

• Demos

o Carousel

o Slide Show

o Accordion

o Auto Complete

o Dialog

o Sortable

How to Use jQuery Mobile to Build Mobile Web Sites

• Style sheets and Pages for Mobile Devices

• Viewports

• Mobile Design and Testing Guidelines

• Adding jQuery Mobile to a Page

• jQuery Mobile in APEX

• Transitions

• Buttons

• Nav Bars

• Styles and Swatches

• Collapsible Content

• Accordions

• Lists

SkillBuilders Sample Video