Homepage
Open in app
Sign in
Get started
Design & Code Repository
UX & UI story with code
all
nana
Follow
The basics of React
The basics of React
Why am I learning React as a designer?
nana 🧙🏻♀️
Feb 21, 2023
CSS Sprite sheet Animation: PNG
CSS Sprite sheet Animation: PNG
Learn about CSS Sprite sheet animation with PNG.
nana 🧙🏻♀️
Feb 21, 2023
Case study: Artist Kim Eull’s portfolio website
Case study: Artist Kim Eull’s portfolio website
UX / UI case study from IA, research, prototyping to CMS
nana 🧙🏻♀️
Feb 21, 2023
Galaxy layout with CSS Grid
Galaxy layout with CSS Grid
Learn about CSS grid for gallery
nana 🧙🏻♀️
Feb 21, 2023
📚Gallery Pattern references
📚Gallery Pattern references
Contemporary Art Museum & Gallery
nana 🧙🏻♀️
Jan 29, 2023
Case study: web design focused on interaction design.
Case study: web design focused on interaction design.
I always wanted to design a website using the latest web technologies, WebGL, SVG animation, and so forth.
nana 🧙🏻♀️
Sep 22, 2019
The story of editorial design for book ²/₂
The story of editorial design for book ²/₂
: The Art of Toy Story 4
nana 🧙🏻♀️
Jul 30, 2019
The story of editorial design for book ¹/₂
The story of editorial design for book ¹/₂
: Cookbook
nana 🧙🏻♀️
Jul 30, 2019
📚Web design reference
📚Web design reference
Collections updated 5 April 2019
nana 🧙🏻♀️
Apr 5, 2019
📚 List animation reference
📚 List animation reference
Collections updated 5 April 2019
nana 🧙🏻♀️
Apr 5, 2019
📚 Mouse cursor effects reference
📚 Mouse cursor effects reference
Updated: 27 Mar 2019
nana 🧙🏻♀️
Mar 26, 2019
CSS selector cheatsheet
CSS selector cheatsheet
How do CSS Selectors work with all unfamiliar symbols?
nana 🧙🏻♀️
Feb 25, 2019
Cutup #8 Fluid Video
Cutup #8 Fluid Video
Today, I would like to talk about how to make a fluid video.
nana 🧙🏻♀️
Dec 17, 2018
Cutup #7 Box-sizing
Cutup #7 Box-sizing
Today, I would like to share with you about Box-sizing CSS property.
nana 🧙🏻♀️
Oct 29, 2018
What is a user agent
What is a user agent
A user agent is a computer program representing a person, for example, a browser in a Web context. -MDN
nana 🧙🏻♀️
Oct 28, 2018
Cutup #6 Breadcrumb bar with microdata
Cutup #6 Breadcrumb bar with microdata
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.- Bootstrap
nana 🧙🏻♀️
Oct 8, 2018
Cutup #5 Icon with CSS /SVG sprite
Cutup #5 Icon with CSS /SVG sprite
Today I would like to share with you how to implementing icon in CSS. There are two ways to input icon in the web browser, CSS sprite and…
nana 🧙🏻♀️
Oct 4, 2018
Sketch dark mode on macOS Mojave
Sketch dark mode on macOS Mojave
🌝🌕🌖🌗🌘🌑🌚
nana 🧙🏻♀️
Oct 3, 2018
UI design #1 Handwriting Animation with SVG
UI design #1 Handwriting Animation with SVG
These days, I am designing a website for an artist, NamSin Kwak. This handwriting UI animation was designed for the intro page of the…
nana 🧙🏻♀️
Sep 29, 2018
Cutup #4 Image <figure>
Cutup #4 Image <figure>
🔮Today, I would like to share with you about the HTML <figure> element.
nana 🧙🏻♀️
Sep 27, 2018
Cutup #3 Link <a>
Cutup #3 Link <a>
Today, I would like to share with you about the HTML <a> element.
nana 🧙🏻♀️
Sep 25, 2018
Cutup #2 Margin
Cutup #2 Margin
Today, I would like to share with you about Margin.
nana 🧙🏻♀️
Sep 23, 2018
Cutup #1 Set up Typography
Cutup #1 Set up Typography
Today, I would like to share with you how to set up Typography (web font) in your boilerplate or framework.
nana 🧙🏻♀️
Sep 22, 2018
Sketch set as Default Style
Sketch set as Default Style
Set as Default Style
nana 🧙🏻♀️
Sep 20, 2018
About Design & Code Repository
Latest Stories
Archive
About Medium
Terms
Privacy
Teams