CodePen Testing area

OK! So, we’re trying to figure out this CodePen embed module.

On one hand, you have the technical side of making it happen – but then you have the should we – and who is this helping side of things. Test away!

Let us know what YOU think.

Test Pen with only result

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Play around with this to help visualize how display: block and display: inline-block elements behave. You can also toggle between a “reset” and the “user agent style sheet.”

What do you think?

Also, don’t forget you can click the HTML tab to see the code and mess around with it.

Test Pen with HTML and result

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Here is some HTML. What do you think? Would you type in there?

Add an h2, ol, ul, and a details element to try it out.

Example CSS prompt

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Is it weird that you can’t see the HTML pane at the same time? Would you toggle between? What do you think?

Can you make this box appear in each of the 4 corners of its viewport?

Test Pen with JS and result

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Example description would be here. Possible links.

Example of minimal theme

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

asdfadsffasd

Example with styles in the HTML pane

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

hows about this?

Test Pen with css and not editable (no result)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Well, this one is no fun, is it!