This post will explain how to build a simple navigation logic for a webpage.Please note that I have learned this from the udemy course by Jonas Schmedtmann.Let’s take a look at the example first. Example Please note a couple of things. The navigation button always stays on the upper right corner (even if you scroll). READ MORE
Month: May 2021
CSS – Build Animating Nav Button
Today, we are going to take a look at how to build animating nav button using css properties.Please note that I have learned this from the udemy course by Jonas Schmedtmann. Example As soon as you click the button, you will see there is a cool animation making the button X. This is built by READ MORE
CSS – Build Cool Forms
Today, we are going to build a cool form using CSS. I am specifically going to use followings. 1. solid color gradients2. sibling selectors3. ::input-placeholder pseudo-element4. :focus, :invalid, placeholder-shown, :checked pseudo classes Please note that I have learned this from the udemy course by Jonas Schmedtmann. Let’s take a look at the final result first READ MORE
CSS – video and shape-outside
In this post, I am going to show how to implement a webpage that plays a background video and let texts floats around the image.Please note that I have learned this from the udemy course by Jonas Schmedtmann.Let’s take a look at the example demo first. Example Demo As you can see in the above READ MORE
SCSS – Flipping Card Component
Today, I am going to implement a CSS card that you can flip round when you hover the mouse using SCSS.Please note that I have learned this from the udemy course by Jonas Schmedtmann.Main CSS properties I use are perspective, backface-visibility, background-blend-mode.Let’s jump to the code directly and explain each part Example HTML Code CSS READ MORE
Intro to dynamic programming
This article is a simple intro to dynamic programming. Dynamic programming is typically considered the hardest algorithm to work with. However, there is a systematic way to solve the problem and we just need to practice based on that method. Dynamic programming is best suited for the situation that needs to eliminate duplicate computations by READ MORE
CSS – skew property and icon-fonts
This is a simple example showing how to design a cool page using css skew property and icon-fonts.Please note that I have learned this from the udemy course by Jonas Schmedtmann. Let’s first take a look at the example picture we are going to build As you can see, the background image is skewed but READ MORE
CSS – background-clip property
background-clip property enables you to display until what area/contents the background.There are 4 types of background-clip: border-box, padding-box, content-box, text.Each type represents the boundary of the background render. border-box means the background will be rendered to the border.padding-box to the padding, content-box to the content, and text-box to the text. Example It would be much READ MORE
CSS SASS float grid explained
There is a couple of ways to implement CSS grid. Although float grid is not the most recommended method I still wanted to do that for academic purpose. In this example, I am going to implement a CSS grid like the image below. There will be 6 rows total and each row will have its READ MORE
React styled-components v5 – how to use theme
As you apply css style to many components you will realize that you want to have consistent style to be applied to your web/mobile application easy way to change the style depending on some conditions style-components provides an easy way for that – theme. You can define a theme which could be applied to the READ MORE