cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Blogging

Blogging is such a huge part of the web. What was once a niche phrase is now widely known and for good reason! Blogging is just writing on the web. A blog is just a place with published articles. In a sense, you could call just about any publication on the web a blog.

Since so many of us have blogs of our own, or have found ourselves in one way or another designing a blog, let's use this as a theme this month. Each week we'll have a challenge prompt for some element of a blog that typically needs designing.

To participate: Create a Pen → and tag it codepenchallenge and the weekly tag. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

This challenge's tag: cpc-menus

Menus

Menus are such a ubiqutious need for websites they are hard to even talk about as a pattern. They are a million ways to do them, from the simple and mundane to the exotic and interactive. They stand between your users and your content though, so you have to do it right. Let's have a play at designing a menu this week.

Your challenge: take this Pen and style the menu.

Ideas

  1. Notice the nested lists in these menus. Which way are you going to take it? Display all the items all the time, or make it interactive with some way to reveal the sub menus?
  2. Menus these days have the unique challenge of needing to accomodate both huge and tiny screens. Can you make this menu work both ways?
  3. The unstyled Pen is incredibly boring as-is. Is there some way to make it even more boring?

Resources

You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. Here's some resources they recommend:

  • Have you seen the :focus-within CSS selector? It might be able to help.
  • There are a number of official CodePen Patterns collections that you can reference, like menu icons, tabs, and dropdown menus. Notice on that Patterns page how there are three ways to browse: the collection, search, or the tag.
  • CSS play has literally hundreds of menus check out.
Menu
This challenge's tag: cpc-figures

Figure & Figcaption

Images are a staple in blog posts. They provide context, break up the text, and draw eyeballs. It's often useful to be able to set some text right beside an image, and the semantically appropriate HTML for that is the figure and figcaption tags. This is a bit of a throwback to last month's HTML buddies!

Your challenge: design a beautiful and/or unique figure and figcapation pairing.

Ideas

  1. There normally isn't much interactivity to a figure/figcaption, but could there be? Should there be?
  2. Incorporate your figure/figcaption design into a larger context. Perhaps variations on design and placement. Maybe last weeks typesetting challenge could provide a home.
  3. Images can be such a challenge for front end developers these days. Maybe this is a good excuse to play with technologies like responsive images, alternate image formats, or lazy loading.

Resources

You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. One example of that is how much Jetpack can do with your images. With the flip of a switch you can host your images on a CDN! Here's some resources they recommend:

  • Did you know you aren't limited in any way to using multiple images within the figure? That's covered in Richard Clark's HTML5 Doctor article.
  • Searching around right here on CodePen might stir up some ideas.
  • Looking at the almighty MDN, there is an interesting fact noted that the figcaption must be the first or last child. Hmmmmm.
Blogging figcaption
This challenge's tag: cpc-typeset

Typesetting a Blog Post

Typesetting, the act of selecting and setting type, can be a challenging job on the web. But also a fun one! The web is a typographic medium. That is to say the web is absolutely covered in type and there is opportunity abound to do it well. Perhaps one of the most fun typographic challenges is the setting of a blog post. Headers, paragraphs, quotes, lists... there is a lot there to balance, make readable, and explore aesthetics.

Your challenge: take this blog post and typeset it.

Ideas

  1. There are no real rules to CodePen Challenges, but this challenge might be fun if you give yourself the boundary of not touching the Markdown of the blog post at all. CSS only!
  2. How might JavaScript get involved with typsetting? Well, their are straight up typesetting libraries like Typography.js. Then there are libs like Typeset.js that preprocess HTML to correct typographic details. Or FlowType.js for sizing type responsively.
  3. How could you turn this challenge on it's head? Can you make the blog post barely readable somehow? Or have a reading experience that is completely unexpected?

Resources

You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. One feature of Jetpack is that it offers Markdown support for all your content in WordPress. Just flip it on and all your posts, pages, and even comments are in Markdown. Here's some resources Jetpack recommends:

Blogging typesetting
This challenge's tag: cpc-cards

Cards

Cards are a staple design pattern in so many content-based sites. They might even be the primary pattern for displaying articles for the browsing user. They are an important pattern not only because of how common they are, but because they need to support variety and be resilient to vastly different content.

Ideas

  1. A card is a perfect "component". The idea of a component is that it is a data-driven and repeatable piece of UI. You could explore a variety of different JavaScript frameworks (think React, Angular, Vue) and build a card component in them.
  2. Search around Dribbble for article card designs. Are they up for the job of dynamic data? Can you make them responsive?
  3. As useful and practical as card designs are, what could you do to make them less boring? Could you evoke a deck of cards? Could they have an interesting interaction or animation? How weird can you get with them?

Resources

You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. One cool thing Jetpack can do is power your "Related Posts", which are, of course, a card design!

Blogging card