BC CSS
Saved by @cur10uslearner

JavaScript is powerful.

But sometimes, you can do great things using CSS.

A long thread of CSS tips and tricks:

 1. Smooth scrolling

https://t.co/eRRqdjrykQ
2. Change marker styling
3. Add styling to video subtitle

https://t.co/Oorw0Vymda
4. Change input caret color

https://t.co/OKSsAtxEuJ
5. Typewritter effect using pure CSS

https://t.co/Q6vorP1mFL
6. Customize text selection

https://t.co/lcsl9xVQ4X
7. Zoom image on hover

https://t.co/wB16o8jRWR
8. Customize first letter

https://t.co/5mK65WYUqS
9. Pure CSS image carousel

https://t.co/ecvhTwLBbw
10. Comma separated list

https://t.co/N9WeaMNVtb
11. Text outline using 1 CSS property

https://t.co/k41IoCECRc
12. Customize list style type

https://t.co/DOQK8EV0tS
13. Style range input

https://t.co/DWW7Fskw04
14. 3D elements using CSS

https://t.co/OFUn4UHhUQ
15. Optimize the performance

https://t.co/4im7DbNuFf
16. Create round text

https://t.co/IWEC1nJQV0
17. Wavy underline

https://t.co/7gkr2ykYOB
18. Truncate text using CSS

https://t.co/7SQ5m5mGCM
19. Negative selector

https://t.co/Z6NPEndM24
20. Prevent text selecting

https://t.co/Sudo7KLwh1
21. Make div scrollable

https://t.co/NEYyQadOOA
22. Image reflection

https://t.co/Tsy0J1i9r0
23. Image rendering

https://t.co/J7uLQAjYJB
End of this thread.

I’m planning to post more top-notch content in upcoming days.

Follow me @Prathkum if it sounds good.

More from Pratham

Pratham
Pratham
@Prathkum
A complete beginner's guide to styling your website with CSS.

Thread 🧵👇🏻


CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...

{ 2 / 27 }

First and foremost

The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially.

The colors are something from which users interact first whenever they visit your webpage

{ 3 / 27 }

There are a lot of great color palette out there using which you can generate pleasant color schemes

Check this great tool for generating accessible colors

https://t.co/ndsgBaMv2M

{ 4 / 27 }


Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..

{ 5 / 27 }
ALL
Pratham \U0001f468\u200d\U0001f4bb\U0001f680
Pratham 👨‍💻🚀...
@Prathkum
Positioning in CSS allows you to display your element wherever you want on the screen

But when I was learning it, I found it little bit confusing😅

So in this thread I'll try to explain it in easiest manner with practical implementation. Let's start

THREAD🧵👇


There are 5 values that you can pass in position property

- static
- relative
- absolute
- fixed
- sticky

In this thread we will be focusing on relative and absolute positioning as both are widely used

Let's start with understanding what document flow is?

📌 Elements are displayed on the screen as they written in the HTML document

Consider the following piece of code:

H1, P, H3 and div are displayed on the screen in exact order as they written in the HTML file.


As now you know about document flow, let's start with Relative positioning

📌 Relative Position

- Relative positioning do not take an element out of document flow
- Relative positioning is relative to element's original position which can be changed using offset

🔹 Relative position is relative to itself.

For example: Consider the code and output in the attached image below

As you can see red box is shifted 100px from left because I applied left offset after giving it relative positioning
TECH
Advertisement
Pratham
Pratham
@Prathkum
5 great background websites for every web developer and designer

🧵👇


1. Magic pattern

Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.

🖇️ https://t.co/ZqczrPfkdZ


2. Cool backgrounds

Collection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers

🖇️ https://t.co/df7VSb9t8H


3. Gradienta

Use pure CSS gradient backgrounds for your next website or app, as a JPG image or CSS code, no attribute required

🖇️ https://t.co/R58zrwpZCH


4 Mesh gradient

Creat aurora UI like gradients using few simple clicks

🖇️ https://t.co/vOHHDASr1V
ALL
Pratham
Pratham
@Prathkum
9 websites that will help you learn web development faster (they are free) 🧵

1. How HTTP Works

Everything you need to know about HTTP based system.

🔗 https://t.co/gVZS4RzS1a


2. 30 Days of Node

Learn Node step by step with interactive examples and code snippet in 30 days.

🔗 https://t.co/9nbtMiNB1C


3. How DNS Works

Learn what happens when you type a website address in your browser

🔗 https://t.co/SqMRNnDbc3


4. Git

Check out this excellent free website to learn git visually.

🔗 https://t.co/rQJMISBDfS
ALL
Pratham
Pratham
@Prathkum
Everything you need to know about useState hook of React

A beginner's guide

Thread🧵👇


Hey👋

Hooks are powerful but confusing. Don't worry, I'll try to explain each hook in the easiest way in this thread series of React hooks

Let's start with useState, the most useful and simple hook in my opinion

Working with React hooks, first thing you need to do is to import the particular hook

It's quite easy👇

📌 import { useState } from "react";

useState hook takes a parameter as initial value of state and return an array having two values

- The first value is the current state
- The second value is the function that allow us to change our state

Let me show you the return value by printing it out on console👇


Now we know what useState hook return, it's time to destruct our value

const [currentState, setCurrentState] = useState(0);

