Thomas Park Hops to Easy CSS Development with Flexbox Froggy – InApps 2025

Main Contents:

Thomas Park Hops to Easy CSS Development with Flexbox Froggy – InApps is an article under the topic Software Development Many of you are most interested in today !! Today, let’s InApps.net learn Thomas Park Hops to Easy CSS Development with Flexbox Froggy – InApps in today’s post !

Key Summary

This article from InApps Technology, published in 2022 and authored by Phu Nguyen, is part of the Open Source Leaders series and profiles Thomas Park, a Drexel University researcher with a Ph.D. in human-computer interaction and computing education. Park’s work focuses on creating engaging educational tools for web development, notably through his open-source projects Bootswatch, Flexbox Froggy, and Grid Garden. Flexbox Froggy is a popular, interactive coding game that teaches CSS Flexbox in a fun, beginner-friendly way, with 2,175 GitHub stars and translations in 25 languages. Bootswatch, with 9,250 GitHub stars and millions of downloads, provides customizable Bootstrap themes, while Grid Garden teaches CSS Grid. Inspired by projects like CSS Diner and his work with openHTML (supported by Drexel, Mozilla, and the National Science Foundation), Park’s projects fill gaps by offering accessible, interactive learning tools for developers. His work is primarily ad-supported, with some consulting revenue.

Context:
- Author: Phu Nguyen, summarizing an interview with Thomas Park for the Open Source Leaders series.
- Theme: Thomas Park creates open-source educational tools like Flexbox Froggy to make CSS learning fun, interactive, and accessible for beginners.
- Source: InApps article, highlighting Park’s contributions to web development education.
Key Points:
- Thomas Park’s Background:
  - Researcher at Drexel University, with a Ph.D. in human-computer interaction and computing education.
  - Part of openHTML, a collaborative project with Drexel, Mozilla, NSF, and University of Nebraska to improve web development education.
  - Began programming at Johns Hopkins University’s Center for Talented Youth, later focusing on educational platforms at Drexel and Mozilla.
- Open Source Projects:
  - Bootswatch (2012):
    - Collection of open-source Bootstrap themes with 9,250 GitHub stars and millions of downloads.
    - 52 contributors; allows easy theme customization by replacing Bootstrap’s CSS file.
    - Fills gap: Provides drop-in solutions for beginners to create attractive interfaces.
  - Flexbox Froggy:
    - A coding game to learn CSS Flexbox, with 2,175 GitHub stars and 40 contributors.
    - Translated into 25 languages, including Esperanto.
    - Fills gap: Offers interactive, fun learning for CSS Flexbox, allowing code tinkering for intuitive understanding.
  - Grid Garden (March 2022):
    - A newer game teaching CSS Grid, with 17 contributors.
    - Similar to Flexbox Froggy, it provides an engaging learning experience.
- Inspiration:
  - Bootswatch: Started as a proof of concept to customize Bootstrap using Less source.
  - Flexbox Froggy: Inspired by CSS Diner and a meeting with its creator, Luke Pacholski, at Mozilla Festival.
- Impact and Monetization:
  - Fills gaps by providing accessible, interactive tools for learning CSS and Bootstrap customization.
  - Monetization: Primarily ad-supported, with some consulting/contracting work; current focus is on expanding Codepip (umbrella for Flexbox Froggy and Grid Garden).
- Broader Significance:
  - Makes web development education approachable, especially for beginners, through gamified learning.
  - Enhances open-source community engagement with significant GitHub contributions.
InApps Insight:
- InApps Technology, ranked 1st in Vietnam and 5th in Southeast Asia for app and software development, specializes in web development and educational tools, using React Native, ReactJS, Node.js, Vue.js, Microsoft’s Power Platform, Azure, Power Fx (low-code), Azure Durable Functions, and GraphQL APIs (e.g., Apollo).
- Offers outsourcing services for startups and enterprises, delivering cost-effective solutions at 30% of local vendor costs, supported by Vietnam’s 430,000 software developers and 1.03 million ICT professionals.
- Relevance: Expertise in web development and CSS frameworks aligns with creating interactive educational tools like Flexbox Froggy for modern learning platforms.
Call to Action:
- Contact InApps Technology at www.inapps.net or sales@inapps.net to develop web development tools or educational platforms inspired by open-source learning solutions.

