TT4605 HTML5, CSS3 Training & Courseware Web Development

Web Essentials: Introduction to HTML and CSS3 is an in-depth HTML5 and CSS3 hands-on training course geared for web designers / developers who need to understand what the latest in web technologies, performance, optimization, and user interface design patterns and best practices.

This comprehensive course provides a balanced mixture of theory and practical labs designed to take students through HTML5, CSS3 and related technologies. Students who attend this course will leave this course armed with the new skills to design, implement, and deploy robust, flexible, and safe web applications.

	Download PDF Outline
	Buy This Courseware
	Request A Quote or Info

Course Snapshot

Course

TT4605: Web Essentials: Introduction to HTML5 and CSS3

Duration

2 days

Skill Level

Intermediate

Audience

This is an intermediate level HTML5 and CSS3 training course, designed for experienced developers who need to extend their knowledge of web design and development or need to reinforce sound HTML and CSS coding practices, immediately. This is a hands-on programming class. Attendees should have previous experience or working knowledge of developing software applications, as well as basic HTML and CSS. Real world programming experience is a must.

Hands-on Format

This hands-on class is approximately 60/40 lab to lecture ratio, combining engaging lecture, demos, group activities and discussions with comprehensive machine-based practical programming labs and project work.

Delivery Options

We're flexible! This course is available for onsite private classroom presentation, or live online virtual presentation, or can be presented in a combined delivery learning solution.

Customization Options

We'll target the class to your needs. This course may be easily tailored to best suit your training skills objectives, tools of choice and learning goals.

Course Overview & Objectives: What You'll Learn

Audience: Who Should Attend

Pre-Requisites & Learning Path

Course Topics & Agenda

Student Materials: What You Receive

Classroom Set Up Made Simple

Why Choose Our Solution

> Course Overview & Objectives: What You'll Learn

This course provides indoctrination in the practical use of the umbrella of technologies that are on the leading edge of web development.

Working within in a dynamic, hands-on learning environment, guided by our expert web development team, attendees will learn:

• Understand what HTML5 is, what is new, and how it is used within the context of web applications

• Understand what CSS3 is, what is new, and how it is used within the context of web applications

• Understand the wide variety of options, tools, and approaches that can be used in conjunction with the web design and implementation

Need different skills or topics?

If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate. We offer additional Java programming, design and security courses which may be blended with this course for a track that best suits your development objectives.

Course Structure

Throughout the course students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review. This course is “skills-centric”, designed to train attendees in essential object oriented, Java development skills, coupling the most current, effective techniques with the soundest coding practices.

Hands- on Learning

This course is about 50% hands-on lab and 50% lecture, with extensive programming exercises designed to reinforce fundamental skills and concepts learned in the lessons. Our courses include ample materials and labs to ensure all students are either appropriately challenged, or assisted, at all times – no matter their skill level.

Back to Top

> Who Should Attend: Audience & Pre-Requisites

This is an intermediate level web development course, designed for experienced developers who need to extend their knowledge of web design and development or need to reinforce sound HTML and CSS coding practices, immediately. This is a hands-on programming class. Attendees should have previous experience or working knowledge of developing software applications, as well as basic HTML and CSS. Real world programming experience is a must.

Back to Top

> Related Courses: Suggested Learning Path

We will collaborate with you to design the best solution to ensure your needs are met, whether we customize the material, or devise a different educational path to help your team best prepare for this training.

Take Before: Attendees should have previous experience or working knowledge of developing software applications, as well as basic HTML and CSS. Students should have skills equivalent to the following courses and topics:

• TT4610 Web Essentials: HTML and CSS

• TT4110 Web Essentials | JavaScript

Alternative Courses / Take Instead: We offer other courses that provide different levels of knowledge or focus:

• TT4605 Web Essentials: Introduction to HTML5 & CSS3 (3 days)

• TT4650 Mastering HTML5, CSS3 & JavaScript (3 days)

• TT4601 Mastering Web Development using HTML5, CSS3, JQuery & More | Covering UI Patterns, Backbone, Best Practices & Performance (with Advanced Topics) (5 days)

• TT4610 Mastering HTML5 (4 days)

• TT4655 Mastering HTML5 (with Advanced Topics) (5 days)

