Courses Solutions Case Studies & Testimonials News & Insights About Us Contact Us
Public Sector Graduate Training Schemes Learning & Development Corporate & Volume Pricing Custom Learning Paths

Public Sector

We've had the pleasure of working with UK and overseas central and local government departments, including Healthcare (NHS and Foundation Trusts), Defence, Education (Universities and colleges), many of the main Civil Service departments, Emergency Services; also public-owned corporations including the BBC, Bank of England, Ordnance Survey, and regulatory bodies such as Ofgem.

We are registered on Crown Commercial Service’s (CCS) Dynamic Purchasing System (RM6219 Training and Learning) and also with numerous tender portals such as Ariba, Coupa and Delta E-Sourcing.

Read more...

Graduate Training Schemes

Framework Training has a strong track record of providing a solid introduction into the working world for technical graduates across myriad industries. We provide the opportunity to learn and gain valuable hands-on experience in a supportive, friendly and sociable training environment.

Attract & retain the brightest new starters

We know it is vital for our clients to invest in the future of their talented grads; not only to provide them with high-quality, professional training essential for their roles, but to embed them within the organisation’s culture and guide them on the right path to a successful career.

After all, your new hires could well be the next leaders and their creative ideas and unique insights are invaluable to your business.

Read more ...

Learning & Development

Our unique portfolio of high-quality technical courses and training programmes are industry-respected. They’re carefully designed so that delegates can seamlessly apply what they’ve learnt back in the workplace. Our team of domain experts, trainers, and support teams know our field — and all things tech — inside out, and we work hard to keep ourselves up to speed with the latest innovations. 

We’re proud to develop and deliver innovative learning solutions that actually work and make a tangible difference to your people and your business, driving through positive lasting change. Our training courses and programmes are human-centred. Everything we do is underpinned by our commitment to continuous improvement and learning and generally making things much better.

Read more...

Corporate & Volume Pricing

Whether you are looking to book multiple places on public scheduled courses (attended remotely or in our training centres in London) or planning private courses for a team within your organisation, we will be happy to discuss preferential pricing which maximise your staff education budget.

Enquire today about:

  • Training programme pricing models  

  • Multi-course voucher schemes

Read more...

Custom Learning Paths

We understand that your team training needs don't always fit into a "one size fits all" mould, and we're very happy to explore ways in which we can tailor a bespoke learning path to fit your learning needs.

Find out about how we can customise everything from short overviews, intensive workshops, and wider training programmes that give you coverage of the most relevant topics based on what your staff need to excel in their roles.

Read more...

Modern CSS: Layout, Organisation, and Next-Gen Features

From responsive layouts to dynamic styling: Learn to build smarter, more maintainable CSS.

About the course

Step into the future of web design with our intensive, instructor-led CSS New Features course. This comprehensive deep dive is meticulously crafted for front-end and full-stack software engineers, as well as UX and testing professionals, who are eager to master the latest advancements in Cascading Style Sheets. In a world where user experience and maintainability are paramount, understanding modern CSS is no longer optional – it's essential.

You'll begin with a focused refresher on established layout powerhouses like Flexbox and Grid, ensuring a solid foundation before we propel you into the cutting edge of CSS. This highly interactive workshop provides a perfect blend of theoretical explanations and hands-on exercises, guaranteeing a comprehensive understanding of each concept. You'll get practical experience with groundbreaking features like Subgrid for intricate layouts, Cascade Layers for unparalleled style control, and CSS Nesting for cleaner, more readable code.

