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 up 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-hour tutorial. They limit you, and you need to aim for a 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 effects, shadows, animated buttons, and responsive design…
In short, a beautiful and realistic Pokedex!
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 at 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.
Now look at my nice Pokedex: made by a complete beginner in a day, it contains 151 Pokemon inside! 🙂
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
- Positioning of the diverse units. You use the old ways like display block, and absolute/relative positions And combine them with the new ones like flexbox.
- Superposition of units with z-index
- Create a 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 simple things, like a square with a screen on it. Then, you have to add shadows, buttons, push-effects, and gradients. It uses all the features currently used in web design with more and more complexity.
The challenges
- Drawing curves: not easy in CSS. I used z-index to put some rectangles on different planes. Then border-radius to round their angles and create different curves on the Pokedex:
- Triangles: they are quite hard to create on CSS. I found some tricks like creating half transparent/half colored squares:
My little secrets :
- Many lights and shadows are used to give depth, a 3D effect. Then I also used a radial gradient which creates a gradient on a circle to draw a realistic lens :
- 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)
- A shadow inside the green screen is also added to make it more realistic! (box shadow inset).
- The “active” functionality enables one to animate buttons when one clicks on them. it reverses the linear gradient, adds more shadow, and makes the color darker. 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.
- 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 complete, instructive, and fun training. It allows you to use all the features used in CSS today. Next challenge: drawing Pokemon in CSS! 😉
You can find the project on Github: https://github.com/bloodstorms/bloodstorms.github.io
Want a better challenge? Try making a Pokemon in full CSS!
If you are looking for a cooler 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?
