HTML/HTML5
See the standards for HTML/HTML5 Markup Language
IT / Software Engineering Program
See the standards for HTML/HTML5 Markup Language
See the standards for CSS Programming Language
See the standards for JavaScript Programming.
Learners apply principles of design and technology, including programming standards and protocols, to create, test, host, and maintain web pages and websites with text, graphics, multimedia, scripting, linking, and data integration in a structure that is easy to navigate and accessible for all users via a variety of hardware and software platforms.
The importance of HTML | Basic HTML syntax | The current state of HTML |
---|---|---|
HTML resources | Choosing a code editor | Basic Page Structure |
Exploring an html document | DOCTYPE declarations | The document head |
The document body | Understanding content models | Formatting Page Content |
Formatting paragraphs | Controlling line breaks | Emphasizing text |
Displaying special characters | Controlling whitespace | Displaying images |
Structuring Content | The value of structure | Controlling document outlines |
The nav element | The article element | The section elelent |
The aside element | The div element | Other semantic elements |
Using WAI-ARIA roles | Creating Links | Exploring the anchor element |
Exploring the anchor element | Linking to pages within your site | Linking to external pages |
Linking to downloadable resources | Linking to page regions | Creating list |
Unordered lists | Ordered lists | Definition lists |
Exploring default styling | CSS Authoring Tools | CSS syntax |
---|---|---|
Writing a selector | Setting properties | Common units of measurement |
Inline styles | Embedded Styles | Using external style sheets |
Checking for browser support | Dealing with browser inconsistencies | Targeting Page Content |
Structuring HTML correctly | Element selectors | Class selectors |
ID selectors | Using classes and IDs | Element-specific selectors |
The universal selector | Grouping selectors | Child selectors |
Adjacent selectors | Pseudo-class selectors | Dynamic pseudo-class selectors |
Structural pseudo-class selectors | Nth-child selectors | Pseudo-element selectors |
Resolving Conflicts | What happens when styles conflict? | Understanding the cascade |
Using inheritance | Selector specificity | The !important declaration |
Reducing conflicts through planning | Basic Text Formatting | Setting a font family |
Using @font-face | Setting font size | Font style and font weight |
Transforming text | Using text variants | Text decoration options |
Setting text color | Writing font shorthand notation | Controlling text alignment |
Letter and word spacing | Indenting text | Adjusting paragraph line height |
Controlling the space between elements | Styling Container Elements | Understanding the box model |
Controlling element spacing | Controlling interior spacing | Margin and padding shorthand notation |
Adding borders | Defining element size | Creating rounded corners |
Background properties | Using background images | Controlling image positioning |
Using multiple backgrounds | Background shorthand notation | Working with Color |
Color keyword definitions | Understanding hexadecimal notation | Using RGB values |
Using HSL values | Working with opacity | Using RGBa and HSLa |
Styling drop shadows | CSS gradients |
Using HTML5 Forms in the real world | Using the New Attributes and Methods | Designating a default active form field using the autofocus attribute |
---|---|---|
Auto-filling previously entered data with the autocomplete attribute | Displaying placeholder text in form fields | Constraining form field data with a regular expression using the pattern attribute |
Creating Submit buttons that bypass validation rules using the novalidate attribute | Setting required fields | Using the text selection APIs |
Building CSS styling for invalid, valid, and required fields | Formatting Fields with the New Input-Type Attributes | Creating a search field |
Capturing email addresses | Building a web address field | Creating a phone number input field |
Formatting number fields | Creating fields for capturing number ranges | Building a date picker field |
Invoking the color picker for field input | Using the New Form Elements | Creating a list of suggested entries using the datalist element |
Using the progress element to create a progress bar | Indicating measurements with the meter element | Displaying the results of a calculation using the output element |
Real-World Examples of HTML5 Forms | HTML5 Forms and Mobile | Transforming an ordinary form into HTML5 form |
Introduction to JavaScript | Creating your first JS | Getting to know the tools and Applications |
---|---|---|
Understanding the structure of JavaScript code | Where to write your JS | Creating variables |
Working with conditional code | Working with operators | Sending messages to the console |
Working with loops | Creating functions | Types and Objects |
Working with arrays | Working with numbers | Working with strings |
Working with dates | Working with objects | Understanding the Document Object Model |
What is DOM? | Working with Nodes and elements | Working with the DOM |
Accessing DOM elements | Changing DOM elements | Creating DOM elements |
Working with Events and Event Listeners | JS event handling | Working with onClick and onLoad events |
Working with onBlur and onFocus events | Working with timers | Debugging JavaScript |
Common JS errors | Using Firebug | Going through a debugging session |
Building Smarter Forms | Accessing form elements | Preventing a form from being submitted |
Hiding and showing form sections | UI Enhancement | CSS and JS |
Removing and applying CSS classes | Changing inline styles | JS Best Practices |
Understanding JS style | Minifying your code | Using JS code checkers |
JS Libraries | Intro to JS Libraries | Linking to multiple JS files |
Intro to JQuery | Using a content distribution network to deliver JS files | JS and HTML5 |
Using Modernizr | Using Strict Mode | Knowing the JS to avoid |
Intro to regular expressions | Working with AJAX | Working with objects and protypes |