🔹 currentState is the value of our state
🔹 setCurrentState is the function using which we can change our state value
USESTATE

You May Also Like

Vibhu Vashisth
Vibhu Vashisth
@VIBHU_Tweet
LACHIT BORPHUKAN : AN UNSUNG WARRIOR OF THE AHOM KINGDOM & THE GREAT BATTLE OF SARAIGHAT

Originally named as Lachit Deca, Lachit Borphukan, the fierce and invincible Ahom Commander, was born during the early 17th century at Betioni in the Golaghat district of modern Assam.


His father, Momai Tamuli Borbarua was the ‘Governor’ of the kingdom and also ‘Commander-in-Chief’ of Ahom army under King Pratap Singha during his reign starting from 1603 to 1639. Lachit received military training from an early age and joined the Ahom King Jayadhvaj Singha...


...(1648-1663) as a scarf-bearer.  The post ‘scarf-bearer’ or ‘Soladhara Barua’ is considered as a part of the incumbent king’s personal staff. Owing to his military training Lechit was appointed "Ghora Barua", Supdt. of the Royal horses. When Chakradhwaj Singha became king..


..of Ahom dynasty in 1663,he appointed him Suptd. of The Royal Guards &finally he was appointed as Borphukan by the king.Then onwards,he was known as Lachit Borphukan.Borphukan used to be top councillor in Ahom Kingdom. This position was embedded with executive & judicial powers.


Assam was facing incessant Islamic invasion since Jan1662, when Mughal General Mir Jumla II attacked Ahom capital Gargaon. He never defeated Ahom king Jayadhwaja Singha as king retreated to hill &continued Guerrilla warfare.Prolonged fight &prospect of stalemate disturbed Jumla.
ALL
Jaya_Upadhyaya
Jaya_Upadhyaya
@Jayalko1
SRI BANASHANKARI AMMAN, BANGALORE
#bharatmandir

Located in Southern Bangalore, this is one of the most popular places of worship in Bangalore City.
Devoted to Devi Banashankari, this shrine is visited specially during Rahukala which is believed to be an unfavorable time.


Somanna Shetty, a great devotee of Devi, brought this murti from Badami’s Banshankari Amma Kshetram.
It is said that many years ago, three ladies visited this shrine and requested the pujari to conduct puja for them. Since it was the inauspicious rahu kaal, the pujari refused.


However, upon their insistence, he conducted the puja. When he returned with prasadam, the ladies vanished. This made the people believe that they were none other than the Devi herself. Since then, the people perform poojas here during the Rahukaal.
@GunduHuDuGa


People use lemons as a diya. Lemons are cut from the centre and their pulps are removed, for pouring oil in them.
It is strongly believed that Devi removes all the troubles from the life of her devotees during the Rahukala although it is considered inauspicious for any pooja.
ALL
Advertisement
Simon DeDeo
Simon DeDeo
@SimonDeDeo
This is a pretty valiant attempt to defend the "Feminist Glaciology" article, which says conventional wisdom is wrong, and this is a solid piece of scholarship. I'll beg to differ, because I think Jeffery, here, is confusing scholarship with "saying things that seem right".


The article is, at heart, deeply weird, even essentialist. Here, for example, is the claim that proposing climate engineering is a "man" thing. Also a "man" thing: attempting to get distance from a topic, approaching it in a disinterested fashion.


Also a "man" thing—physical courage. (I guess, not quite: physical courage "co-constitutes" masculinist glaciology along with nationalism and colonialism.)


There's criticism of a New York Times article that talks about glaciology adventures, which makes a similar point.


At the heart of this chunk is the claim that glaciology excludes women because of a narrative of scientific objectivity and physical adventure. This is a strong claim! It's not enough to say, hey, sure, sounds good. Is it true?
ALL
Trader knight
Trader knight
@Traderknight007
Pyramiding 2.0

A thread-


What is pyramiding?

It is simply adding to your winners.

Why use pyramiding?

1. It makes your winners bigger than your losers.

• Because you are adding positions when your trades are going your way, you are increasing your gains but your losers will be small comparatively.

2. You lose less during Draw-down time ( it saves you from losing big during whipsaws )

• Many times when the market is in sideways mode, Entering a trade with full risk might not be the best idea.

• So, you test the waters with a small position first, it could be ⅓ or ¼ of your total risk.

• So if the Breakout fails or whipsaws come, then you will only lose a small part of your overall risk.

• Then when position starts to go in your favor you can add to it.

3. It helps you to concentrate on a few trades,

They say that don’t put all your eggs in one basket, but don’t put them in too many either.

• See, Everyone can see charts and find breakouts, pullbacks etc.
ALL , SWING TRADING , PYRAMIDING
Tom Hirst
Tom Hirst
@tom_hirst
How to create a freelancing website that makes money.

Everything I've learned.

A thread.

As a freelancer,

Your website is everything.

First, prioritise its existence.

Second, prioritise its improvement.

The technology you use is irrelevant.

- WordPress
- Notion
- Carrd
- Wix

It doesn't matter which you choose,

What matters is you have a website.

Pick a platform that you're comfortable with.

If you can:

- Capture leads
- Add content easily
- Have a clear design

You're good.

If your website doesn't get leads,

It's not working.

Don't rest on a website that doesn't work for you.

Improve it until it does.
STARTUPS