CSS Flexbox - Lesson Plan

[courtneyr-dev]

Topic Description

A basic understanding of CSS Flexbox is needed as a prerequisite to understanding how content aligns. Show this first in plain HTML/CSS context, and share where in Site Editor one can find settings related to Flex.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Guidelines

Review the team guidelines

Development Checklist:

• Gather links to Support and Developer Docs
• Consider any MarComms (marketing communications) resources and link to those
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Create an outline of the example lesson walk-through
• Draft lesson plan
• Copy edit
• Style guide review
• Instructional Review
• Final review
• Publish
• Announce to the Training team
• Announce to lesson plan creator
• Announce to marketing
• Gather feedback from lesson plan users about the quality

Repo Structure and Lesson Plan Template

Please remove all blockquote comments such as this before publishing.

Description

A short paragraph explaining what is covered in the lesson plan. This should be text that can be copied and used in a meetup or workshop description.

Objectives

After completing this lesson, participants will be able to:

• Objective 1
• Objective 2

It’s required that you include a bulleted list of objective(s) for each lesson plan. Objectives should be worded as actions that the participant can do once they’ve finished. See Bloom's Taxonomy of Action Verbs (PDF) as a reference. Avoid using words like "know," "understand," "be introduced to," etc. There should be one assement item for each objective (see below).

Target Audience

Who is this lesson intended for? What interests/skills would they bring? Put an "x" in the brackets for all that apply.

• Users / Content Writers
• Designers
• Developers
• Speakers
• Organizers
• Kids

Experience Level

How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.

• Beginner
• Intermediate
• Advanced

Type of Instruction

Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.

• Demonstration
• Discussion
• Exercises
• Feedback
• Lecture (Presentation)
• Slides
• Show & Tell
• Tutorial

Time Estimate (Duration)

How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.

• 1 hour or less
• 2-4 hours (half-day)
• 5-8 hours (full-day)
• 2 days
• 3 days or more

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• Skill 1
• Skill 2

For example:

• Experience with HTML and CSS
• Completed the Basic WordPress Concepts lesson

Readiness Questions

• Question 1
• Question 2

A list of questions for participants to see if they have the background and skills necessary to learn and understand the lesson.

For example:

• Do you want to makes changes to your theme yourself?
• Do you know how to write CSS?

Slides

Change the /repo-name/ in the link to match the URL name of this repo.

• Slides (files included in this repo)

Materials Needed

• Item 1
• Item 2

A list of files, resources, equipment, or other materials the presenter will need for the lesson.

For example:

• A local install of WordPress
• The files for the TwentySixteen theme

Notes for the Presenter

• Note 1
• Note 2

A list of any handy tips or other information for the presenter.

For example:

• Participants may need to download the TwentySixteen theme before beginning
• What to do if there’s no projector or internet available
• What to do if a participant doesn’t have the necessary set up
• How to handle different opinions about the topic

Lesson Outline

• First do this
• Then move on to this
• Finish with this

The plan for the lesson. Outline form works well.

For example:

• Talk about what a theme is
• Demonstrate how to install and activate a theme
• Practice exercises to have participants find and install a theme on their own site

Exercises

Exercise name

Short description of what the exercise does and what skills or knowledge it reinforces.

• Short point or step of the exercise
• And another one

These are short or specific activities that help participants practice certain components of the lesson. They should not be fully scripted exercises, but rather something that participants could do on their own. For example, you can create an exercise based on one step of the Example Lesson.

Assessment

There should be one assement item (or more) for each objective listed above. Each assessment item should support an objective; there should be none that don't.

Write out the question.

1. Option
2. Option
3. Option
4. Option

Answer: 3. Correct answer

A few questions to ask participants to evaluate their retention of the material presented. They should be a measure of whether the objectives were reached. Consider having a question for each objective.

Additional Resources

• Resource 1
• Resource 2

An optional section which can contain a list of resources that the presenter can use to get more information on the topic.

For example:

• Link to information on the Codex
• Theme Review Team's Handbook

Example Lesson

An example of how the lesson plan can be implemented. Written in script form as one possible way an presenter might use this lesson plan at an event, with screenshots and instructions if necessary.

Section Heading for Example Lesson

You will likely need to break the Example Lesson down into multiple sections.

Lesson Wrap Up

Follow with the Exercises and Assessment outlined above.

[caraya]

I want to take this one too.

[caraya]

Ready for Review

https://learn.wordpress.org/wp-admin/post.php?post=18491&action=edit

@courtneyr-dev this is still missing the location of the repository we discussed for placing lesson-related auxiliary material in

