Hajime, the duck guy

UX and graphics kata
On this page
Level: Essential

Clone a web page

Visual training and UX intuition

The way of kata

Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.

The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.

All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).

To make the best of katas, observe the following rules.

  • Don't rush.
  • When stuck, take a break and do something unrelated.
  • Do not copy/paste code. Always retype everything.
  • Do not use AI tools to generate code.
  • Try to do something that wasn't in the instructions, experiment.
  • Repeat the kata from time to time, even if you think you've got it.
  • You have mastered the kata once you are able to complete it without thinking too much.

Remember, the goal is not to get it done, but to get some practice.

Introduction

In this exercise, you will train your eyes to recognize visual features and your fingers to translate them into CSS.

Skills you will acquire

  • Basic UX literacy
  • Visual perception

Objective

  • Create a faithful copy of a web page you like
  • Think about what it is about the page that makes it work
  • Think about what aspects don't work so well

Check your solution

  • When you flip between the original and the copy, there are no major discrepancies in the design

Materials

  • Pick a source web page that you will copy

Keep in mind

The visual language is one of the more important skills required by front end developers. Although this point of view is not all that popular, it is nevertheless critical for a high-quality implementation. Although typically, front end developers work off mockups, mockups don't tell the whole story of all the possible states the page might be in. The ability to fill these gaps effectively hinges on your command of the visual language.

In this exercise, we will skip the theory completely. Instead, you will train your eyes and fingers by identifying discrepancies between what you see and what you end up creating. For this exercise to be successful, you will observe the following rules:

  • Do not look at teh code of the website (you can use the Network tab to grab assets like images and fonts).
  • Do not look at both the website and your copy at the same time until you are done. Spend time looking at the original, then flip to the copy, and then back. I recommend keeping them in the same browser window, in different tabs.
  • Do not use pixel units for anything (this is CSS 101).
  • You don't need to adhere to the breakpoints used in the original. Create a responsive layout that works for the design and fix any issues with the responsive layout of the original (usually they will have at least some).
  • When you believe you are done with the copy, flip between the copy and the original rapidly and note the discrepancies. You can also take full-page screenshots of the two versions and compare them in an image viewer.

As an additional exercise, try to find the font used on the source page by looking it up on Google fonts.

Pay attention to the following:

  • Colors
  • Color combinations (color scheme)
  • Font usage and usage of font weights and styles
  • Relationship between text sizes of different texts
  • Relationship between text sizes and other elements
  • Paddings
  • Gaps between elements
  • Relationship between different paddings and gaps
  • Alignment of the elements on the page
  • Textures (background images, gradients, shadows)
  • The three-dimensionality (e.g., placing elements above or below others)
  • The use of animation
  • Animation speed
  • Focus states
  • Active state (e.g., when button is held clicked, or accordion is open)
  • Disabled state (form controls)
  • Visited state (for links)
  • Color-coding (use of colors to group items)
  • Spatial grouping (use of spacing to group items)
  • Other grouping (use of lines and boxes to group items)
  • Use of graphics (icons, images)
  • Responsiveness
  • Adapting to different font sizes (change default browser font size)
  • Adapting to zooming

Reading list

Want more?

Back to top