30 Days of CSS Girls
Days 29 ~ 30: Bézier Curves
March 29, 2019Bé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, 2019Water 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, 2019Original 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, 2019Original 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, 2019Flexbox 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, 2019Flexible 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, 2019Original 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, 2019Nihongo 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, 2019Original 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, 2019Wafu 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, 2019Original 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, 2019Cards 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, 2019Original 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, 2019Design 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, 2019Original 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, 2019Want 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, 2019Original 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, 2019Original 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, 2019Hypnotic 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, 2019Original 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, 2019Original 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, 2019CSS 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, 2019Contributing 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, 2019Original 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, 2019Seeing 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, 2019Study 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, 2019Heart 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, 2019Study 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, 2019Study 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, 2019Beating 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, 2019Specs 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, 2019I 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, 2019Guidelines 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, 2019Each 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…