This is a short article for how to create dynamic typing and deleting text animation with CSS and JS

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

Image for post
Image for post
Totally unrelated picture

Making a typing effect with CSS and JS is extremely easy. If you think about it, the whole effect is just a combination of a “blinking” input cursor looking thing, and the addition and subtraction of letter from a sentence. It could be done with the following steps:

  1. Create an element that looks like a blinking input cursor
  2. Create a sentence, position the above element at the end of it
  3. Use JS to add and subtract letter from the sentence one by…


A step by step tutorial for creating a before and after image comparison effect using html range input

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

If you have two images for comparison, one effective, and yet simple UI element is the “before and after” image slider.

Image for post
Image for post
Gif from google

This “slider” element allows your user to control how the two image display on the screen, and freely explore the two different images. You might think it requires some library to create such an effect, but actually, it is a very straight forward and easy to code UI. …


A step by step tutorial on how to create a simple “sign in” UI with a reference

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

Web development is easy to learn, but hard to master. If you are a beginner, you might find yourself struggle to create even the simplest web UI, despite all the effort watching online tutorial. It is because web development is a skill that require hands-on practice, lot and lot of practice. If you want to get good at it, you need to do coding practice. …


A step by step tutorial on how to create a landing page with a large feature image design.

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

Web development is easy to learn, but hard to master. If you are a beginner, you might find yourself struggling to create even the simplest web UI, despite all the effort watching an online tutorial. It is because web development is a skill that requires hands-on practice, a lot and a lot of practice. If you want to get good at it, you need to do coding practice. …


Learn how to EASILY create fancy looking title with only CSS

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

Typography is an important part of a web design. Using a suitable text style could greatly help conveying message to your viewer. This article will teach you how to easily create different type of text style in your website, using only CSS and exactly ONE html div element!

Image for post
Image for post
All design are found from google image, I implemented them in code with CSS

Quote like this are something extra, like code explanation and improvement suggestion

Result Demo

I created 9 different text styles (design idea from google) in total, these are the final result:


Step by step tutorial on creating a vintage design food menu

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

If you are into UX/UI or frontend development, You have probably heard of the “Daily UI Challenge” (https://www.dailyui.co/). It is a challenge for UX/UI design to come up with a different design of common frontend element, such as sign up form, landing button, info card, and e.t.c. Thousands of talented designers create their own version of the UI element design and share it with the internet.

In this article, I will pick one interesting example for “Food menu” and try to actually implement it in code. The example I picked this time is “Food/Drink Menu” by Pixelcode (https://dribbble.com/shots/2668255-Daily-UI-043-Food-Drink-Menu) …


A step by step tutorial on how to create a subscription plan card design

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

The “Daily UI Challenge” (https://www.dailyui.co/) needs no further introduction. Thousands of designers come up with interesting UI/UX element design and share with the internet regularly. Many of the designs are very inspiring and creative.

In this article, I will pick one interesting example for “pricing plan” and try to actually implement it in code. The example I picked this time is “Plan” by uixNinja (https://dribbble.com/shots/3171200-Plan)

Image for post
Image for post
This is the design we will duplicate

The design consist of three different cards for different “plan” (whatever plan it is), and a detailed area for the description of the selected plan. The card itself is very eye-catching, with ink drop pattern and clearly aligned title, cost and button design. In addition, there are many layer to the different, for example the card hierarchy, the container and the button all occupying a different visual space in the design. …


A step by step journey of how to create a new year countdown.

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI element every week (like sign-in, user profile, search, etc) and designers on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

In this article, I will pick one interesting example for “countdown” and try to actually implement it in code. …


A step by step journey of how to impose a profile page design

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI element every week (like sign-in, user profile, search, etc) and designers on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

In this article, I will pick one interesting example for “Profile page” and try to actually implement it in code. …


A step by step journey to create a good design from the daily UI challenge

Content

  1. Introduction
  2. Result demo
  3. Prerequisite
  4. Step by step guide
  5. Conclusion

Introduction

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI elements every week (like sign-in, user profile, search etc) and designer on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

In this article, I will pick one interesting example for “Sign in” form and try to actually implement it in code. …

About

JW

Full time frontend developer (mostly).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store