🐸 FLEXBOX FROGGY https://flexboxfroggy.com/#ja 📙 Table of Contents0:00 Introduction to the game "FLEXBOX FROGGY"1:15 Introduction to the MDN reference for flexbox1:47 Lv.1 justify-content ① 3:06 Lv.2 justify-content ② 3:52 Lv.3 justify-content ③ 4:45 Lv.4 justify-content ④ 5:43 Lv.5 Learn how to move along the vertical axis with align-items6:32 Lv.6 Centering with align-items and justify-content7:17 Lv.7 Combination of align-items and justify-content7:46 Lv.8 Reverse the axis with flex-direction8:46 Lv.9 Make it vertical along the axis with flex-direction9:22 Lv.10 Combination of flex-direction and justify-content ① 10:55 Lv.11 Combination of flex-direction and justify-content ② 11:57 Lv.12 Combination of flex-direction and justify-content ③ 12:39 Lv.13 Combination of flex-direction, align-items, and justify-content13:49 Lv.14 Change the order with order ① 15:26 Lv.15 Change the order with order ② 16:01 Lv.16 Move the frogs individually with align-self17:09 Lv.17 Combination of order and align-self18:12 Lv.18 Introducing how to wrap with flex-wrap19:19 Lv.19 Combination of flex-direction and flex-wrap20:19 Lv.20 Introducing flex-flow shorthand21:31 Lv.21 align-content ① 23:09 Lv.22 align-content ② 23:26 Lv.23 Combination of flex-direction and align-content 24:22 Lv.24 Final problem: A compilation of what we have learned so far 27:03 Ending screen, summary 🚀 Today's message Today's CSS lesson is about flexbox. By learning "display: flex" and its associated properties, you can build almost any layout. There are layouts that use float, grid, etc., but flexbox is mostly used in the field. This time, we will introduce the game "FLEXBOX FROGGY" that teaches flexbox. You can learn the theory in a fun way by using this. It is recommended for those who have learned programming by themselves but want to learn it again, beginners, and budding engineers. 🔥 Introduction to CSS that learns properly from the basics! [1st time] Let's learn basic syntax! • [CSS #1] Introduction to CSS that learns properly from the basics! Let's learn basic syntax! [... [2nd time] Let's dig deeper into properties! • [CSS #2] Introduction to CSS, learning from the basics! A deep dive into properties... [Part 3] You can learn all about selectors with just this course! • [CSS #3] Introduction to CSS, learning from the basics! You can learn selectors with just this course... [Part 4] When styles don't work, it's usually because of cascade, specificity, or inheritance! • [CSS #4] Introduction to CSS, learning from the basics! When styles don't work... [Part 5] The box model is something you should always keep in mind when writing CSS • [CSS #5] Introduction to CSS, learning from the basics! The box model is... [Part 7] A thorough explanation of how to use the flex property of flexbox • [CSS #7] Introduction to CSS, learning from the basics! You can learn how to use flexbox... 👨‍💻 About meI used to work as a programmer at Yahoo Japan Corporation! I'm currently developing a new service as an entrepreneur! If you're interested in the following, please subscribe to my channel!・IT industry, web, programming courses ・Remote work, working from home, side job ・Startup, venture, manager, CEO 🌏 SNS Twitter: / shimabu_it TikTok: / shimabu_it 🏷️ Tags #CSS #flexbox #flex