Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

CSS3 for Responsive Web Design

( Duration: 4 Days )

In CSS3 for Responsive Web Design training course, you will leverage the CSS box model to create device-independent websites that meet, DDA, CLF and W3C accessibility guidelines. Additionally, you will learn to use advanced typography, media queries, CSS3 selector syntax and CSS special effects with dynamic JavaScript integration to develop browser-independent responsive web designs.

By attending CSS3 for Responsive Web Design workshop, delegates will learn to:

  • Leverage the CSS box model for consistent design results
  • Optimize markup with CSS3 selector syntax
  • Implement advanced typography, flexible forms and CSS animation
  • Design media queries for Responsive Web Design
  • Perform calculations and gain additional tools with CSS pre-processing
  • Follow best practices to support modern and legacy browsers

  • Those involved in establishing, designing, developing and maintaining websites and who have experience with HTML at the level of Course, HTML.

COURSE AGENDA

1

Isolating Content from Design

  • Introduction to Cascading Style Sheets (CSS)
    • Assessing the benefits of CSS
    • Supporting multiple devices and browsers
    • Selecting via element, class or ID
    • Decoding the CSS Color Model
  • Integrating style sheets
    • Evaluating inline vs embedded style
    • Linking to external style sheets
    • Leveraging the Cascade Inheritance Model
    • Revising markup for performance
    • Fixing Internet Explorer quirks
2

Leveraging the CSS Box Model

  • Navigating HTML container attributes
    • Styling margins, borders, and padding
    • Exploiting single and multiple background
    • Replacing align attribute with float and clear
    • Distinguishing relative from absolute position
    • Exploring transparency and rounded borders
  • Adopting accessible units of measure
    • Tailoring global style resets
    • Overriding author styles
    • Preventing element and image misuse
    • Defining accessibility obligations
3

Enhancing Style with CSS3

  • Selecting elements for style
    • Manipulating DOM elements by content
    • Extending DOM selections via behavior or position
    • Optimizing rules via group selectors
    • Targeting elements with contextual selectors
    • Advancing selections with pseudo elements
    • Combining multiple backgrounds
  • Enhancing web typography
    • Applying shadow, overflow and wrap
    • Embedding custom fonts
  • Creating 2D and 3D effects
    • Customizing box shadows and gradients
    • Implementing rounded corners
4

Extending CSS3 with Advanced Effects

  • Drawing attention with focal points
    • “Speaking” with speech bubbles
    • Producing breaking-news ribbons
    • Adding dynamic tooltips
    • Customizing box shadows and gradients
  • Managing images for effect
    • Clipping images to fit
    • Masking images for effect
    • Replacing images with transformed text
  • Transforming content with animation
    • Leveraging transitions and transforms
    • Grouping images into sprites
5

Designing Responsive Content

  • Contrasting modern vs traditional design
    • Assessing mobile-specific design theory
    • Incorporating a mobile-first design
    • Designing forms for responsive layout
  • Enhancing relative element size
    • Analyzing CSS3 viewpoint units of measure
    • Performing basic calculations with calc()
  • Exploiting CSS3 flexible layout
    • Assigning flexible image resets
    • Developing flexible embedded media resets
    • Composing meta tags for viewport control
    • Introducing the flexible box layout module
6

Combining CSS with Dynamic Content

  • CSS properties and JavaScript
    • Detecting CSS3 and HTML5 support
    • Creating responsive menu navigation
    • Investigating selector and value pre-processing
    • Manipulating depth of field backgrounds
    • Delaying content load via viewpoint status
  • Supporting legacy browsers
    • Testing for CSS support with Modernizr
    • Polyfilling CSS in legacy browsers
    • Offloading JavaScript rerendering to CSS classes

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X