CSS Advanced Courses
Sydney, Melbourne, Onsite and ONLINE
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)
- 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
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
Related Courses
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
Prefer Private Training?
- Customise your course
- Choose your own dates
- Choose your location