Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Jia Qian swiftystar4

🎯
Focusing
View GitHub Profile
View day-1-confession-30daysofcssgirls.markdown

Day 1 - Confession #30DaysOfCSSGirls

Confession towards one-sided love that anyone didn't want to let the person know about your feelings. I pity that person and hope this message that can reach out towards that person. Just don't hurt anyone's feelings and feelings extremely fragile and precious.

A Pen by Jia Qian Koh on CodePen.

License.

@swiftystar4
swiftystar4 / day-3-beating-heart-30daysofcssgirls.markdown
Last active Mar 3, 2019
Day 3 - Beating Heart #30DaysOfCSSGirls
View day-3-beating-heart-30daysofcssgirls.markdown

Day 3 - Beating Heart #30DaysOfCSSGirls

The beating heart shows you no matter what and stay strong how you can be. I wanna make beating heart the best of what is left hold tight. Just hold on my heart, it's beating for you anyway and don't letting my beating heart go.

A Pen by Jia Qian Koh on CodePen.

License.

View day-7-nintendo-switch-30daysofcssgirls.markdown

Day 7 - Nintendo Switch #30DaysOfCSSGirls

Implementation of Nintendo Switch Design (in another short ver)

A Pen by Jia Qian Koh on CodePen.

License.

@swiftystar4
swiftystar4 / day-5-likely-heart-30daysofcssgirls.markdown
Last active Mar 11, 2019
Day 5 - Likely Heart #30DaysOfCSSGirls
View day-5-likely-heart-30daysofcssgirls.markdown

Day 5 - Likely Heart #30DaysOfCSSGirls

"She wears all back just like her soul, yet her heart is made of gold." "I am insane but my intentions are gold and my heart is pure like water."

A Pen by Jia Qian Koh on CodePen.

License.

@swiftystar4
swiftystar4 / model.md
Last active Mar 11, 2019
Understanding about Box Model and Visual Formatting Model - #30DaysofCSSGirls
View model.md

Understanding about Box Model and Visual Formatting Model - #30DaysofCSSGirls

What are content box, margin box, border box, padding box, respectively?

  1. Content Box - Content of the box where text and images appeared on.

  2. Margin Box - Clears an area outside the border.

  3. Border Box - Border of the box covers around the padding and content

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.

@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-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 / 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 / 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'