Beyond layout and organisation, we'll explore new colour functions for vibrant, adaptive schemes and introduce you to the new native dialog and selectmenu elements, showing you how to style them for seamless user experiences. Whether you're looking to enhance your existing projects, streamline your development workflow, or simply stay ahead in the rapidly evolving web landscape, this course will equip you with the skills to build more robust, performant, and visually stunning web applications.

Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.

    • Master advanced CSS layout techniques, including the sophisticated capabilities of Flexbox, Grid, and the new Subgrid.
    • Organise and manage complex stylesheets effectively using Cascade Layers and CSS Nesting for improved maintainability.
    • Implement dynamic and reusable styling with CSS Custom Properties (Variables) for flexible design systems.
    • Leverage modern pseudo-classes like :has, :is, and :where for more powerful and concise selectors.
    • Create adaptable and responsive designs using advanced techniques such as Proportional Scaling and Container Queries.
    • Utilise new CSS colour functions and mix capabilities to develop vibrant and adaptive colour schemes.
    • Style and interact with new native HTML elements like and for enhanced user interfaces.
    • Apply conditional CSS rules using @supports, @when, and @else for robust feature detection.
    • Understand and implement dynamic viewport units for more precise responsive layouts.
    • Enhance user experience with deeper knowledge of CSS transitions and animations.

  • This course is designed for:

    • Front-end software engineers

    • Full-stack software engineers

    • UX/UI designers with a strong interest in CSS implementation

    • Web developers looking to update their CSS skills

    • Testing professionals involved in UI validation

  • To get the most out of this course, participants should have attended our Intro to HTML & CSS or have equivalent experience:

    • Solid understanding of HTML structure.

    • Proficiency in fundamental CSS concepts (selectors, properties, box model, basic positioning).

    • Prior experience with Flexbox and CSS Grid basics is highly recommended, as the course will start with a refresher before diving into advanced features.

    • Familiarity with a code editor.

  • This CSS New Features course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).

    Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.

  • CSS Layout Refresher & Advanced Flexbox/Grid

    • Quick Refresher: Review of Flexbox and CSS Grid fundamentals (core concepts, common properties, and responsive patterns). Emphasise common use cases and best practices.

    • Advanced Grid Techniques: Deep dive into explicit vs. implicit grids, grid-template-areas, minmax(), and repeat().

    • Subgrid: Comprehensive exploration of this powerful Grid feature for nested grid alignment and complex component layouts.

    • Proportional Scaling & Aspect Ratio: Techniques for maintaining aspect ratios (e.g., aspect-ratio property, padding-top hack alternatives) for responsive media and components.

    • Lab: Rebuilding complex layouts using advanced Grid features, including Subgrid, and applying proportional scaling.

    Responsive Design Evolution: Container Queries

    • The Problem with Media Queries: Limitations of viewport-based responsiveness for component-driven design.

    • Introduction to Container Queries (@container): Understanding element-based responsiveness.

    • Syntax and Usage: Defining containment contexts, querying container size (inline-size, block-size), and styling based on parent elements.

    • Practical Applications: Building truly flexible and reusable components that adapt to their container, not just the viewport.

    • Lab: Implementing responsive components using Container Queries, demonstrating adaptation within different parent containers.

    Modern CSS Organisation: Custom Properties & Nesting

    • CSS Custom Properties (Variables) Refresher: Reviewing syntax (--var-name, var()), scope, and common use cases.

    • Advanced Variable Usage: Dynamic variable updates with JavaScript, theming, and calculation functions.

    • CSS Nesting (&): Understanding the new native nesting syntax for improved readability and organisation.

    • Best Practices for Nesting: When to nest, avoiding over-nesting, and maintaining clarity.

    • Lab: Refactoring existing CSS to use custom properties for theming and applying CSS Nesting for better structure.

    Controlling the Cascade: Cascade Layers

    • The CSS Cascade Revisited: Specificity, inheritance, and order of appearance.

    • Introduction to Cascade Layers (@layer): Understanding how to explicitly control the order of CSS rules.

    • Defining and Ordering Layers: Creating named layers and managing their precedence.

    • Use Cases: Third-party styles, base styles, themes, utilities, and component-specific styles.

    • Lab: Organising a stylesheet into multiple cascade layers to achieve predictable styling outcomes, demonstrating how layers override specificity.

    Powerful New Selectors

    • The :has() Pseudo-class (Parent Selector): Understanding its revolutionary capabilities for selecting elements based on their descendants.

    • Practical :has() Use Cases: Styling a parent based on child state, conditional styling, and complex UI patterns.

    • The :is() and :where() Pseudo-classes: Efficiently grouping selectors for cleaner and more readable CSS.

    • Differences and Performance Considerations: When to use :is vs. :where and their impact on specificity.

    • Lab: Implementing advanced styling scenarios using :has(), :is(), and :where() to create highly targeted and maintainable CSS.

    New Colour Functions & Dynamic Viewports

    • Modern Colour Functions: Exploring lch(), oklch(), lab(), oklab() for wider colour gamuts and perceptual uniformity.

    • color-mix(): Dynamically mixing colours for gradients, states, and responsive themes.

    • Dynamic Viewport Units: Understanding svh, lvh, dvh, svw, etc., for more reliable responsive layouts, especially on mobile.

    • Practical Applications: Creating adaptive colour schemes and ensuring consistent viewport behaviour across devices.

    • Lab: Experimenting with new colour functions and implementing layouts that leverage dynamic viewport units.

    Styling Native HTML Elements & Conditional CSS

    • The <dialog> Element: Styling and interacting with the native modal/dialog element using CSS.

    • The <selectmenu> Element: Customising the new native select element for enhanced user experience without JavaScript libraries.

    • Conditional CSS (@supports, @when, @else): Feature detection in CSS for progressive enhancement and graceful degradation.

    • Lab: Styling a native <dialog> and <selectmenu> element, and using @supports to provide fallback styles for specific features.

    Transitions, Animations & Performance Considerations

    • Deeper Dive into Transitions: Advanced properties, timing functions, and multi-property transitions.

    • Keyframe Animations: Creating complex animations with multiple steps and states.

    • Performance Best Practices: Optimising CSS for rendering performance, avoiding layout thrashing, and using hardware acceleration.

    • CSS-in-JS (Brief Overview): How these new native CSS features impact the need for and use of CSS-in-JS solutions.

    • Lab: Building a complex animation or interactive UI element using advanced transition and animation techniques.

    Course Review & Modern CSS Best Practices

    • Recap: Consolidating understanding of all new features covered.

    • Integrating New Features: Strategies for adopting new CSS features into existing projects.

    • Tooling & Workflow: Discussing how build tools, linters, and preprocessors interact with new CSS.

    • Future of CSS: What's on the horizon.

    • Q&A Session.

Trusted by

IBM company logo CERN organisation logo

Public Courses Dates and Rates

Please get in touch for pricing and availability.

Related courses