CSS3 is the newest version of CSS. CSS gives webpages their appearance, layout, and styling. CSS3 brings a variety of new features to this style sheet language like advanced selectors, box-shadow, animations, gradients, box-sizing, flex-box and more.
HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support (video/audio), but also enhanced support for creating interactive web applications. This includes things like data storage, form validation, and improved element semantics.
The Building Responsive Sites Using HTML5 and CSS3 training course equips experienced front-end web developers to quickly adopt HTML5 and CSS3 for creating next generation web sites that are ready for modern browsers. This course will give developers experience with all major new HTML5 and CSS3 features.
Beginner and Intermediate Front-End Developers. Back-End Developers who are switching to the Front-end would also benefit from this course.
Upon completion of this course, developers will understand or know how to:
- Understand the core differences between older versions of HTML/XHTML and HTML5.
Convert older HTML/XHTML pages into HTML5.
Differentiate where individual modern browsers treat HTML5 and CSS3 the same vs. differently.
Review the CSS syntax and introduce the new features of CSS3 that make pages more interactive, vibrant, and mobile-friendly.
Use CSS advanced selectors, as well as border, background, and shadow properties.
- Utilize transitions, transforms, animations, and media queries to make web pages work equally well on different sized viewports.
This is a four-day, hands-on course.
- Web Development Basics
- Brief HTML history
- What’s HTML5?
- Where is HTML headed and what’s on the horizon?
- Updating your Webpages: DOCTYPES, Required Tags, and Major Shifts
- The Canvas Tag
- The Video Tag
- The Audio Tag
- Local Storage
- Web Workers
- CSS3: Simple Animations and Transitions
- “Old School” techniques – what’s now out of date?
- “New School” techniques – what’s fresh?
- Live examples and code to make the new HTML5 APIs shine
- Semantic Layouts vs Div-Based Layouts
- The new Semantic layout tags and how they’re used
- Why Semantic-based layout works and can boost your SEO
- Browser Limitations
- Cross-browser compatibility and considerations
- A Quick CSS Review
- Basics of CSS Syntax
- Understanding Element Positioning and the Box Model
- Introducing Cascading Stylesheets 3
- Introduction to CSS3
- Benefits for Mobile Design
- Compatibility with Browsers and Devices
- Overview of the Modules Included in CSS3
- Defining CSS Advanced Selectors
- The Child Selector
- The Sibling Selector
- The Nth Selectors
- Of Type Selectors
- Adjacent Selectors
- Attribute Selectors
- Assigning New Background Properties
- Background Image (Using more than one image)
- Using New Color Formats
- Introducing the Alpha Value
- RGB Format
- RGBA Format
- HSL Format
- HSLA Format
- Exploring Border and Shadow Properties
- Border Radius
- Border Image
- Text Shadow
- Box Shadow
- Designing for Mobile Devices
- Introduction to Responsive Design
- Introduction to Mobile First Concept
- Flexible Grids
- Flexible Units
- Media Queries
- Making Pages More Interactive
- 2D and 3D
Request More Information About This Course