CSS ADVANCED

HTML5 & CSS3 In-Depth

HTML & CSS Courses

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.

The course is designed as a direct follow-on from our CSS Essentials course. You’ll need to have completed that course or have equivalent knowledge.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Access to our support forums for Certification students

Professionally written and approved courseware

Free course refreshers and workshop days

Professional training environment with Macs and PCs

10-special

Book a Course

Course outline - WHAT you’ll learn

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, and 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 blue 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.
  • Contact Us