CodePen is a browser-based code-sharing platform for front-end web designers and developers. It is great for inspiration, education, and sharing code. You can quickly and easily conduct tests, show off your latest creations and get feedback from your peers, and find coded examples of design patterns.
Codepen Links
- Codepen.io
- Instructor’s pens (kccnma)
- Some instructor pens to check out:
- Learning Exercises:
- Intro to HTML Exercise – Test without Markup
- Normal Flow: Block and Inline level elements
- Exercise: Simple Horizontal Centering
- Exercise: Simple Horizontal and Vertical Centering with Flexbox
- Box Model and Box Sizing
- Base Typography with a Traditional Typographic Scale
- Example Typographic Specimen
- Intro to Divs (Div Test) Exercise
- CSS Positioning Test: Inline-Blocks
- Intro to CSS Exercise – Simple HTML web page with base CSS
- Design Pattern Examples:
- Buttons
- Simple Header
- Custom Numbered List: Circled Numbers
- Custom Numbered List: Stacked Oversized Numbers
- Layout Example: Media/Post Objects List – Different Variations
- Layout Example: Media/Post Objects List – CSS Grid w/ Flexbox Fallback
- Accordion – via Detail + Summary Elements with Added Styling
- Animated Gradient Background Colors
- Fun Stuff:
- Learning Exercises: