Image for post
Image for post

Do you want a fast website? Smooth website? Then you should care about WebP. It makes websites lighter and makes it faster. WebP combines the feature of PNG and JPEG. It is the new king of the image format.

What is WebP

This is an image format like PNG/JPG/GIF but it has more interesting features that make it more versatile. Actually, It was developed and released by Google.

Some of its main features are:

  1. It supports both Lossy and Lossless Compression. IF you don’t know what lossy or lossless mean, read my previous article
  2. WebP lossless images are 26% smaller in size compared to PNG and 25–34% smaller compared to…

Image for post
Image for post
Photo by Smart on Unsplash

We all are familiar with variables. But Sass Variable is magic like no other. It makes your web development fun and engaging. There are lots of ways to use Sass Variable. Let’s explore this.

Make your life easy

Look at this code,

p {
background-color: #445522;
letter-spacing: 2px;
}
h1 {
background-color: #445522;
letter-spacing: 2px;
color: black;
text-transform: uppercase;
}

I used the same background-color and letter-spacing in both p and h1 tags. But in a real project, you will write the same value in many different places. If you want to change a small thing like color, then you have to go to every selector which has color property and change its value. …


Image for post
Image for post
Photo by Markus Spiske on Unsplash

Color is the first impression of a website. Every color trigger certain feelings and color can increase brand value and experience. In this era of technology, people are visually driven. People make decisions about a brand within the first 90 seconds and their choice is 64–90% based on color.

So, choosing the right color lets you win the half battle. As we know, the first impression counts

Let’s start with simple syntax.

We usually write the color in CSS by this syntax:

css selector {
color: color-name;
}

But there is a lot to know beyond this syntax. As a Front End Developer, You have to ensure good design which is appealing. In order to do ensure great design, you have to learn these 8 things. …


Image for post
Image for post

It doesn’t matter whether you are a graphics designer or a web developer, you must deal with colors. Colors are a language itself. Every color has its meaning and conveys a message to the audience. Colors are a tool for non-verbal communication with the audience. That is why you must know the meaning of the basic 7 colors.

It will help you to equip yourself with the proper message to convey. Here is the meaning of basic colors.

Image for post
Image for post
The color meaning of Red and Green
Image for post
Image for post
Image for post
Image for post

Conclusion

Don’t try to memorize this. Just take a look and try to remember the main message of every color. You will forget easily If you read it once. Try to read this page one time each day for a week. After a week, you will get an idea of what every color means without memorizing it. Thank you very much for reading. Follow me for more articles.


Image for post
Image for post
Photo by bruce mars on Unsplash

Image Optimization: It is a widely used technique used to reduce image file size without losing too much quality because a larger image file causes the website to load slowly and creates delay. As a result, it produces a poor user experience and also affects SEO. That is why image optimization is so much important in 2020.

But before learning image optimization, we need to know the three popular image formats used on the Web. Let’s take a look at them first.

Image formats for web

Image for post
Image for post

Image for post
Image for post
Photo by Michael Dziedzic on Unsplash

How many keyboard shortcuts do you use each day? I think the Keyboard shortcut is revolutionary. But most of us don’t see it.

Keyboard shortcuts for general people

I know that you use MS Word, MS Excel, MS Powerpoint most of your time. Maybe you are bored with using the mouse too much. You may be feeling hand pain, wrist pain, arm pain e.tc. You can relieve these problems by using more and more keyboard shortcuts. Because using keyboard shortcuts

  1. Makes you more productive and more efficient at doing a certain task
  2. Makes you faster as you don’t have to reach out to the mouse every…

Image for post
Image for post
Photo by Chris Liverani on Unsplash

To make a responsive website, there is no alternative to use em. But converting pixels into em is daunting for some people. People also use an online converter to convert pixels to em. But they don’t need to. I will show you an easy way to convert pixels into em. Before start, you need to understand the full concept. SO, don’t skip anything

Base Pixel:

By default, browser font size is 16 px and we know that 16px =1em. Now do some school math.

Image for post
Image for post

I called these values(16px,32px,48px,64px) base pixels. We will calculate other values with respect to these base pixels.

Tip-1: Memorise these base pixels. Remember that for an increase of 16px, em is an increased by…


Image for post
Image for post

Being a web developer is a tough job. Learning coding isn’t enough unless you know how to be more productive, doing the task effectively but with less work. You need to be lazy to be a good developer. Learning tools which can automate your daily task is crucial. Let’s get to the point.

Want smooth Experience?

Using computer whole day is monotonous. Repeating same key, writing same HTML Tags, same CSS properties is cumbersome. Hand pain, wrist pain is common. Also, this is a frustrating world to work. But there is hope. …


Image for post
Image for post
Photo by Maksym Potapenko on Unsplash

This is a CSS property that determines how our text is laid out on the page. Most of the time, we never need to think of this attribute. But we can use it in an aesthetic sense.

I will not cover all of its values but explain three of its values.

1.Horizontal-tb: This is the default values we use. Texts is laid out left to right and we read text from top to bottom.

2.Vertical-lr: It comes into play when we want to layout elements vertically. Let's watch an example.

<div class="box"><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading…

Image for post
Image for post

Most of the time we write in computer and we never think of directionality. We write from left to right by default. But in some language, text directionality is crucial part such as “Arabic” where we need to write from right to left. In that scenario we need to use an HTML global attribute which is Called “dir” attribute.

What are the values?

It has three values:

  1. dir=”ltr” (left to right).

It is used for languages where text are written from left to right

2)dir=”rtl”(right to left”) .

It is used for languages where text are written from right to left

3)dir= “auto”.

There is an algorithm which decides directionality. First It finds a character with strong directionality and applies the directionality to the whole…

About

Md Shahab Uddin

Front-End Developer & Tech Writer

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