HTML Fundamentals
- HTTP Requests and Responses
- Static vs. Dynamic Pages
- Tag and Attribute Fundamentals
- Document Structure
- Understanding <DOCTYPE>
- Creating a Page Title
- Indicating the Character Set
- <head> and <body> Tags
- Browser Support
- HTML5 Shiv
- CSS Reset
- Conditional Comments
- Using Data Attributes
|
Structuring an HTML Document
- Adding Headings
- Adding Paragraphs
- Working with the <div> Tag
- Adding Quotes to a Page
- HTML5 Semantic Tags
- <header>, <footer>, <nav>, <article>, <section>
- Adding Meters and Progress Bars
- Defining Hyperlinks
- Creating Anchors within a Page
- Creating an E-mail Link
|
Formatting Text
- Using Inline Tags
- Using the <span> and <mark> Tags
- Defining Inline Styles
- Changing Text Color
- Changing Font Characteristics
- Changing Horizontal Alignment
- Using Character Entities
|
Introduction to Cascading Style Sheets (CSS)
- Overview of Cascading Style Sheets (CSS)
- Creating CSS Rules
- Setting CSS Properties
- Working with Colors
- Units of Measurement (px, em, %)
- Working with Fonts
- Defining Type Selectors
- Defining Class and ID Selectors
- Using Attribute Selectors
- Grouping and Combining Selectors
- Linking to External Style Sheets
- Embedded Style Sheets
- Overriding Styles with !important
|
CSS Properties
- Text-Related Properties
- text-decoration, color, line-height
- Font-Related Properties
- font-family, font-size, font-weight
- Background-Related Properties
- background-color, background-image, background-position
- Using @font-face to Add Custom Fonts
- Changing the Opacity of Text and Images
- Creating Gradients
- Linear Gradients
- Repeating Linear Gradients
- Radial Gradients
- Repeating Radial Gradients
- Creating Rounded Corners, Adding Shadows to Boxes and Using Images as Borders
|
CSS Box Model
- Positioning Elements
- Static, Absolute and Relative
- Controlling z-index
- Floating and Clearing Elements
- Visual Effects
- Setting visibility and display
- Using overflow and clip Properties
- Setting Vertical Alignment
- Box-Related Properties
- Setting the Size of an Element
|
CSS Selectors and Pseudo-Classes
- Relational Selectors
- Descendant
- Direct-Child
- General Sibling
- Adjacent Sibling
- Pseudo-Classes and Elements
- Styling Links with :link, :visited, :active, :hover
- Adding Content with :before and :after
- Attribute Selectors
- "Starts With" Selector
- "Ends With" Selector
- "Contains" Selector
- Selecting the nth Element
- Selecting the nth of a Type
|
CSS Transforms, Transitions and Animations
- Using Transforms
- Rotating 2D Elements
- Scaling 2D Elements
- Translating 2D Elements
- Skewing 2D Elements
- Configuring a Transition
- Delaying the Start of a Transition
- Changing the Speed of a Transition
- Creating an Animated Menu
- Animating Buttons with Transitions
- Using Animations
- Controlling the Direction of an Animation
- Controlling the State of an Animation
- Changing the Speed of an Animation
- Using the animation Property
|
Working with Lists
- Types of Lists
- Ordered Lists
- Unordered Lists
- Description Lists
- Creating List Items Using the <li> Tag
- Creating Nested Lists
- Using CSS to Style a List
- Using Lists to Create a Navigation Menu
- Using CSS Counters
- Incrementing a Counter
- Creating Nested Counters
|
Adding Images to a Page
- Discussion of Common Image Formats
- Displaying Images on a Web Page
- Using src and alt Attributes
- Sizing an Image Using width and height Attributes
- Common Uses of Images
- Image Thumbnails
- Favicons
- Image Rollovers
- Working with Client-Side Image Maps
- Using Icon Fonts
|
Displaying Information in Tables
- Adding Tables to a Page
- Working with <table>, <tr>, <td>, <th> and <caption> Elements
- Creating Nested Tables
- Grouping Table Content
- Using CSS to Style a Table
- Controlling Table Borders
- border-collapse and border-spacing Properties
- Using rowspan and colspan Attributes
|
Working with Forms
- Defining a Form
- Using Common Form Attributes
- action, method, enctype, autocomplete, novalidate
- Input Elements
- Understanding Form Submission
- Adding <label> and <fieldset> Elements
- Single-line and Multi-line Text Fields
- Radio Buttons and Checkboxes
- Dropdown and Selection Lists
- Submit, Reset and Push Buttons
- Using Form-Related Pseudo Classes and Elements
- Controlling Form Layout Using CSS and Tables
|
Form Validation
- Form Validation Overview
- Client-Side Validation
- Server-Side Validation
- Overview of Form Security
- Validating Input Length Using minlength and maxlength Attributes
- Using the pattern Attribute to Specify Regular Expressions
- Validation-Related Pseudo-Classes
|
Using CSS for Page Layout
- Using CSS for Page Layout
- 2 Column Fixed Layout
- 3 Column Fixed Layout
- 2 Column Fluid Layout
- Using CSS Grid Layout
- Defining Grid Columns
- Defining Grid Row
- Positioning Rows and Columns
- Using Grid Areas
- Adding Spacing Between Rows and Columns
- Aligning the Grid Container
- Aligning Grid Items
- Defining a Nested Grid
|
Audio and Video
- Browser Support for Audio/Video Formats
- Creating Audio Effects with HTML5 <audio> Elements and Attributes
- Adding Video with HTML5 <video> Elements and Attributes
- <source> Elements
|
Bootstrap Overview
- Overview of Mobile First Design
- CSS3 Media Queries
- Downloading Bootstrap
- Customizing Bootstrap
- Adding Custom CSS to Bootstrap
|
Bootstrap Grid System
- Working with Grids
- Defining Rows, Containers and Columns
- Offsetting Columns
- Creating Nested Columns
- Changing Column Order
|
Bootstrap Base CSS
- Overview of Bootstrap's Base CSS
- Using Helper Classes and Responsive Utilities
- Working with Typography Classes
- Formatting Lists
- Formatting Tables
- Creating a Striped Table
- Creating a Responsive Table
- Enhancing the Appearance of Forms
- Displaying Inline Forms
- Displaying Horizontal Forms
- Formatting Images
- Creating Responsive Images
- Styling Links and Buttons
|
Bootstrap Components
- Overview of Bootstrap Components
- Using Glyphicons to Add Symbols to Buttons and Links
- Creating Dropdowns
- Creating Navigation
- Tabbed Navigation
- Pill Navigation
- Navigation Bars
- Collapsible Navigation Bars
- Breadcrumbs
- Grouping Inputs, Buttons and Lists
- Formatting Page Headers
- Creating Panels
- Grouping Panels
- Creating a Thumbnail Gallery
- Creating Progress Bars and Alerts
|
Bootstrap Plugins
- Plugin Overview
- Creating Tabbed Navigation
- Creating a Slideshow Using the Carousel Plugin
- Using Accordions to Display a Large Amount of Content
- Adding a Dialog Box Using the Modal Plugin
- Displaying Secondary Information Using Popovers or Tooltips
|