css-for-js
각 모듈 폴더 안에 본인의 이름으로 하위 폴더를 생성
Module 0: Fundamentals Recap
All of us have gaps in our knowledge. This lightning-quick review of the fundamentals will make sure we're all starting with the same rock-solid foundation.
~ 10/23
대주제 | Basix | BH | DJ(Zu Zu Zu Zu) | HYESECH | XiNiHa | yell | |
---|---|---|---|---|---|---|---|
Introduction | |||||||
Anatomy of a Style Rule | |||||||
Media Queries | |||||||
Selectors | |||||||
Pseudo-classes | |||||||
Pseudo-elements | |||||||
Combinators | |||||||
Exercises | |||||||
Color | |||||||
Units | |||||||
Typograpy | |||||||
Debugging in the Browser |
Module 1: Rendering Logic I
Flow layout is the “OG” layout algorithm of the web, and it's still used heavily today. In this module, we explore how to best use Flow layout in modern times. We'll also deepen our understanding of common fundamentals like the Box Model.
~ 11/06
대주제 | Basix | BH | DJ(Zu Zu Zu Zu) | HYESECH | XiNiHa | yell | |
---|---|---|---|---|---|---|---|
Built-in Declarations and Inheritance | |||||||
The Cascade | |||||||
Directions | |||||||
The Box Model | |||||||
Padding | |||||||
Border | |||||||
Margin | |||||||
Flow Layout | |||||||
Width Algorithms | |||||||
Height Algorithms | |||||||
Margin Collapse | |||||||
Rules of Margin Collapse | |||||||
Will It Collapse? | |||||||
Using Margin Effectively | |||||||
WorkShop: Agency page | |||||||
Solution |
Module 2: Rendering Logic II
To understand CSS, we need to understand its systems. In this module, we dive deep into positioned layout to understand how containing blocks and stacking contexts work. We'll also learn about managing overflow and visibility.
~ 11/20
대주제 | Basix | BH | DJ(Zu Zu Zu Zu) | HYESECH | XiNiHa | yell | |
---|---|---|---|---|---|---|---|
Relative Positioning | |||||||
Absolute Positioning | |||||||
Centering Trick | |||||||
Containing Blocks | |||||||
Containing Puzzle | |||||||
Exercises | |||||||
Stacking Contexts | |||||||
Managing z-index | |||||||
Portals | |||||||
Fixed Positioning | |||||||
Overflow | |||||||
Horizontal Overflow | |||||||
Positioned Layout | |||||||
Sticky Positioning | |||||||
Exercises | |||||||
Troubleshooting | |||||||
Hidden Content | |||||||
WorkShop: Character Creator | |||||||
Solution |
Module 3: Modern Component Architecture
Over the past few years, an explosion of ideas and tools have made CSS much easier to work with at scale. In this module, we'll peek our head into this wild new world, and learn how to make the most of it.
~ 12/04
대주제 | Basix | BH | DJ(Zu Zu Zu Zu) | HYESECH | XiNiHa | yell | |
---|---|---|---|---|---|---|---|
Problems and Solutions | |||||||
Ecosystem World Tour | |||||||
Styled-components 101 | |||||||
Installation and Setup | |||||||
Performance | |||||||
Exercises | |||||||
Global Styles | |||||||
Dynamic Styles | |||||||
Exercises (pt. 2) | |||||||
Component Libraries | |||||||
Breadcrumbs | |||||||
Button | |||||||
Dynamic tags | |||||||
Escape Hatches | |||||||
Single Source of Styles | |||||||
In Summary | |||||||
WorkShop: Mini Component Library | |||||||
ProgressBar | |||||||
Select | |||||||
IconInput |
Module 4: Flexbox
When it was released a decade ago, Flexbox revolutionized layout on the web. It gave us a cohesive system for distributing items along an axis. In this module, we'll learn how to build sophisticated, adaptive layouts using Flexbox.
~ 12/18
대주제 | Basix | BH | DJ(Zu Zu Zu Zu) | HYESECH | XiNiHa | yell | |
---|---|---|---|---|---|---|---|
Hello Flexbox! | |||||||
Directions and Alignment | |||||||
Alignment Tricks | |||||||
Growing and Shrinking | |||||||
The "flex" Shorthand | |||||||
Constraints | |||||||
Shorthand Gotchas | |||||||
Wrapping | |||||||
Groups and Gaps | |||||||
Ordering | |||||||
Flexbox Interactions | |||||||
Recipes | |||||||
WorkShop: Sole&Ankle | |||||||
Solution |