• TT4675 Mastering JavaScript & JQuery (5 days)

Take After: Our web development and design training courses provide students with a solid foundation for continued learning based on role, goals, or their areas of specialty. Trivera’s targeted learning paths offer a wide variety of follow-on courses such as:

• TT4365 Developing HTML5 Mobile Applications

• TTC4679 HTML RIA Development | Covering HTML5, CSS3 / LESS, Angular JS, TDD, REST, SOA, CI, MDE & More

• TTC4678 Advanced JQuery | With Backbone, Thorax and Lumbar

• TTC4680 Advanced jQuery / RIA | Creating Modular and Maintainable HTML5 Rich Applications with jQuery UI, Backbone, and REST

• TTV4689 AngularJS: Rich Internet Applications in JavaScript (RIA)

• Or other courses from our Web Development, Programming & Design tracks.

Back to Top

> Course Outline / Agenda

Session: Exploring HTML5

Lesson: HTML5
• Future of Web Development
• HTML5 Overview
• Background
• HTML/CSS Timeline
• Status of HTML5
• Support in Browsers
• HTML5 Web Applications
• HTML5 Graphics & Embedded Content
• HTML5 Forms Inputs
• What is HTML5?
• HTML5 Design Principles
• HTML5 – New Features
• DOCTYPE Tag
• HTML5 – Keeping it Simple
• HEAD and BODY
• Basic HTML5 Structure
• HTML5 Semantic Tags
• HTML4 Structural Markup Using div
• HTML5 Structural Markup Using Semantic Tags
• HTML5 Semantic Tags Example
• New Tag <header>
• New Tag <footer>
• New Tag <article>
• New Tag <section>
• New Tag <aside>
• New Tag <nav>
• New Tag <figure>
• New Tag <hgroup>
• HTML5 Forms
• HTML5 Forms – New Features
• New Input Type: email
• New Input Type: URL
• New Input Type: number
• New Input Type: tel
• New Input Type: range
• New Input Type: color
• New Input Type: date
• More Input Types
• autofocus Attribute
• autocomplete Attribute
• placeholder Attribute
• <datalist> Tag
• required Attribute
• multiple Attribute
• pattern Attribute
• More Attributes
• form Child Outside <form>
• HTML5 Media
• Drawing on the Canvas
• Define canvas and 2D Context
• Drawing into the Canvas
• Canvas 2D Drawing Example
• Drawing Paths
• Drawing paths - example
• Drawing Gradients and Patterns
• Drawing Gradient - example
• Pixel-Based Manipulation
• Pixel Manipulation Example
• More Capabilities
• Audio and Video
• Embedding Media in Earlier HTML
• Embedding Media in Earlier HTML - Issues
• New Video tag
• src and loop attributes
• autoplay and controls Attributes
• preload Attribute
• height, width and poster Attributes
• Video Codecs
• Audio Codecs
• Playing Media in Multiple Browsers
• Multiple <source> Elements
• Legacy Browsers
• Media API Methods
• Media API Methods - Example
• Media API Events
• Media API Events - Example
• Audio and Video Challenges

Lesson: HTML5 JavaScript API
• Drag and Drop API
• Drag and Drop Components
• Draggable Object
• Draggable Object Events
• Draggable Object Event Handlers
• Drop Area
• Bind Events
• dataTransfer
• Messaging API
• postMessage and onMessage
• Sending Messages Cross-Domain
• Message Event Listener
• Message Event Listener - Example
• Web Storage API
• Web Storage API Methods
• setItem() and getItem() Methods
• key() Method
• Removing Data
• Offline with Application Cache
• Cache Manifest File
• Cache Manifest File - Example
• applicationCache

Session: CSS3

Lesson: CSS3 Overview
• What is CSS3?
• CSS3 New Features
• CSS3 Advantages
• CSS3 Browser Support
• CSS3 Selectors Support
• CSS3 Properties Support

