Atomic & Molecular Design with Drupal

A full-service digital agency with 100+ experts, Evolving Web has been building user-centric platforms and fostering open source innovation since 2007. Evolving Web sponsors and presents at innovative events around the world, organizes open source events like EvolveDigital across North America and connects the design community with its EvolveUX meet ups.

Evolving Web

Learn how to build components in Drupal that empower content editors to create flexible, dynamic page designs.

Atomic and molecular design are great tools to ensure consistency in design language across a website. It can be hard for content editors to use elements from your design library unless Drupal is set up correctly.This course gives front end developers the knowledge they need to build components in Drupal that empower content editors to create flexible, dynamic page designs that also make use of elements of the atomic design.Get a discount when you buy this course as part of these Drupal track packages:<ul><ul><li><a href="https://evolvingweb.ca/complete-drupal-education-track" target="_blank" data-msys-clicktrack="0" rel="nofollow noopener noreferrer">Complete Drupal Education Track (12 courses)</a></li><li><a href="https://evolvingweb.ca/front-end-drupal-developer-track" target="_blank" data-msys-clicktrack="0" rel="nofollow noopener noreferrer">Front-end Developer Track (6 courses)</a></li></ul></ul>

<h2>Learning Objectives</h2>You'll come away from the course with knowledge of how to:<ul><li>Make atomic and molecular design accessible for content editors and end users</li></ul><ul><li>Plan effective landing pages that work for content editors and end-users</li></ul><ul><li>Pick the best configuration for resusable page components</li></ul><ul><li>How to use Block types and Paragraphs to build pages</li></ul><ul><li>Theming techniques that will enable consistent components</li></ul><ul><li>Accessibility as a key for component design</li></ul><ul><li>Using the Layout Builder to create more flexible pages</li></ul><h2></h2><h2>The Blended Learning Process: How It Works</h2>This blended learning course consists of live training with your instructor and cohort to deepen your understanding, one-on-one training sessions with instructors to get more guidance and support as needed, and pre-recorded videos and exercises between live sessions that allow you to self-direct your learning and learn at your own schedule.Here's what to expect:<ul><li>👩‍🏫 Live interactive sessions over Zoom (Tuesdays and Thursdays from 2 pm to 4 pm ET)</li><li>📺 Carefully crafted videos and virtual exercises to complete in between the sessions</li><li> 👨‍💻 A one-on-one session for personalized support</li><li> 💬 A dedicated Slack channel to learn and grow together</li><li>🏆 A certificate upon completion</li></ul><h2>Outline</h2>You'll have lessons to complete between live sessions (exercises with video instructions) and access to a Slack channel and a one-on-one session to help you out.Install Party &amp; Introductions We'll make sure you're set up for success, do class introductions, and talk about the problems that atomic &amp; molecular design set out to solve.Drupal Content Components Share the landing page use cases. Drupal options for creating the building blocks that make up a landing page: Paragraphs, Blocks and the Layout Builder.Building Patterns in Drupal How your content components fit into a larger design system. Learn how to break down the elements of a design into small pieces to apply a consistent style guide.Atomic Design and StylingWe'll look at approaches to creating templates and CSS, following an atomic design approach.Layout Builder &amp; Custom BlocksReview of Paragraphs and atomic design lessons learned. This week: building more flexible landing pages with the Layout Builder and applying atomic design to Blocks.Wrap-UpWhat are the pros and cons of each approach? What are the challenges of maintaining a website built with atomic design? What are the benefits for content editors and content governance?

<h2>Who Is This Course For? </h2>This course is for front end developers that want to build components in Drupal that empower content editors to create flexible, dynamic page designs.<h2>What Our Clients Say </h2>"I learned a lot of great tools/tips, and felt the training team did a fantastic job at managing the varying skill levels of the class. I also appreciate finally getting a more comprehensive understanding of the inner workings of Drupal. I think you are also amazing and knowledgeable teachers, and will be encouraging other Drupal members at U of T to consider contacting Evolving Web for workshops."— Kaelyn Lindquist, Developer at the University of Toronto

<h2>FAQ</h2>What is the format of live sessions? Our classes usually have 6-10 participants, and we have a hard limit of 12 participants per trainer. Our live sessions happen twice a week, usually on Tuesdays and Thursdays, and are 2-hour long (all times are on ET).How is this different from other courses on the market? Our courses are designed for people who work full-time jobs and need to apply what they learn to real-life projects quickly. Our training includes live learning sessions and offers real-time mentorship from an expert. What are the trainers' credentials? Our courses are delivered by Strategists, Designers and Senior Developers with 10+ years of experience. They're seasoned professionals with real-world projects in a variety of sectors, from small businesses to multinational corporations.Do I need to install anything on my computer? We’ll give you the necessary instructions and support to work with Drupal locally on your computer for the development courses. If you face restrictions, we’ll provide an alternative remote environment so you can work from your browser.My organization requires an invoice. Can you provide one? Yes. Contact us before proceeding with payment. We can issue you an invoice with a link to pay via credit card or electronic transfer. Do you offer discounts for charities or individuals? Yes, <a href="https://evolvingweb.ca/contact" target="_blank" data-msys-clicktrack="0" rel="nofollow noopener noreferrer">contact us</a> to receive a discount on the course.Do you offer custom training? Yes, we can provide custom training for your team. <a href="https://evolvingweb.ca/custom-drupal-training" target="_blank" data-msys-clicktrack="0" rel="nofollow noopener noreferrer">Learn more</a> about our approach to tailoring a custom course or <a href="https://evolvingweb.ca/contact" target="_blank" data-msys-clicktrack="0" rel="nofollow noopener noreferrer">get in touch with us</a>, and we can set up training that fits your needs.Can I switch my start date? Can I get a refund? We can reschedule your ticket to the next available course. Our training program runs twice a year, with a first cohort slated to start in March and the second in September. Tickets are refundable up until 30 days before the start of the course. And it's always free and easy to transfer your ticket to another person, just contact us.

Our {communityGuidelinesLink} describe the sort of content we prohibit on Eventbrite. If you suspect an event may be in violation, you can report it to us so we can investigate.

To report other categories of prohibited or illegal content, submit {link}

Atomic & Molecular Design with Drupal

More events from Evolving Web

Discover more events from Evolving Web, from Science & Tech to other experiences you might love.

Still looking for the right event?

Explore all online events to browse and filter by date, category, and more.

Atomic & Molecular Design with Drupal

More events from Evolving Web

Discover more events from Evolving Web, from Science & Tech to other experiences you might love.

You might also like...

Browse more events with different dates, prices, and formats to find your next great experience.

Still looking for the right event?

Explore all online events to browse and filter by date, category, and more.