Reaching more and more people is a priority of a webpage and that includes people with disabilities and people who use screen readers to browse the webpage. It’s our job and responsibility to provide them the same information we all receive.

Besides ensuring information, it’s crucial to use well structured, readable, maintainable code. To fill that void, HTML accessibility comes into view. It ensures us that all people get the same content and information irrespecitve of their physical condition, age, race, and location. Today, we will cover this topic in broad.

Semantic HTML

Semantic means Correct interpretation of the meaning of a…

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…

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…

Which Approach Is Better? Declarative or Imperative? YOu Will Know All You Need To Know Abut This Two Programming Paradigms.

Declarative vs imperative is now talk of the town which was introduced by React community. It’s been popular nowadays because of its easiness and convenience to use. Let’s see what it means to be declarative and imperative

Difference Between Declarative Programming and Imperative Programming

It is a programming paradigm where we interact that expresses the logic of a computation without describing its control flow. It means it allows us to control flow and state in our application by saying “It should look like this” instead of saying…

SaaS Is a CSS Preprocessor Used To Help Write CSS More Efficiently and With Less Work. Today We Will Learn Three Important Rules of SaaS.

Previously I have written about Saas Variable which you can read to better understand Saas Variable. Also I wrote an article about on Saas Import rule. T

Today we will learn three important rules in SaaS. Let’s dig into them.

Debug rule

It’s like console.log in JavaScript. You can print any value of a variable or expression through @debug. Let’s see an example.

Example :

This Article Covers Everything About CSS Flexbox || Complete Article on Flexbox.

Difference between display: Flex and display: inline-flex

Both flex and inline flex turn the element into a block-level container box. But inline flex property turns the element into an inline-level flex container box. That means that if you use display: Inline-flex, you can add other inline elements.

But flex can’t do this. Flex items are all the same height, although they have contents of different heights.

Flex item will take as much as width it needs and as much as wide as the column if flex-direction is column. Inside a flexbox, if one flex item has more content than another, it will take more space in width…

We use so many attributes such as id, class, title, etc. But we can create our attribute in HTML by the “data-” attribute. I will introduce you to the *data-* attribute.

What is Data Attribute?

“It is used to store your data(Custom data) in HTML Element which will be hidden from the user but visible to the developer.

Do I need to use this attribute?

Yeah. I am explaining why. Most of the time you will use it when you need to add extra information on an HTML element so that you can access/filter/delete/style the element. But you should use this only when there is no other appropriate HTML element available

How can I use this attribute?

In my previous post, I wrote about the HTML accesskey attribute. Now another HTML global attribute is “Contenteditable” which is a somewhat hidden attribute in HTML. Let’s dig into it.

What is ContentEditable

Contenteditable attribute is somewhat like HTML input,textarea tag. But what makes it different from others is that it can change the content of a tag directly like a text editor. Users don’t need to submit or save after editing/changing text. It will happen automatically. Didn’t understand? Its ok. Let’s learn by example. First, we create a HTML file with a p tag like this

Notice the attribute contenteditable. I set…

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…

Learn everything about Sass import with a mini project

Photo by Markus Spiske from Pexels

Unity is strength. It also goes with Sass. In CSS import, the browser sends separate HTTP requests for each CSS file which causes poor performance. But in Sass, all the files are concatenated into one file and only one request is sent to the server which improves performance.

You want to be Pro in Sass and CSS ?? Then, it’s mandatory to know how Sass @import works.

Let’s see What we will be learning today

  1. What is Sass @import?
  2. The necessity of Sass import
  3. Difference between CSS import and Sass import
  4. How to use Sass
  5. Sass partials
  6. Importing CSS file

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