Introduction

In the last tutorial UI Animation in Adobe XD we explained the concept behind animations and went over the necessary steps to create them in Adobe XD. In this tutorial, we will take a step further and implement the design into real working code that can be used in your next project to create interactive user experiences.

Animation from Adobe XD

Background knowledge before we start

Recall animations consist of a starting state and an ending state, in CSS world the idea is identical. Similar to changing properties in Adobe XD, in CSS we define different CSS properties in each state and then link them…


Introduction

In modern websites, animations are becoming more and more important. It distinguishes professional websites from good websites as it makes websites come alive and create a great user experience. In this tutorial, we will go over the necessary steps you need to take in order to make the following UI animation in Adobe XD.

UI Animation in Adobe XD

Background

Before we can start implementing our design, let’s first try to understand the concept behind animation. Any complex animations can be broken down to a Starting State and an Ending State. In these two states, some properties (such as position, color…


Introduction

As a Frontend Developer, one of the most important skills that you must master is how to use the Google Developer Console to make your daily work easier. As a big tech company that has a large foundation of developers, Google understands the stress and struggles a developer could have when he/she cannot find the bug in his/her program. Therefore when developing their products, Google has made Chrome not only user friendly, but more importantly, developers oriented. There are many cool features on Google Chrome that not only can help you trace issues on your website faster, but on top…


Introduction

As dark mode becomes one of the major trends in 2021, more and more people start to integrate dark mode into their new projects due to its high accessibility and the low to zero pressure it brings to audiences’ eyes. In this tutorial, I will walk you through the complete process of creating a light / dark mode toggle using only plain Javascript and CSS. We will be looking at a small card example, but the concept is the same and can be easily adjusted to suit your own business case.

Getting the HTML ready

For the HTML, besides from container div elements, we…


Introduction

In CSS, a lot of the time when we want to give children elements under the same parent the same CSS property, we will use compound CSS selector like the following:

.container .title,
.container .detail {
color: black;
}

It allows us to select multiple elements at once and apply the same CSS property to them. However, as the list grows longer we will have to repeat the parent class multiple times. This is when the :is selector comes into play to solve this issue.

Example

Given the following HTML:

<div class="card --card1">  <h2 class="title">Normal CSS</h2>  <p class="detail">    .--card1 .title,

Introduction

While both GoDaddy and AWS provide affordable and attractive domain packages, sometimes you might still need to transfer your domain to AWS in order to better integrate with other AWS services. In this tutorial we will cover all the steps and actions you need to take in order to transfer your GoDaddy domain to AWS.

Enable domain transfer on GoDaddy

Sign in to your GoDaddy account then navigate to My Products page.


Introduction

As of 2021, 39% of websites around the world are built by WordPress. WordPress is so popular due to the fact that it has many themes and plugins to get non developers starting. However, in order to get started with WordPress, you must first install WordPress either on a server or on a local machine. Installing WordPress on a local machine brings you many benefits. It allows you to start playing with WordPress without worrying about server costs and your site will remain visible only to you until you are ready to publish it to the cloud. …


Introduction

If you have been working with CSS for a while, then you might have encountered scenarios where you need to apply shadow on HTML elements to make them look realistic. In CSS, our first instinct to add shadow would be to use the box-shadow property. Box-shadow takes in 5 properties as its parameters: x offset, y offset, blur, spread, and color. …


Introduction

As web development starts to get popular nowaday, more jobs and new job titles have started to get introduced into the market. DevOps and Architect are two job titles that were created in the recent years. As they both work at the infrastructure side and outside of the core application development team, some people may find them very similar. In this article, we will discuss how they are different from each other and their main responsibilities.

Real life example

Consider you and your team are building a complex modern car. DevOps Developers are the one that knows how to quickly assemble each part…


Introduction

You may have heard some companies require Frontend Developers to know how to use tools like Photoshop or Illustrator. Or require UIUX Designers to know how to write CSS and HTML. But are these two jobs really the same? It’s undeniable that they often share each other’s skills, but in fact they are very distinct and have values that the other cannot replace.

In a web development team, UIUX Designers need to spend a lot of time communicating with clients to understand their needs and then transform their needs or concepts into beautiful websites designs that may be able to…

Bill Chen

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