Lesson: CSS3 Advanced Selectors
• Attribute Selectors
• CSS3 New DOM Attribute Selectors
• Beginning Substring Attribute Value Selector
• Beginning Substring Selector Example
• Ending Substring Attribute Value Selector
• Ending Substring Selector Example
• Arbitrary Substring Attribute Value Selector
• Arbitrary Substring Selector Example
• Combinators
• Combinators Example
• Structural Pseudo-Classes
• The nth-* Pseudo-Classes
• nth-child and nth-of-type
• nth-* Pseudo-Classes Example
• nth-last-child and nth-last-of-type
• nth-last-* Example
• first-of-type, last-child, and last-of-type
• First-Last Example
• only-child and only-of-type
• Only Example
• Pseudo-Class Selectors
• empty Selector
• root Selector
• not Selector
• target Selector
• UI Selectors
• UI Selectors Example

Lesson: CSS3 Visual Effects
• 2D Transformations
• Transform Property
• Transformation in Different Browsers
• Rotate Function
• Rotate Example
• Translate Functions
• Translate Example
• Skew Function
• Skew Example
• Scale Function
• Scale Example
• Transitions
• Transitions Example
• transition-property Property
• Transition Property - Duration
• Transition Property – Timing Function
• Possible Values for Keyword
• Transition Property - Delay
• Transition Property - Shorthand
• Font and Color in CSS3
• @font-face
• @font-face Example
• Opacity Color
• Opacity Examples
• The Alpha Channel in RGBA Color
• Alpha Examples
• The Alpha Channel in HSLA Color
• Border and Box Effects
• border-radius
• Border Radius Example
• border-image
• Border Image Example
• box-shadow
• Box Shadow Example
• CSS3 : Source

Back to Top

> Student Materials | What Students Receive

Our robust course materials include much more than a simple slideshow presentation handout. Student materials include a comprehensive hard-copy course manual (or soft-copy, upon request), complete with detailed course notes, detailed lab manuals and workbooks, code samples, software tutorials, diagrams and current reference materials, all directly related to the course at hand, indexed for ease of use. Step-by-step lab instructions, software tutorials and project descriptions are clearly illustrated and commented for maximum learning. We also offer recommended sources for course preparation, support and follow up for each course or learning path.

All Trivera Java courses include our separate, unique Java & OO Development Case Study, a documented, task-driven project that covers the entire application development spectrum from use cases to object-oriented design to implemented classes. This project supplements the course, and can be used during and after the course as a reference and a tool for reviewing and practicing newly learned skills.

Back to Top

> Delivery Environment & Set Up Made Simple

This course can be delivered using a variety of software combinations and IDEs. Our detailed lab workbooks are complete with software-specific instructions and tutorials, screen shots and step-by-step illustrations for using the software you select. In most cases we can port our classes to run in the environment of your choosing. Please inquire for details.

We keep setup simple! Our mission is to ensure a smooth start to your course with minimum set up burden for your team or firm. We offer several course set up options to help meet that goal, all of which include us working closely with your set up team to ensure your classroom and students are ready to go, well in advance of the course start date.

•    Manual Course Setup. Our team provides a detailed setup guide with specific instructions, packaged software and links for all course tools and labs, as well as much live assistance as required to prepare your attendees or classroom for the course.
•    Remote Lab Environment. Your team can access our pre-packaged, hosted environment to access and use the software, labs and tools required for the hands-on portion of the training
•    Provide Pre-Loaded Equipment. If needed, we can ship in pre-loaded equipment to your site.
•    LoadNGo Classroom Image. Some courses may have an option to provide a DVD image in advance of the course for simple course installation. Please inquire for details.

Back to Top

> Why Choose Web Development, Programming & Design Training from Trivera Technologies?

Whether you’re a manager choosing a training provider or course to bring to your team, an instructor looking for reliable, solid course materials, or a student looking for an exciting, targeted training class to attend or to recommend to your colleagues - Our single focus is to make YOUR training event or experience a success. Here’s why choosing our team as your application development training resource takes the risk right out of your decision making process…

•   Our prices and services are guaranteed. We stand behind our courses, courseware and instructors 100%. We’ll match or beat any pricing for similar services, any time. Whether you’re a stakeholder organizing your firm’s educational services, a student in our live or virtual classroom or a trainer using our materials to educate your own client or team.

