flexboxfroggy
beercss
flexboxfroggy | beercss | |
---|---|---|
477 | 32 | |
6,756 | 982 | |
- | - | |
6.7 | 7.8 | |
2 months ago | 10 days ago | |
JavaScript | Vue | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
flexboxfroggy
-
React Nativeโs Flexbox: A Visual Guide
Flexbox Froggy: A game that teaches Flexbox concepts by positioning frogs on lily pads.
-
100+ FREE Resources Every Web Developer Must Try
Flexbox Froggy: Learn CSS Flexbox by playing this game.
-
21 Resources to Learn And Practice Your CSS Skills
Flexbox is an important topic of CSS and you can learn it by playing a game called Flexbox Froggy. You can easily learn the properties of Flexbox while having some fun.
-
i need a help 2 fix my page of my neocities webzite
See https://flexboxfroggy.com/ https://cssgridgarden.com/ and maybe also https://flukeout.github.io/
- An Interactive Guide to CSS Grid
-
Best Resources For Web Developers ๐ป [HTML + CSS + JavaScript]
Flexbox Froggy - An interactive game to learn and practice CSS Flexbox. Website: https://flexboxfroggy.com/
-
The cutest tools to practice CSS ๐ง
Flexbox Froggy
- Hi, could anyone help me wrap my head around flexbox? I'm trying to get a layout like this but I just can't seem to understand how to properly use flexbox.
-
CSS Is, in Fact, Awesome
This started improving for me recently when I spent more time really learning flexbox and flexgrid. They are part of CSS so no installs needed. Itโs a different way of thinking but Iโm finally good enough with flexbox that I can tell when I need it and make productive use of it. Knowing these patterns makes a difference for me, since now I can assemble the blocks better than before when Iโd just try mostly random css without any guiding principles.
Flexbox froggy helped a lot with some practical experience that translated fairly well to my regular work.
https://flexboxfroggy.com/
There are other games like this that I havenโt gotten to yet, including one for flexgrid. Once I clear all the levels in flexbox froggy Iโm going to try the flexgrid game.
Then after that Iโm going to spend time with bootstrap and tailwind since the last time I really used them was back in my more junior days when I barely knew anything at all about css.
-
Day 64: CSS layouts
Flexbox Froggy is an excellent resource for interactive learning.
beercss
-
Main layouts - Beer CSS Tips #4
Beer CSS: https://www.beercss.com
-
RiotJS Routes
We aim to create the following app: a left drawer displaying links to different pages, and when a click happens on a link, the right section prints the corresponding page. The style is powered with the Material Design CSS BeerCSS:
-
Button Component with RiotJS (Material Design)
These articles form a series focusing on RiotJS paired with BeerCSS, designed to guide you through creating components and mastering best practices for building production-ready applications. I assume you have a foundational understanding of Riot; however, feel free to refer to the documentation if needed: https://riot.js.org/documentation/
-
Input Component with RiotJS (Material Design)
This article covers how to create an Riot input component, using the Material Design CSS BeerCSS. Before starting, make sure you have a base application running, or read my previous article Setup Riot + BeerCSS + Vite.
-
RiotJS Material Design (how to setup BeerCSS)๐ป
Building Material Design application with RiotJS is pretty easy with BeerCSS, before starting, make sure you have created a Riot project running with Vite: https://dev.to/steeve/riotjs-vitejs-tutorial-fpn
- The classless and class-light CSS aproaches
- Beer CSS โ A Material Design 3 web framework converted to HTML semantic standard
-
Top Material Design 3 web frameworks of 2024
๐ https://www.beercss.com
-
Tips to avoid legacy growth in your large scale web system (for frontend)
This is a very current point. Instead of having components for everything, why not directly use semantic HTML? You can have dialogs, buttons, cards among others, writing clean and unified HTML throughout the system. As semantic HTML is part of the web platform, it is independent of any framework/ecosystem, so you open up the range of options to use anything on your system. It's a blank page, ready to be colored however you want. I recommend a class-light approach as done at https://www.beercss.com. There are others too, just google it.
- A class-light CSS approach, let me introduce Beer CSS
What are some alternatives?
missing-semester - The Missing Semester of Your CS Education ๐
daisyui - ๐ผ ๐ผ ๐ผ ๐ผ ๐ผ โThe most popular, free and open-source Tailwind CSS component library
layoutit-grid - Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.
vuetify - ๐ Vue Component Framework
Python-Robocode - A Fork of Robocode for python programming
hello-world - Share Something useful related to Life and tech.
materials - Bonus materials, exercises, and example projects for our Python tutorials
Propeller - Propeller - Develop more, Code less. Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.
learnxinyminutes-docs - Code documentation written as code! How novel and totally my idea!
nextui - ๐ Beautiful, fast and modern React UI library.
30-Days-Of-JavaScript - 30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
rasam - A Privacy focused and Offline enabled Feed Reader PWA with Nuxt, Nuxt PWA, Dexie