PotD: Infographic

June 14, 2017

by — Posted in Coding

Today’s project: recreate an infographic.

Today I found an infographic called “5 things beginner programmers need to know,” and after reading another article that suggested that I try replicating other sites to improve my HTML/CSS skills, I decided to start with this one thinking it would be simple enough to start.  I didn’t find the exact fonts, nor did I use the exact colors, but the general look is similar.

For comparison:

Original Photo My Version
infographic found online


  • I figured out that I could use border-radius to make the half circles, but then I had to figure out how to make the divs overlap and make sure that the text boxes would stay the same height as the numbers.  This took most of my trial and error effort because I’d get one aspect working but then the other aspect would change.
  • I used a flexbox to make this a responsive infographic.  It seems to work pretty well until I make the window super duper small…so I may either go back and try to fix that or just keep it in mind for the next one.
  • I added a hover treatment on each of the rules…just for fun.  =)

Check it out!

Leave a Reply

Your email address will not be published. Required fields are marked *