CSS::anything — an imersive and reactive CSS training
CSS::anything is an imersive and reactive CSS training which aims to deepen and uncover CSS concepts through the cration of pens at CodePen.
In this training, we show to students that CSS concepts can be learned in a different and creative way, in addition we work on how to abstract the layout for the code.
The first training of CSS anything lasted 3 days and was taught from July 3 to 5 by me and Felipe Bernardes at technological update week of Fatec Sorocaba, with a small group of students with basic CSS knowledge.
We started with a small challenge that we called Bauhaus Challenge. Bauhaus said that all the drawings started from the three basic forms. We wanted to bring this kind of abstraction so that the students could understand that to create great things, we must see the basic forms.
Then we released version 2 of the Bauhaus Challenge: repositioning the elements on the screen, leaving it free for the students to position in the way they thought best, but we reviewing positioning concepts using floats and flexbox.
After that, we introduced Dribbble to the students and showed how to seek for inspiring drawings and UIs to implement using CSS.
From there, the students who challenged themselves, they could choose what they would like to implement and we as instructors only helped them with the abstraction and answered implementation doubts as they arose —thats what made the course reactive.
Whenever the doubts were related to fundamental concepts, we explained the whole room, among them we taught: positions CSS, display, transitions, effects and animations. For specific cases doubts, we just gave individual directions and tips to help them.
The pens created by the students were fantastic and can be founded in this repository, it was amazing to see their evolution over the training of days.
This was a bit of what happened during the 3 days of CSS anything, an immersive and reactive training, where students tested their limits, were surprised, overcame and discovered that it was possible to implement anything with CSS.
You can find the material of this training here.
