598 update layout prework lesson

[CassandraGoose]

Description of changes made

This PR closes #598

• [x] add codepen so students can better understand the display property
• [x] make sure the lesson adheres to guidelines/values of Turing instructors Motivation for any changes
• I created a codepen per the issue and I designed it so that students spend time observing and answering questions, then get the opportunity to practice
• I added in the opportunity to practice so that all objectives were directly addressed in the lesson.

Questions that you have for a reviewer

• M1 team, is this what you had in mind? Happy to change anything.

[nicktu12]

Looks good to me - awesome codepen!

[sertmer]

I think this looks good too! I see the codepen is under your account, Cass. Maybe we should move it to the FE instructors account?

[CassandraGoose]

I think this looks good too! I see the codepen is under your account, Cass. Maybe we should move it to the FE instructors account?

I agree that we should do that - unfortunately we don't currently have a FE Codepen (see this Slack Thread) I'm not sure what the expected process is to make one... Do you think I can just make one and share the PW with everyone? 😆 I never know how to handle these things

PS - I'm going to do some research to figure out what the process is for this.

[netlify[bot]]

✅ Deploy Preview for sage-cupcake-e1a0c3 ready!

Name	Link
🔨 Latest commit	7b2333ce2ba7b7fe6203ccb12f3af83e8f00931f
🔍 Latest deploy log	https://app.netlify.com/sites/sage-cupcake-e1a0c3/deploys/6442f49d8f45fe0008e33c14
😎 Deploy Preview	https://deploy-preview-673--sage-cupcake-e1a0c3.netlify.app/lessons/module-1/intro-to-layout-prework
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.