30 Days of CSS Girls

Days 29 ~ 30: Bézier Curves

March 29, 2019

Bézier Curves Ever dreaded about writing ? Great, so did I! Turns out that’s CSS’ attempt to resemble real world physics to its best effort…

Days 27 ~ 28: Water Wave

March 27, 2019

Water Wave Remember that hypnotic background we created on day 11 ? Let’s animate it! Objective Implement the animation for Hypnotic…

Study Notes: Reading CSS Transitions Level 1

March 27, 2019

Original post by tae : Reading CSS Transitions Level 1 #TIL - Reading CSS Transitions Level 1 Introduction new CSS features to enable…

Study Notes: Reading CSS Flex Layout Module 1 - Chapter 7~8

March 26, 2019

Original post by tae : Reading CSS Flex Layout Module 1 - Chapter 7 ~ 8 TIL - Reading CSS Flex Layout Module 1 - Chapter 7~8 Flexibility A…

Days 25 - 26: Flex Item Width

March 25, 2019

Flexbox Item Width So far I haven’t shared with you the “annoying” moments as a front end engineer. One of such moments is dealing with edge…

Days 23 - 24: Flex Navbar

March 22, 2019

Flexible Navigation Bar Creating layouts resilient to different browsers and dimensions is constantly a sweet challenge for front engineers…

Study Notes: Reading CSS Flex Layout Module 1 - Chapter 1~6

March 21, 2019

Original post by tae : Reading CSS Flex Layout Module 1 - Chapter 1 ~ 6 TIL - Reading CSS Flex Layout Module 1 - Chapter 1~6 Overview In…

Days 21 ~ 22: Layout with Grid

March 20, 2019

Nihongo Nikki Let’s leave the fancy stuff for a while and come back to the CSS Grid’s original intention - to create layout. Designers may…

Study Notes: CSS Grid Layout Module 1 - Chapter 7~8

March 19, 2019

Original post by tae : Day 19 ~ 20 Reading CSS Grid Layout Module 1 - Chapter 7 ~ 8 #TIL - Reading CSS Grid Layout Module 1 - Chapter…

Days 19 ~ 20: Grid Patterns

March 18, 2019

Wafu For eyes seeking beautiful matters, and for minds passionate about CSS, seeing kawaii patterns like this in real life just makes you…

Study Notes: CSS Grid Layout Module 1 - Chapter 4~6

March 16, 2019

Original post by tae : Day 17 ~ 18 Reading CSS Grid Layout Module 1 - Chapter 4 ~ 6 #TIL : CSS Grid Layout Module 1 Reordering and…

Days 17 ~ 18: Cards

March 15, 2019

Cards Grids remind me of the old days when CSS was not as powerful as right now, some relatively easy concept took tricks to implement. Like…

Study Notes: CSS Grid Layout Module 1 - Chapter 1~3

March 14, 2019

Original post by tae : Day 15 ~ 16 Reading CSS Grid Layout Module 1 - Chapter 1 ~ 3 #TIL : CSS Grid Layout Module 1 I think type copied…

Days 15 ~ 16: CSS Grid

March 13, 2019

Design Principles, CSS Grid CSS Grid is a thing. For the following few days, let’s work a bit with CSS grids. It’s one dimension more than…

Study Notes: Reading CSS Variables

March 12, 2019

Original post by tae : Reading CSS Variables #TIL CSS Variables Level 1 Introduction Many of the values in the CSS file will be duplicate…

Days 13 ~ 14: Ticket

March 11, 2019

Want to see a Hokusai movie together? So I went to this Hokusai movie the other day. And I thought, what would a ticket designed for The…

Study Notes: Reading CSS Image Values and Replaced Content Module Level3

March 10, 2019

Original post by tae : Reading CSS Image Values and Replaced Content Module Level3 In markdown I wrote, the content is simillar 99% with…

Study Notes: How I Started Reading `mix-blend-mode` and What They Are Creating with It

March 08, 2019

Original post: How I Started Reading mix-blend-mode and What They Are Creating with It by Wei . How I Started Reading and What They Are…

Days 11 ~ 12: Repeating Gradient

March 07, 2019

Hypnotic Background The fact that CSS can be used to generate strikingly beautiful patterns excites me. It sometimes feels slightly out of…

Study Notes: CSS Selectors

March 07, 2019

Original post by swifty_star4 : Understanding about CSS Selectors Understanding about CSS Selectors CSS Selectors Definition CSS selectors…

Study Notes: Reading CSS Pseudo-Elements Module Level 4

March 06, 2019

Original post by tae : Reading CSS Pseudo-Elements Module Level 4 Reading CSS Pseudo-Elements Module Level 4 that’s little bit long spec…

Day 9 ~ 10: CSS Stamp

March 05, 2019

CSS Stamp Edges What’s your inner voice when handed a design that contains stampe edges? I’d say I’m as obssessed as the designers about it…

Contributing

March 04, 2019

Contributing Here’s our GitHub Repo . General Guide to OS Contribution For general guide to contributing to open source project, check out…

Study Notes: Reading CSS Selectors

March 04, 2019

Original post by tae : Reading CSS Selectors Days 7~8 : Reading CSS Selectors I already know almost CSS selector yet, but I decide to read…

Days 7 ~ 8: Seeing the Limit of Drawing with CSS

March 03, 2019

Seeing the Limit of Drawing with CSS I was trying to implement this design this design, Nintendo Switch by Louie Mantia . A few questions…

Study Notes: Transform Establishes Containing Block for Descendants

March 02, 2019

Study notes by Wei , also published here . Establishes Containing Block for Descendants A problem came up when I was trying to draw a…

Days 5 ~ 6: Heart Button

March 01, 2019

Heart Button Let’s create a heart button today. Objectives Create a heart button such as: Original design: Favorites by Yi Jung Lai…

Study Notes: Reading Introduction to CSS 2.1

March 01, 2019

Study notes by tae , also posted here . Reading introduction to CSS 2.1 - Question What are the ways to include stylesheets to webpages…

Study Notes: CSS 2.1

February 28, 2019

Study notes by swiftystar4 , also posted here . CSS 2.1 - #30DaysofCSSGirls What are the ways to include stylesheets to webpages? Inline…

Days 3 ~ 4: Beating Heart

February 27, 2019

Beating Heart Objectives Let’s deepen our knowledge about implementing the heart. We’ll work on a slightly different heart icon, like this…

Day 2: Specs Reading: CSS Snapshot 2018 (Overview)

February 26, 2019

Specs Reading: CSS Snapshot 2018 Welcome to the first day of CSS specs reading. We’ll list out which sections we’re reading for today. And…

Day 1: I Heart You, Coding Girls

February 25, 2019

I Heart You, Coding Girls Today, let’s draw a simple heart. Sorry about the humongous sized picture. If you don’t want to be told the answer…

Guidelines

January 19, 2019

Guidelines Works We’ll publish a challenge on alternate days with our sample provided on Codepen , but you’re free to choose your own…

Hello, Coding Girls (and Guys)!

January 19, 2019

Each day for the next 30 days, you will build a new project in plain, vanilla CSS. With our online tutorial and online Q&A channel, by the…