HTML5 & CSS3 In-Depth

This course reveals the secrets of professional web designers and teaches you to create sophisticated page layouts using modern HTML5 structures and CSS3. This course goes into depth with responsive design, showing you how to create websites that look great across all devices and screens.

You’ll learn how to create complex multi-column layouts, positioning for free-form placement, and how to create a range of sophisticated User Interface elements and effects including gradients, transitions and animation.

It is recommend that you have attended our CSS Essentials course or have the equivalent experience to gain the most from this training.

  • Training Modules (Overview only)

    • HTML5 Semantic Markup
    • Fine-tuning Page Design, Desktop Menus & Advanced CSS3 Selectors
    • Accurate Positioning, Creating Graphical Elements with CSS
    • Essential Responsive Design Techniques, Mobile Menus
    • Column Grids and Full-screen Backgrounds
    • Advanced Effects with CSS
  • What You Get

    • 12 Months Access to Help Desk
    • No Risk! Money Back Guarantee
    • Choice of Mac or PC
    • Professional Training Environment
 


This course is provided as custom training only, please call us on 1300 441 891 to schedule your training

NEED A QUOTE

Need to get approval or a formal quote - Get a Quote

Course Outline

HTML5 Semantic Markup

This session dives into modern methods for streamlining web development. These techniques are also an essential starting point for responsive design. We explore HTML5 semantic markup, and you’ll learn about modern standards, conventions and best practice.

  • Introduction to the Course – Scope and Depth
  • Overview of Modern Web Technologies
  • Essential HTML and CSS for Responsive Design
  • HTML5 – The Bigger Picture
  • Structural and Semantic Markup with HTML5 – Why use Semantic Markup
  • Conventions for Site Structure – File names, Folder Names
  • Writing Base CSS Rules for Consistent Design

Fine-tuning Page Design, Desktop Menus & Advanced CSS3 Selectors

In this session, we learn how to design great-looking menus for larger screens, and how to take fine control over the design of our page. We also introduce more advanced CSS selectors, great for targeting repeating page elements such as lists and menus.

  • Understanding How Vertical Spacing Works – How Margins Apply to Text Elements
  • Controlling Spacing with Padding
  • The Cascade: Understanding and Calculating Specificity
  • Writing Specific Styles using Classes, IDs, Descendant, Attribute Selectors
  • Generated Content using :before and :after
  • The Child Selector, and When to Use It
  • Advanced CSS3 Selectors
  • Avoiding Repetition with Shorthand Techniques

Accurate Positioning, Creating Graphical Elements with CSS

This session moves into advanced user interface design techniques. We explore using CSS to create a responsive scrolling effect. We’ll also reveal a great technique for generating graphical elements purely with CSS.

  • Using the CSS Transition Property
  • Positioning – Using Absolute and Relative Positioning Techniques
  • Fixing a Header to the Top of the Page
  • Z-Index – Controlling the Stacking Order of Positioned Elements

Essential Responsive Design Techniques, Mobile Menus

This session takes you into responsive design techniques in depth, and lets you put it all into practice, creating a fully responsive webpage, complete with mobile navigation.

  • Interpreting a Specification and Building a Page Structure with HTML5
  • Building a Single-page Website
  • Setting Base Font Styles
  • Using REM Units for Font Sizes
  • Media Queries – Determining Breakpoints – Using Max vs. Min-Width
  • Creating a Hybrid Adaptive/Responsive Design – Controlling Page Widths via Media Queries
  • Responsive Content – Showing/Hiding Page Content for Mobiles, Changing Font Sizes, Changing Background Images

Column Grids and Full-screen Backgrounds

Working with multi-column designs can be complex, but you’ll learn how to use a column grid system to simplify the process, creating reusable classes for rows and columns that can be applied to any scenario.

  • The Box Model – Using Box-Sizing Properties to Simplify Calculations
  • Using Relative Measurements
  • Clearing Floats – Using the Clearfix Solution
  • Creating Rows and Columns
  • Nesting and Offsetting Columns
  • Using Media Queries to Modify Column Layouts Based on Breakpoints

Advanced Effects with CSS

CSS3 is capable of much more than just typography and design and begins to blur the line between presentation and behaviour. This session covers a wide range of effects and techniques, including sprites, gradients, animation and transformations.

  • Effects – Rounded Corners, Shadows
  • Keyframe Animations using Animate.css
  • CSS Transformations
  • CSS Gradients
  • Transparency Effects using RGBA and HSLA
Top