— a really simple example in a React component Sometimes it is necessary to make a horizontal scrolling effect for a list on mobile devices, which is actually convenient and can be achieved with CSS. For example, you can represent different categories in a horizontal navigation bar, and each category…

— write one less line of code for every little more you learn CSS makes me love and hate, on the one hand CSS can make pages prettier, but on the other hand, there is no end to learning and mastering. As a self-taught front-end developer, I’ve spent so much…

— React Context provides a way to pass data through the component tree without having to pass props down manually at every level ☘️ In any application, data is essential. We all know this, in React, state and props are two very important properties and are commonly used, easily explained…

— weird word break CSS 👀 Creating a button is a simple matter of giving it a link and adding some text to display on the button, but have you ever encountered a such problem? If the button text is too long and needs to be displayed on two lines…

— Surprisingly, YouTube does not have responsive embed code 🦄, let’s play with CSS — In a project I’m recently working on, some videos are embedded on the website from YouTube, since our website is fully responsive, I also need them to be responsive on desktop or mobile screens. However, when I added the embed code, I noticed that the video iframe had fixed height…

Data in sessionStorage is cleared when the page session ends. In the project I am working on, I created a tiny React component banner. It contains an icon, some text, some different background colours, and a close button ( 🌱 I will simplify the example below).

— Tricky but interesting🍡 In a project I worked on, I faced a very interesting task, there is a sticky button at bottom of a mobile page, the requirement was to obtain an effect like this below: ✨ When the user scroll the page on mobile to a certain position…

How about a nice pagination? 🧚‍♂️ Pagination has always been a very interesting task, in the project I’ve been working on, I created a pagination with three different displays related to pages. 📑 Let me make a brief summary. ✂️ First, each page needs to display 15 different cards, the…

Create links to page sections is simple, but what if you have a fixed Header? — Hyperlinks are utilized by a web browser to move from one page to another. However, you can also move to a different area on the same page. ☘️ We can use “Id” selector, it is used in CSS to designate an area that a link should point to, the nice…