August 19th: Special Edition - Sponsored by Monday.com
Creating Lined Paper
Emily Gagne shares a beginner-friendly tutorial for how to create lined paper (with the text lined up right) with HTML & CSS.
The History of Tea
kannkyo creates an interactive timeline of the history of tea with Knight Labs' StoryMap.js.Sponsored:
A Project Management Tool Built for Teamwork
Monday.com helps you plan, manage, and track even the most complex projects. Collaborate and communicate with your team all in one place.
BabylonJS - Fisheye on Scroll
Scroll the page and hover the images to see some WebGL magic from Francesco Michelini. "All the images and text are rendered in a single WebGL canvas below the page content."
#CodePenChallenge: Navigation with Sub-Nav
The prompt from week two of August's "Fork This!" challenge was navigation with sub-navigation. Check out the Pens from week two, including Alex Goff's Earthbound-themed nav menu!
Plan, Manage, and Track with Ease
Map out key milestones, prioritize, assign work, set deadlines and get automated notifications. It's a flexible tool so you can change and customize anything, any time.
Per Byhring demonstrates the beauty of recursion in this interactive Pen. Adjust the sliders to change each iteration and watch the shape change along with it.
CSS Only - Fan Animation
Cool off with this playful animated scene from Amin Moslemi.
Opening Bar Reveal Text
jpbelley shares a striking text reveal built with CSS animation and a dash of JS.
A wild bundle of threads gradually resolves into a shape in this mesmerizing animation from ycw, built with Babylon.js.
Footer Always at the Bottom - Flexbox
Ananya Neogi shares a flexbox solution for the age-old front-end problem: how do you keep the footer at the bottom when the page doesn't have enough content to fill the screen?
Jon Kantner pays tribute to early Minecraft with "an attempt to create a dumbed-down clone...programmed to the standards of the very first version (known as “Cave Game”)". Check out the Pen description for the controls and how to play.
Input Group :focus-within
Aaron Iker demonstrates the power of :focus-within for forms with a pleasing highlight on the focused field.