Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Jia Qian swiftystar4

🎯
Focusing
View GitHub Profile
@swiftystar4
swiftystar4 / day-17-cards-30daysofcssgirls.markdown
Last active Apr 12, 2019
Day 17 - Cards #30DaysOfCSSGirls
View day-17-cards-30daysofcssgirls.markdown

Day 17 - Cards #30DaysOfCSSGirls

Inspired by Cards Against Humanity. I played with my friend and his group of friends at my friend's birthday like last 2 years ago. It was such a cool and fun experience to play in the group. It sounded irony and rude description to some of the players out here. Just don't feel offended #30DaysOfCSSGirls

A Pen by Jia Qian Koh on CodePen.

License.

@swiftystar4
swiftystar4 / day-15-css-grid-30daysofcssgirls.markdown
Last active Apr 22, 2019
Day 15 - CSS Grid #30DaysOfCSSGirls
View day-15-css-grid-30daysofcssgirls.markdown

Day 15 - CSS Grid #30DaysOfCSSGirls

Inspired by Hvala – Japanese Cafe & Teahouse at Chijmes. They served different types of Tea and Desserts inside Cafe & Teahouse. It looks quite a similar style to Japan Cafe in the Kyoto Area. I do appreciate tea brew and desserts in the Japanese Cafe. #30DaysOfCSSGirls

A Pen by Jia Qian Koh on CodePen.

License.

@swiftystar4
swiftystar4 / CSSGrid4.md
Last active Mar 28, 2019
Understanding about CSS Grid Module 4 - #30DaysofCSSGirls
View CSSGrid4.md

Understanding about CSS Grid Layout Module 4 - #30DaysofCSSGirls

CSS Grid Part 4 - Chapter 9 to 12

Absolute Positioning

With a Grid Container as Containing Block

  • Contain block links to the grid area determined by its grid-placement properties
  • Offset properties (top/right/bottom/left) indicate offsets inwards from the corresponding edges of the containing block
@swiftystar4
swiftystar4 / CSSGrid3.md
Last active Mar 26, 2019
Understanding about CSS Grid Module 3 - #30DaysofCSSGirls
View CSSGrid3.md

Understanding about CSS Grid Layout Module 3 - #30DaysofCSSGirls

CSS Grid Part 3 - Chapter 7 to 8

Define Grid

Explicit Grid

  • Properties
    • 'grid-template rows'
@swiftystar4
swiftystar4 / CSSGrid2.md
Last active Mar 23, 2019
Understanding about CSS Grid Module 2 - #30DaysofCSSGirls
View CSSGrid2.md

Understanding about CSS Grid Layout Module 2 - #30DaysofCSSGirls

CSS Grid Part 2 - Chapter 4 to 6

Reorder

  • Rearrangement over the Document
  • Don't affect ordering in non-visual media (e.g. Speech)
  • Doesn't affect the default traversal order of sequential navigation modes
@swiftystar4
swiftystar4 / CSSGrid1.md
Last active Jul 11, 2019
Understanding about CSS Grid Layout Module 1 - #30DaysofCSSGirls
View CSSGrid1.md

Understanding about CSS Grid Layout Module 1 - #30DaysofCSSGirls

CSS Grid Part 1 - Chapter 1 to 3

Introduction to Grid Layout

  • New Layout Model for CSS
  • Control Size and Position for the boxes and contents
  • Optimized for 2D Layouts and Alignment
  • Control the space for layout of its contents through use of Grid (Horizontal, Vertical Lines)
@swiftystar4
swiftystar4 / CSSVariable.md
Last active Jul 11, 2019
Understanding about CSS Variable - #30DaysofCSSGirls
View CSSVariable.md

Understanding about CSS Variable - #30DaysofCSSGirls

CSS Variable Level 1

'--'* family of properties - Custom Properties

Custom Properties

  • Define the substitution value of 'var()' functions
  • Define any valid ID that starting with two dashes
View day-9-coupons-30daysofcssgirls.markdown

Day 9 - Coupons #30DaysOfCSSGirls

Change one of your favourite images from into Coupons Collection. As anyone wants to be a Coupons collector, anyone must be love to collect a lot of Coupons from everywhere and also every bit of Coupons has own story to share with everyone to know behind the scenes for the creation of the Coupons.

A Pen by Jia Qian Koh on CodePen.

License.

@swiftystar4
swiftystar4 / day-13-classic-movie-ticket-30daysofcssgirls.markdown
Created Mar 16, 2019
Day 13 - Classic Movie Ticket #30DaysOfCSSGirls
View day-13-classic-movie-ticket-30daysofcssgirls.markdown

Day 13 - Classic Movie Ticket #30DaysOfCSSGirls

To reminisce with watching old school movies, I have a good chance to design and share an old version of movie tickets. It's great to reminisce about the evolution of the movie tickets from past to present design of the tickets.

A Pen by Jia Qian Koh on CodePen.

License.

View day-9-stamps-30daysofcssgirls.markdown

Day 9 - Stamps #30DaysOfCSSGirls

Change one of your favourite images from into Stamp Collection. As anyone wants to be a stamp collector, anyone must be love to collect a lot of Stamp from everywhere and also every bit of Stamp has own story to share with everyone to know behind the scenes for the creation of the Stamp.

A Pen by Jia Qian Koh on CodePen.

License.