Learn CSS Selectors While Preparing Bento Boxes

Muggle-born
2 min readMar 15, 2022
unselected bento boxes and an empty plate, all on a table

Hands-on learning is a form of education in which students learn by doing. Specifically, hands-on learning allows students to learn through experiencing something and can give them an opportunity to immerse themselves in a learning environment, while putting their acquired skills to use and building new skills.

Hands-on learning is important for programming

I believe hands-on learning is an essential part of becoming a better programmer and learning new things. Solely relying on: books; online courses; and articles. Without regards to interactive/hands-on material could be holding you back.

Pause and ask yourself: how many times have you read a blog, watched a youtube tutorial, or took an online course with no interactive material? After reading/watching that content, how many times have you forgotten the very fundamentals of the content you had just consumed?

If you’re anything like me, your answer will be “too often”. For me, I find hands-on learning helps me remember concepts, ask more questions, and discover things more easily. This is why I’ve dedicated a whole blog to http://cssdiner.com

Making bento boxes

CSS Diner is a fun free game to learn and practice CSS selectors. The game includes over 30 levels of increasingly difficult CSS selectors quizzes, where you are challenged to position various food items in their correct location. The website requires no sign-up and has an interactive CSS editor for you to type your answers in to. What are you waiting for, go see if you can pass all 32 levels!

Note: everyone learns and processes information differently. Hands-on learning may not be as affective for you as it is for me.

--

--

Muggle-born

Hi, my name is Jeremiah. I build things on the web for fun. I enjoy figuring how and why things work the way they do, and I try teaching others along the way.