IDEA School of Design Blog | Capilano University Illustration and Design School

View Original

Good Google Fonts: Some fun hand-coded landing page design projects from both IDEA School of Design Grad 2025 cohorts

Both IDEA Grad 2025 cohorts coded their landing page design with HTML and CSS on Glitch — the friendly place where everyone builds the web — in IDES 252 Digital Media II with Christina Lee Kim Koon. The goal was to build a responsive landing page with clean and organized code.

Check out some fun hand-coded landing page design projects from both IDEA Grad 2025 cohorts!

Rubik

A dynamic and versatile typeface that embodies modern sophistication.

Design and code by Caleb Tsai.

See the landing page at calebt.glitch.me

Crimson Text

Balancing elegance, style, and function in every letter.

Designed by Samantha Yeung.

See the landing page at samantha-yeung-landing-page.glitch.me

Kanit

You Can Catch Both Warmth And Professionalism!

Design & Code by Sol Yoon.

See the landing page at sol-y.glitch.me

Avería Libre

Perfectly average.

Design & Code by Lily Rosen.

See the landing page at lily-r.glitch.me

Fahkwang

A typeface that inspires the little things.

Design & Code by Katarina Yaremkewich.

See the landing page at katarinay.glitch.me

Poppins

Geometric sans-serif with a clean, modern, friendly look.

Design & Code by Carmen Huang.

See the landing page at carmenh.glitch.me

Raleway

An affable and unique typeface full of personality with old style and lining numerals.

Design & Code by Angela Aguilar.

See the landing page at angela-aguilar.glitch.me

Montserrat

The highly legible and variable geometric sans-serif, that balances detail with a casual appeal.

Design & Code by Tolan Greyhaven.

See the landing page at tolang-typepage.glitch.me

Inknut Antiqua

The Fortress of The Type World.

Design and Code by Matthew Funk.

See the landing page at matthewfunk.glitch.me

Epilogue

What’s the fun in creating an ending without some drama?

Design and Code by Angelica Blanch.

See the landing page at glittery-canyon-tachometer.glitch.me

Playfair Display

An elegant and unique serif typeface.

Designed by Makayla Crenshaw.

See the landing page at makaylac.glitch.me

Roboto

*not robot

Design and code by Sofiia K.

See the landing page at goodgooglefonts-sofiiakozenko.glitch.me

Recursive

Bold. Versatile. Assertive.

Design and Code by Kyle Rask.

See the landing page at rask-recursive-landing-page.glitch.me

Newsreader

Contemporary and clean. Elegant and expressive.

Design and code by Jordan Richert.

See the landing page at experienced-adaptive-warlock.glitch.me

Josefin Sans

Classy & Nostalgic. A versatile typeface that radiates opulence, the only limit is your imagination.

Design & Code by Jacob Chong.

See the landing page at jacob-c-good-google-fonts-v2.glitch.me

Space Mono

A nostalgic monospaced typeface with an out-of-this-world personality.

Design and Code by Emma Do.

See the landing page at emmad.glitch.me

Livvic

For the corporate and friendly click.

Design & Code by Phoebe Verdon.

See the landing page at phoebe-v.glitch.me

Sora

Sora is a typeface family designed to be convenient for app and web interfaces.

Design & Code by Cassie VP.

See the landing page at cassiev.glitch.me

Sofia Sans

A technical sans serif with a humanistic twist.

Design & Code By Ariana Thompson.

See the landing page at arianat.glitch.me

Unbounded

Limitless potential from the skies above. A whimsical sans-serif, stylized with chevron stems, and a wide character width.

Design & Code by Ava Shahres.

See the landing page at avashahres-website-code.glitch.me

About the Course

This course focuses on developing skills necessary for a digital design-related profession. The emphasis is on the role of the designer and/or illustrator in the creation of digital and interactive media for the web. Students will learn basic HTML, CSS, and responsive website design best practices. Applied projects address the needs of real-world digital communications scenarios.