Duration: 4 Days
In this course, you will gain an understanding of the latest approaches to web site design and consistency. Through hands-on labs, you will build a small business web site of your own. You will work with images and learn to add formatting and style with CSS to encourage consistency and easy editing in web site design.
What You Will Learn
- HTML5
- Build effective web sites with HTML5
- Comprehend the benefits of CSS3 to web pages
- Acknowledge browser variations in handling CSS
Audience
Prerequistes
Knowledge of OS X and basic computer navigation
Course Outline
1. Overview of HTML5
- Defining HTML5
- HTML5 markup
- Key HTML5 elements
- Web forms
- New HTML5 elements
- HTML5 APIs and supporting technologies
- Geolocation in action
- Web workers
- Web storage
- CSS animations
- CSS transitions
- CSS 2D and 3D transformations
- CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners
- @font-face web fonts
- HTML5 is in a state of transition
- Who is using HTML5 today?
- Identifying HTML5 sites
2. Fundamentals of HTML, XHTML, and CSS
- Web languages
- Web page structure is based on HTML
- Details of XHTML syntax
- Doctype lets the web browser know what to expect
- W3C and page validation
- HTML structure
- Placing images in HTML
- Role of CSS
- Styling a heading
- Class styles and theelement
- Three ways to use styles
- Internal vs. external style sheet
- What makes styles cascading
3. Formatting Text with CSS
- Importance of typography on the web
- Challenges of fonts on the web
- Setting a font-family
- Sizing text with CSS
- Pixels and points are not the best choices
- Using a combination of percent and the em measurement
- Using margins to modify space between your text
- Setting paragraph line-height
- Transforming text with CSS
- Working with HTML lists
- Styling HTML lists
4. Basic (X)HTML Formatting
- Making Text Bold or Italic
- Changing the Size of Text and Using a Monospaced Font
- Using Preformatted Text
- Quoting, Superscripts, and Subscripts
- Marking Changed Text
5. Introduction to CSS Layout
- Working with the CSS reset file
- Brief history of layout techniques on the Web
- Page layout options
- <div> element: creating a two-column fixed-width CSS layout
- CSS float property
- Creating columns with the float property
- Working with the clear property
- Creating a list-based navigation using floats
- Adding text styles
- Effect of margins and padding on your fix-width layout
- Using margins and padding for layout
- Styling your footer with a background image
6. Advanced CSS Layout
- Building your page layout
- Removing the background color
- Working with CSS background images
- Using hacks to solve layout problems
- Enhancing your CSS navigation bar
- Moving internal styles to the external style sheet
- Creating a style for the active page
- Adding images to your sidebar
- Working with absolute positioning
7. Using HTML5 Markup
- Semantic markup
- HTML5 fundamentals
- HTML5 DOCTYPE declaration
- Different categories used for HTML5 content
- Using the new header element in HTML5
- Adding support for HTML5 elements in browsers
- Adding the HTML5 <nav> elements
- Adding the other HTML5 sectioning elements
- HTML5 document outlines
- Adding the footer element
- Adding the article and aside elements
- Additional HTML5 elements
- Revisiting familiar HTML elements
8. Creating HTML5 Forms
- Need for updated forms
- Forms
- Components of a form
- Adding new HTML5 input types and attributes
- Creating an order form with new HTML5 input type and attributes
- HTML5 form features under development
- Providing fallbacks for browsers that don't support HTML5 features
9. Introduction to JavaScript and JQuery
- Interactivity on the Web
- Adobe Flash
- JavaScript
- JavaScript basics
- JavaScript events
- Placing your JavaScript into an external document
- The Document Object Model
- JavaScript frameworks
- Hiding an element with JQuery
- Adding an event trigger to show effect
10. Working with Video and Audio Elements
- Adding video
- Adding support for more browsers
- Adding fallback support for older browsers
- Controlling a video with JavaScript
- Adding audio
11. Working with Canvas
- Canvas element
- Benefits of the Canvas element
- Drawing paths
- Drawing rectangles
- Drawing lines and circles
- Drawing curves
- Adding text
- Using colors, styles and gradients
- Adding images
- Using transforms
- Creating a drawing loop
12. Styling with CSS3
- Role of CSS3
- Using CSS3 border-radius and border-image
- Adding multiple background images
- Working with CSS3 transparency and opacity
- Using CSS3 gradients
- CSS3 gradients potential for the future
- CSS3 transforms, transitions, and animations
- CSS3 transforms and transitions
- Working with CSS3 animations
- Working with web fonts
- Using @font-face to specify a web font
- Using a web service to generate multiple fonts
- Alternative methods for adding web fonts
13. CSS3 Media Queries and the Future of CSS3
- Role of CSS3 media queries
- Using CSS3 media queries to deliver a mobile-optimized layout
- Upcoming developments of CSS3
- CSS3 multi-column layout
- CSS3 Flexible Box layout module
- CSS3 template layout module
- Adding template-based position to CSS3
14. Offline Storage in HTML5
- Offline storage in HTML5
- HTML5 storage types
- LocalStorage methods and example
- Advanced data storage
- Application caching
- Cache manifest file
- Cache manifest structure
- Updating the cache
- ApplicationCache object
15. HTML5 Geolocation
- Geolocation
- Getting the user's location
- Displaying the user's location with Google Maps
- Browsers lacking HTML5 Geolocation
- Creating a HTML5 Geolocation and Google Maps mashup
- Adding Google Map markers to your geolocation page
16. HTML5 Drag and Drop
- Drag and drop on the web
- Cross-browser drag and drop
- Transferring data with a drag and drop operation
Course Labs
