Tweet

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @Prathkum

Pratham

@Prathkum

14 May

Box Model

Everything on a website is a box. Therefore it is quite important to understand the box model concept in web development but it is confusing. Let's see some hidden facts about it in this thread

🧵 👇🏻

When laying out a document, the browser's rendering engine represents each element as a rectangular box. You can visualize it by adding some solid in any element.

You can manipulate this box using the basic standards of CSS like color, border, background etc.

{ 02 / 17 }

Every box comprised of four parts

- content dimensions
- padding
- border
- margin

Although outline is not considered as the part of box model but we can talk little bit about it later on this thread.

{ 03 / 17 }

Read 17 tweets

Pratham

@Prathkum

14 May

5 amazing websites for developers that can save you a lot of time 🧵👇🏻

1️⃣ Oh shit, Git!

Check out this great website. Some bad situations and often mistakes that we make while working with Git. You'll probably find your answer here

🔗 ohshitgit.com

2️⃣ Check SEO

Get free on page SEO audit report. Find the mistakes in technical SEO for specific URL.

🔗 sitechecker.pro

Read 6 tweets

Pratham

@Prathkum

13 May

Creating CSS arts is a good way to master CSS. Here are some resources and tips that will take your CSS skills to the next level 🚀

🧵👇🏻

Trust me, CSS art looks hard but they are not so tough they seem.

First things first, good color contrast is the number characterstic of a good website. Similarly color combinations makes your art good.

People with visual impairment preceive colors in different way. For example, here is how the dark red color is seen by people with monochromacy, dichromacy, and trichromacy

Hence picking up right color combinations is the most important part

Read 12 tweets

Pratham

@Prathkum

13 May

You must have used the border-radius property in CSS, but here is complete guide covering some of the hidden concept of it

🧵👇🏻

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a border-radius in order to make round edges of sharp cornered box

Well we know that every element is a box in webpage. Consider that box clipped using 8 clips 👇🏻

We can adjust that clips in order to make distorted shapes

Read 8 tweets

Pratham

@Prathkum

12 May

Do you have images on your webpage / website? You probably have.

Here are 5 cool things related to images on webpage, that I think you are not familiar with

🧵👇🏻

1️⃣ Set image scaling algorithm of user agent

The `image-rendering` CSS property sets an image scaling algorithm
When you specifies dimensions of image other than its natural size then the image will be up/downscaled by user agent using the algorithm specified by image-rendering

For example: "crisp-edges"

The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process.

Check the output image carefully

Read 11 tweets

Pratham

@Prathkum

11 May

Step by step guide to create this drop using CSS 💧 🧵

This drop looks tough to create but trust me its super easy and fun.

The heart of this art is border-radius and box-shadow properties. If sounds good, continue reading.... 👇🏻

First thing first, we need to create a distorted shape so that it will looks like a drop.
We can create this shape using border-radius property only.

Here's a tool if you find some difficulty making this drop shape

🔗 9elements.github.io/fancy-border-r…

Read 12 tweets

Share this page!

Pratham

Try unrolling a thread yourself!

More from @Prathkum

Pratham

Pratham

Pratham

Pratham

Pratham

Pratham

Did Thread Reader help you today?

Like this author's thread?