html5-css3

CSS Advanced Courses

Sydney, Melbourne, Onsite and ONLINE

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

What You Get

  • 12 Months Access to Help Desk
  • No Risk! Money Back Guarantee
  • Choice of Mac or PC
  • Professional Training Environment
acrobat-reader
Download Advanced CSS

Course PDF

private-training

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
private-training

Prefer Private Training?

- Customise your course
- Choose your own dates
- Choose your location

Read More

HTML5 & CSS3 Testimonials

I teach tertiary graphic design students and run a small business - this is the missing link to the front end mindset I had - thanks!
Erica Olson, Graphic designer, Teacher
Great course, great trainer, very patient and helpful.
Roger Peisley, Senior Digital Designer
This course was great to get a handle on the new frontier of HTML5 & CSS3 – I feel more confident and ready to implement what I have learnt.
Benjamin, Multi-media consultant
Very passionate instructor who was enjoyable, friendly and knew what he was talking about.
Nicky, Web Developer
The trainer was very good and made the course interesting and had a great knowledge of HMTL & CSS.
Tim, Java Developer
Linda was an exceptional trainer. Clear and even paced, she explained everything we did, gave us time to try it out and then answered any questions we had. I found the course very interesting and useful.
Nicole Sanger, Web Designer/ Developer
Thankyou - the lights came on in many areas. I can now understand what the designer was doing, and have more confidence to further develop my own website.
Ian White, Business Owner
Linda is a great teacher. This is my third course with Linda and she always excels my expectations. I've learned a lot more than what I've expected.
Radek Karbowski, Graphic Designer
I feel I have gained more knowledge into HTML5 & CSS3 which will help me in my career and skills in the future.
Weng kin Ho, Junior UX Designer
Instructor was very knowledgeable about the subject matter and material was presented in an easy to absorb manner.
Alex, Java Developer