css-exercises
flexboxfroggy
Our great sponsors
css-exercises | flexboxfroggy | |
---|---|---|
17 | 476 | |
1,470 | 6,721 | |
3.7% | - | |
7.6 | 7.0 | |
4 days ago | 22 days ago | |
HTML | JavaScript | |
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.
css-exercises
-
Flexbox Overflows The Viewport Horizontally Even Though The Flex Items Are Supposed To Shrink
Hi! I'm working on this css-exercise from the Odin Project: https://github.com/TheOdinProject/css-exercises/tree/main/flex/07-flex-layout-2 I've basically got the broad strokes in the layout put together. I'm also aware that I need to use flex-wrap to bring the flex items onto the next rows and also know how to finish this up. My question is about something weird I've noticed in the process. **Code Used** codepen.io/Ashwin-Parcha/pen/JjxxJJq **Problem** I've set a width on the cards (.card) that is too wide on purpose at 400px. These cards have default flex values of 0 1 auto. From my understanding, when the flex-basis is auto, the width is considered, but if the total width of the flex items is bigger than the parent, then the width isn't respected and the items will shrink to fit the container. But as you can see, the width **IS** being respected here for some reason. **Expected Outcome** The width shouldn't be respected and cards should shrink. Thanks for your help!
- Should I Be Able to Fork from TOP on GitHub?
- need some help with a flex exercise
-
Can anybody help me with my Css flexbox exercise? It's the my last step to finish a page.
So, to make things clear, I am not asking anyone to help me with homework. I am learning through a free course and we don't receive grades. I am in this course to actually learn. I am almost finished but I am having a few problems. Here is a link to a codepen https://codepen.io/Brayancel/pen/rNZgdLR and here is the exercise I am following https://github.com/TheOdinProject/css-exercises/tree/main/flex/07-flex-layout-2 . The only thing I am not able to achieve is the stretch of the page. The checklist of the exercise says that the footer (the square that says Odin Project <3) is supposed to be pushed lower when the screen is squeezed. But mine does not do that. I really don't know what else to do here. I provided the code so everyone can see that I did.
-
Having trouble with flexbox
How are you getting on with these exercises: https://github.com/TheOdinProject/css-exercises/tree/main/flex ?
-
Help with margin and padding exercise 1 for CSS
Sure. Here is the ReadMe to the assignment details: https://github.com/TheOdinProject/css-exercises/tree/main/margin-and-padding/01-margin-and-padding-1. It is under the "Block and Inline" section of the CSS portion (foundations): https://www.theodinproject.com/lessons/foundations-block-and-inline. It's basically learning about the differences between block and inline and what elements are used.
- “Fork and clone this repository.”
-
help with flex exercise 5
In the desired result (https://github.com/TheOdinProject/css-exercises/tree/main/flex/05-flex-modal), the exclamation point circle has nothing above or below it. That implies it is part of a row of boxes.
-
Transition to move CSS pop-up
I'm trying to do this, but getting absolutely nowhere fast, like literally just about 2 hours of head-scratching and getting frustrated.
- Flex problems
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.
What are some alternatives?
hugo-blox-builder - 😍 EASILY BUILD THE WEBSITE YOU WANT - NO CODE, JUST MARKDOWN BLOCKS! 使用块轻松创建任何类型的网站 - 无需代码。 一个应用程序,没有依赖项,没有 JS
missing-semester - The Missing Semester of Your CS Education 📚
Milligram - A minimalist CSS framework.
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.
blog_os - Writing an OS in Rust
Python-Robocode - A Fork of Robocode for python programming
speedtest - Self-hosted Speedtest for HTML5 and more. Easy setup, examples, configurable, mobile friendly. Supports PHP, Node, Multiple servers, and more [Moved to: https://github.com/librespeed/speedtest]
materials - Bonus materials, exercises, and example projects for our Python tutorials
speedtest - Self-hosted Speed Test for HTML5 and more. Easy setup, examples, configurable, mobile friendly. Supports PHP, Node, Multiple servers, and more
learnxinyminutes-docs - Code documentation written as code! How novel and totally my idea!
curriculum - The open curriculum for learning web development
canvas-tetris - A 2D tetris game in HTML5 canvas