21.07.2016

Learning CSS in a day ? Easy ! Build a Pokedex.

Unless you live in a cave, you must have heard about the Pokemon Go madness the past few weeks. It gave my team an idea. To create a Pokedex in CSS to train newcomers.

Pokemon Go players

Here is how I practice CSS.

I’m a new dev at Toucan Toco. Here we create dashboards and dataviz apps. I learned how to code by myself a few months ago, and I needed to catch on CSS quickly to make good looking charts.

When you learn a new language, you usually focus only on the main features and on what you think you need to know, but you know nothin’ Jon Snow ! Also, no one wants to watch a 24 hours tutorial… The thing is: it limits you, and you need to aim for an higher goal, in order to surpass yourself.

To learn CSS in a funny and complete way, my mentor gave me the best exercise : create a Pokedex in CSS. Only CSS. And not a poor, flat Pokedex. He asked for 3D effect, shadows, animated buttons, responsive design…

A beautiful and realistic pokedex, in short !

For someone who has been coding for 1 or 2 months, it’s quite a big challenge. CSS is not the first tool you would think about to design that kind of thing ! Svg or canvas would have come to mind first. But it’s the best training you can ever get.

At first you will use basic features of CSS, then it gets incrementally harder as you become better in CSS. You’ll learn a lot of useful tricks to build some details of the pokedex, like using simple div tags to draw different shapes.

challenge accepted gif

Now look at my nice Pokedex: made by a complete beginner in a day, it contains 151 Pokemons inside! 🙂 (the link is on the picture)

Pokedex Toucan Toco

What you learn when you build a Pokedex :

Here are the various features you’re gonna have to use to build a nice Pokedex in CSS :

  • Drawing different shapes : circles, squares, rectangles, triangles.
  • Shadows, to create volume and 3D effect
  • Color gradient, to create more depth and 3D effect
  • Positionning of the diverse units. You use the old ways like display block, absolute/relative positions And combine them to the new ones like flexbox.
  • Superposition of units with z-index
  • Create push-button effect, thanks to on active/on focus
  • responsive design with media query : the pokedex is closed on mobile or in a reduced window!

Building a Pokedex is a great exercise. At first you just have to create the simple things, like a square with a screen on it. Then, you have to add shadows, buttons, push-effect, radients It uses all the features currently used in webdesign with more and more complexity.

The challenges

  • Drawing curves : not easy in CSS. I used z-index to put some rectangles at different plans. Then border radius to round their angles and create different curves on the Pokedex:curves pokedex
  • Triangles : they are quite hard to create on CSS. I found some tricks like creating half transparent/half colored squares:triangle pokedex

My little secrets :

  • Many lights and shadows are used to give depth, 3D effect. Then I also used radial gradient which creates gradient on a circle, to draw a realistic lens :lens pokedex
  • A volume effect is given to buttons thanks to a linear gradient. It is also used on the green screen and the joint in the middle of the pokedex.
  • Shadows are added to the shapes of the objects to create more 3D effect (box shadow)button pokedex
  • A shadow inside the green screen is also added to make it more realistic ! (box shadow inset).screen pokedex
  • The “:active” functionnality enables to animate buttons when one clicks on it. it reverses the linear gradient, adds more shadow and makes darker the color. Thus it seems like the button is pushed.
  • Also, the Pokedex is responsive : if you reduce the size of the window, or open it on a small device, it closes !colsed pokedex

As a last touch, I added a little bit of Javascript to allow the scrolling of different Pokemons on the Pokedex’s screen.

 

After all, building a Pokedex in CSS is a complete, instructive and funny training. It allows you to use all the features used in CSS today. Next challenge: drawing Pokemons in CSS! 😉

PS : Click the red button ! You’ll have a surprise if you find Pikachu… 😉

You can find all the project on Github: https://github.com/bloodstorms/bloodstorms.github.io

Want a better challenge ? Try making a Pokemon in full CSS!

I am looking for more cool way to learn new languages. Check out at this guy, he made all the world’s flags in CSS ! http://flag-icon-css.lip.is/

And you ? What are your favorite ones ?

Tiffany

à lire aussi