In the journey of learning the front-end, there is a high chance of encountering various headache problems. For example, you can’t place a button to a specific position, and you may get a headache because of this. When I first started learning front-end development. I also encountered such problems. Today, I’m going to introduce flexbox to help you solve this problem.

Flexbox can help you place some elements in specific locations, and you will need not worry about it anymore. Next, I will use some CSS code to demonstrate the usage of flexbox.

Please look at the picture below and…


CSS grid is really interesting, and some interesting page layouts can be implemented with the CSS grid. This is very helpful for front-end development and to prevent unexpected misalignment. This time I’m going to share my tricks and tips in learning CSS Grid.

First let us look at the diagram shown below, and take a second to think what would you do to achieve the same layout.


The front-end development is very interesting. Developers can design unique functions and features through imagination and different technologies. I love front-end development very much. Therefore, I spend time observing different websites, and they often divide the content into different pages. I think browsing a website by clicking on buttons or page numbers would possibly consume users’ patience.

I refer to some features from mobile phone applications, such as TikTok’s swipe up and down to watch different videos. I have an idea to automatically add the content of the next page when the user scrolls to the bottom of the page…


Programming is really interesting, you can solve many problems through programming. But how to make your code more efficient and solve problems faster is also a problem faced by many programmers. And this has to be mentioned in Big O asymptomatic analysis. Next, I will use some questions to help you understand the concept of big O.

Here is the question: given 2 arrays, array1 and array2. We need to check whether there are duplicate items between the two arrays. If there are duplicate items, return true; otherwise, return false.

let array1 = [“a”, “b”, “c”, “d”, “e”];

let array2…

Navbar is one of the important elements to make your website more accessible for users and help users to quickly find the information they want to see. Today, I’m going to show you how to create a custom navbar and Hamburger menu.

First, we need to create the Navbar component and initialize a state with a property open and default value will be false. We’re going to use this state to toggling the navbar in mobile view. With each ul tag, we need to add the following code.

className={ ? “hamburger active” : “hamburger”}

We may read this line of…

I recently discovered a fascinating animation library for React. By using this library, you can add some instant visual feedback when users perform some operations. The animation effect would provide a sense for users that their operation is taking effect. React Reveal provides various animation, and it can be easily added to existing code and implement animation for an app or website.

Before we start to code with react reveal, you need to install the package to your project:
npm install react-reveal-save

Type the command line above to your terminal, make sure you are in the correct directory, and it…


If you are a front-end developer, you may want to be able to provide a high-quality front-end user experience, such as when the user clicks a button and triggers a smooth page scroll, and such tiny details can improve your user experience. Recently, I found a convenient tool to help you. React-scroll can easily add a page scrolling effect to your website or web app, and it brings various scrolling effects.

Let’s dive into it. First, you need to install the package to your project.

Open your terminal and type npm install react-scroll, hit ENTER. …


Do you like animations on web pages? If so, then you must read this article. I think animation can improve the user experience to a greater extent and make the software you develop operate more smoothly. So how to add and where to add animation will be a big problem. I will show you one by one.

First, we need to understand the principles of animation. It moves an object from one place to a specific place, and the process of this movement is animation. So how do we set the location of an object? …


Before starting a brand-new web application or a mobile phone software, every developer and designer may invest a small amount of time into the planning phase to collect requirement and brainstorm designs, and then quickly rush to start coding and development. However, The first two stages (requirement & design) are often easily overlooked. But them would have a huge impact on the entire development process and the final product. This is SDLC (Software Development Life Cycle). The graph below clearly shows the corresponding cost that each phase may incur, and the data may be changed due to the different type…

CSS is a fun tool to work & play. Its full name is Cascading Style Sheets. If you are interested in front-end development and design, you would like to learn CSS. The most fun part of CSS is animation, in which you can make your web pages more dynamic. Make them move!

First, we have to create a button in the HTML file,<button> Button </button>. The button without any CSS looks a bit like an exhibit in a history museum.

Original Button


Software engineer experienced in Ruby on Rails, React, and Javascript based programming.

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