CSS Flexbox: The "flex-direction"

This project is an e-learning video that teaches learners about the flex-direction property in CSS Flexbox. It's part of a series of lessons designed to help new learners understand CSS.

My goal was to make this video clear and easy to follow, especially for those just starting with web layouts.

• Scriptwriter: I wrote the script in a natural, inspiring, and conversational way.

• Slide Designer: I designed the visuals to be clear and minimalist.

• Video Editor: I edited the video to make sure it flowed smoothly and helped with learning.

• Learning Designer: I applied principles of how people learn to make the video effective

This lesson is for anyone new to CSS, those learning online through an LMS, or anyone interested in CSS.

By the end of this lesson, learners will understand the flex-direction property in CSS Flexbox.

My design for this video was built on my core beliefs that learning should be clear, practical, and engaging.

• Practical by Design: Every part of the video has a clear purpose. I cut out anything unnecessary and kept only what directly helped achieve the learning goal. All elements have a reason to be there, not just for looks, but for effective learning.

• Engaging by Nature: I believe good design doesn't need to be loud; it just needs to be human. I focused on creating a feeling of familiarity and curiosity.

• Backed by Research: I designed it based on how people remember, get motivated, and understand. I used principles like Mayer’s Multimedia Principles to make the e-learning video effective.

Specifically, the video uses:

• PowerPoint's Morph Transition: This was important for showing how flex-direction values change. It helped learners easily see elements move and transform.

• Clear Pacing: The voiceover includes pauses, giving learners enough time to understand the information without feeling rushed.

• Focused Content: By explaining just one concept, the video helps prevent too much information at once, keeping the learning experience easy to understand.

• Storyboarding: Google Docs.

• Slide Design: Canva & PowerPoint.

• Screen Recording & Video Editing: Camtasia.

• Voiceover: Clipchamp.

This project helped me grow as an Instructional Designer:

• I learned to write scripts that sound natural and inspire learners.

• I improved at removing anything that wasn't essential to the learning experience, following Mayer's Principles.

• I found good software for recording PowerPoint presentations smoothly, without lag