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

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-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