Read more about Thomas Park Hops to Easy CSS Development with Flexbox Froggy – InApps at Wikipedia

You can find content about Thomas Park Hops to Easy CSS Development with Flexbox Froggy – InApps from the Wikipedia website

The following interview is part of a series, called Open Source Leaders, where we profile project leaders in the open source IT community, to learn more about how they developed their software as well as the challenges and benefits that come with running an open source project.

Thomas Park is a researcher at Drexel University’s College of Computing and Informatics, where he earned a Ph.D. in human-computer interaction and computing education. Park’s academic research is part of openHTML, a collaborative research project — supported by Drexel, Mozilla, the National Science Foundation, and the University of Nebraska — dedicated to designing better educational tools and practices for helping beginners learn web development.

In his free time, Park works on his own open source projects — one of which is Flexbox Froggy, arguably the web’s best, and absolutely most fun, free resource for learning the ins and outs of the CSS3 Flexbox layout mode. Park is driven by the passion to create computer-based learning systems that are approachable, engaging and, above all, effective. InApps caught up with Park to find out more.

Flexbox Froggy is a game Park created as an interactive learning tool for beginners to master CSS3’s Flexbox Layout Module.

How did you get started with programming?

My first job out of college was with the online education department for Johns Hopkins University’s Center for Talented Youth, designing and teaching online math courses. Eventually, though, I became interested in finding ways to improve on the technological platforms that we used there, which led me to grad school at Drexel. While I had done programming here and there before, Drexel is where I went all in with programming as well as researching how others learn to program. This included my thesis work, an internship at Mozilla Foundation, as well as open source side projects like Bootswatch and Flexbox Froggy.

What are some of your open source project stats?

My most popular open source project is Bootswatch, a collection of open-source themes for Bootstrap, which is the web’s most popular development framework. Bootswatch launched in 2012 and has tallied millions of downloads. It has 52 amazing contributors and 9,250 stars on GitHub.

Flexbox Froggy is coding game for learning CSS Flexbox, which has about 2,175 stars on GitHub. More than 40 contributors have localized the game to 25 languages, even including Esperanto. Grid Garden is a new game in the same vein as Flexbox Froggy, which just went up in March of this year. It already has 17 open source contributors.

What inspired you to create these projects?

Bootswatch started over one weekend as a proof of concept on how one could skin the Bootstrap framework to take on very different looks by modifying and rebuilding the Less source. From the onset, it was evident that people found utility in this, so I continued beefing up the collection of themes and maintaining the project, which continues to this day.

Flexbox Froggy was inspired by other learn-to-code games like CSS Diner, and really kicked into gear when I met CSS Diner’s creator Luke Pacholski one year at the Mozilla Festival in London.

You’ve worked really hard to create three very well known, even influential, OS projects. How do you monetize to get some payback for all the time and effort invested?

My projects are primarily ad supported. In the past, I’ve also generated some consulting and contracting work through the projects, although I’m currently more interested in working directly on my projects currently. I’m working to expand on games like Flexbox Froggy and Grid Garden under the banner of Codepip.

Your contributions are popular in part because they seem to neatly fill in some gaps left by existing resources. What needs are they filling?

Bootswatch gives developers Bootstrap a drop-in solution for their Bootstrap-based site or at least a start point for creating a custom theme. Using Bootswatch is extremely easy, as simple as downloading a CSS file and replacing the one that comes with Bootstrap, so even beginners can very quickly put together a well-designed and attractive interface.

While there are plenty of amazing references for CSS Flexbox and CSS grid, Froggy and Garden give people a fun, approachable, and interactive way of learning the basics. The interactivity is important because it allows people to tinker with the code and gain an intuitive feel for how the properties behave.

Source: InApps.net

Rate this post

Phu Nguyen

As a Senior Tech Enthusiast, I bring a decade of experience to the realm of tech writing, blending deep industry knowledge with a passion for storytelling. With expertise in software development to emerging tech trends like AI and IoT—my articles not only inform but also inspire. My journey in tech writing has been marked by a commitment to accuracy, clarity, and engaging storytelling, making me a trusted voice in the tech community.