•   Our Instructors and Mentors bring years of leading-edge, hands-on Web Development, Design & Programming experience into the classroom and content. Our engaging, dynamic instructors and course authors are also skilled web developers and designers, who work on exciting web projects in between training engagements. Many of our web team members are game designers and developers, mobile app developers, and mobile app and web development security experts - all of whom are immersed in the latest skills, tools and technologies available in this fast-changing industry. They bring experience and expertise well-beyond the course materials.

•   Our ‘skills-driven’ courses are efficient, focused, current and comprehensive. Our experts target exactly the skills your team needs to succeed in their jobs, projects or roles, rather than taking a ‘laundry-list’ approach to training, which can often result in overtraining, course overload or overwhelmed students. We’ll work with you to define what it is you need to accomplish, and create the right program, training to those goals. Students of all skill levels will be able to hit the ground running with their new skills right after class ends, since the program was correctly designed from the start.

•   Our content is always updated and ready to go. Our dedicated course development team keeps our training content, courses and student resources completely updated with the latest skills, industry trends and software editions to ensure your team is always getting the most current information, techniques and skills available.

•   Our 360° Turn-Key Training Services ensure your Important Event is TrulyTargeted, Exceeds Your Expectations and is delivered 100% Worry-Free! The Trivera team treats every delivery engagement like a first-run, important event, not simply a staffing assignment. For every class we deliver, our team works closely with yours to ensure that your course runs smoothly from start to finish, and that there are no surprises in the classroom for you, your students or the instructors. Our experts work with you to choose the right topics and courses that align with your true skills goals, tuning as needed. We align the best all-around trainer to fit your exact needs – not just whoever happens to be ‘on the bench’. We offer pre-reading, quizzes and support resources to help assess and prepare your team for the training, so we can best tune the training and maximize their time in the classroom. We’ll ensure that your classroom is set up and ready to go prior to course start. Our dedicated events team handles all site details, instructor logistics and and classroom set up, making your event organization completely worry-free. Throughout the course delivery, our instructors constantly evaluate the class delivery and students, tuning topics, activities, discussions and labs as needed to ensure all student skill levels and needs are targeted. All activities, data and results are documented and shared with your firm so you have a complete picture of the course and its results, throughout the course delivery, and afterwards. Post training support is also included for your students to address any future related questions.

•   We wholly-own our course content, giving Trivera flexibility & quality above the rest. Our course materials are owned by our company and fully customizable at little or no cost. Dozens of training firms and independent instructors purchase and use our course materials, and hire us for training support as well. As a result, our courseware is subject to very stringent quality requirements. Not only will your organization benefit from our own technical team’s technical expertise, but also from the feedback of hundreds of students and trainers using these materials, worldwide, on a regular basis. This unique fact guarantees that our materials are not only robust and interesting, but also technically correct, current and of the highest quality and usability.

•   We take the pain out of classroom set up. Our mission is to ensure a smooth start to your course with minimum set up burden for your team or firm. We offer several course set up options to help meet that goal. We’ll work closely with you to ensure your classroom is 100% ready to go, well in advanced of the class start so your class can hit the ground running.

• We’re here for Extended Support Service for students, instructors, facilities or anyone using our content or working with our instructors, in any way. There is someone here to assist you with questions, technical calls, set up, content – or whatever you need - at all times. Your success is our singular goal. We also support all of our students long after the class ends by offering pertinent free technical resources, loive mentoring and technical support to help you apply your newly learned skills, and steeply discounted additional training offerings.

• We're published authors and industry speakers. Our team was selected to write the online JEE, EJB, EJB CMP-CMR and Web Services Tutorial Series for IBM developerWorks®. These are the same instructors who train our classes and author the courseware. Most of our trainers/consultants have also authored additional articles on web services, EJB, Struts, JEE and advanced Java topics, and are recognized speakers and presenters on the industry technical seminar circuit. Our team is comprised on several successful published authors. Members of our team have written or contributed to: Python Programming, Eclipse Kick Start, Mastering Eclipse; Professional Struts; Using Java Tools for Extreme Programming; Mastering Resin; Mastering TomCat and others.

• Need a small-business status with whom to team? Trivera Technologies is a 100% Woman-Owned Small Business Concern. Please contact us to team with us for your small-business or woman-owned set aside opportunities.

Back to Top