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