[wparasae]

Reviewed! Some happy feedback:

Really solid objectives! I also like the clarify of your screenshots.

I like that you've set this little reminder to yourself:

The exercise files are in the course repo. FIXME: link to repo.

Option for Change:
The Exercises section looks good, but I'd like to see some numbered steps there. It'll make it clearer for the learner to follow if it's, "1. Do x. 2. Do y." The numbers make for a tiny change with a big impact.

Suggested Add: Conversational question to the beginning of the lesson - Why, when, and where do users use columns/rows? Where have you seen examples of these in the web naturally?

Image Issue I'm seeing an issue in some of your pictures - I can VERY FAINTLY see that there is text there, but some of them look like ghostly grey text on top of white, so that may need to be corrected.

The last thing I'm missing is the connection between the CSS and the site editor itself. Some suggested sentence starters that might help clarify for people like me are:
"We are starting with this CSS code because it does the following things..."
"Play with different values in the content flex rule and see how the layout changes" [does this impact the site editor?]

Overall, this is looking good. Those are just some things I've noticed -
TL;DR:
You might consider adding a few opportunities for conversation
Correct Code Color issue
Number your steps in the exercises
Consider adding the "why" in each section of the lesson plan -- we are doing X thing because REASON.

Overall though, solid work! This is a tougher topic and definitely more developer-level, so another set of eyes would be helpful on this :)

[caraya]

Overall, this is looking good. Those are just some things I've noticed -
TL;DR:

You might consider adding a few opportunities for conversation
I made places where I would suggest discussion and variations on the activities more explicit. Is this what you had in mind?

Correct Code Color issue
Not an issue with the code. Waiting on a fix from the backend

Number your steps in the exercises
Done

Consider adding the "why" in each section of the lesson plan -- we are doing X thing because REASON.
I added two paragraphs explaining what we're doing and why we're doing it. Does it work?

[webtechpooja]

I think it should be in the Ready to Review column instead of this. @caraya can you confirm this? So we will move this accordingly.

[caraya]

Yes, it is ready to review

[askdesign]

Hi there,
Is access to this restricted?
When I click on the Ready to Review link (https://learn.wordpress.org/wp-admin/post.php?post=18491&action=edit), I'm taken to my own Wordpress.org profile page.
thank you, Anne

[courtneyr-dev]

@askdesign you'll need editor access to review unpublished content on LearnWP. Have you been provided that yet or would you need that invite sent?

[askdesign]

@courtneyr-dev Hi, I would need an invite for access. Thank you!
Hello again, I still don't have access...

[nomad-skateboarding-dev]

Checking in. If someone could please provide direction for me, it would be appreciated. 🙂

I have some feedback after reading through the material. I'm currently unsure where the lesson material is, though? I can provide feedback on what's written in the draft, or will continue through the lesson plan with a link to materials.

Overall, this is great, @courtneyr-dev ! Information I was looking for myself, and helpful in general to most! Well done.

[caraya]

@nomad-skateboarding-dev

As the author, the material I would appreciate feedback on the most is the assessment questions and the sample lesson in the draft.

You can leave your feedback as comments on this issue.

Thank you for taking the time to review :)

[nomad-skateboarding-dev]

As the author, the material I would appreciate feedback on the most is the assessment questions and the sample lesson in the draft.

I apologize @caraya , that was an error in who I mentioned! Thank you for your work. 🙂🙌

To be clear for feedback currently, then:
You're just looking for feedback on the lesson plan that's written in draft, and the follow-up questions themselves.

There's no attached course material for me to actually go through the steps. So this is more of feedback on just how the words are written and not necessarily anything else?

[caraya]

I apologize @caraya , that was an error in who I mentioned! Thank you for your work. 🙂🙌

Don't worry about it 😄

The content is primarily the example lesson towards the end of the page.

However, I just realized that we never found a place to host the assets for the course. I'm looking for the material and creating a repository for it.

[bsanevans]

@caraya There was discussion about repurposing https://github.com/wptrainingteam to house educational code examples. Would this work for this lesson also?

#1509 (comment)

[caraya]

@bsanevans Yes, it would

[bsanevans]

@caraya This lesson plan has been open for review for quite some time, so I think we can move it to the next stage. What needs to happen for it to be published?

[caraya]

As far as I know, this was reviewed already and was ready to be published. I don't know why it was brought back to review.

[bsanevans]

Hmm, interesting. Alright, I've gone and published this: https://learn.wordpress.org/lesson-plan/flexbox-in-css-and-wordpress/

Thank you for your contribution 🎉