๐ŸŒ† 60+ CSS Shorthand Properties: Cheat Sheet

๐Ÿ’Ž Direct Link for High-Resolution Image

If you liked this one, give a โญ๏ธ to this GitHub repo to support my work.

โœง Direct Link:
https://t.co/4tm0id59LH
What did we cover?

Here are those.

โž€ all
โž background
โž‚ background-position
โžƒ font
โž„ text-align
โž… text-decoration
โž† text-emphasis
โž‡ list-style
โžˆ offset
โž‰ overflow
โž€โž€ inset
โž€โž inset-block
โž€โž‚ inset-inline
โž€โžƒ margin
โž€โž„ margin-block
โž€โž… margin-inline
โž€โž† padding
โž€โž‡ padding-block
โž€โžˆ padding-inline
20. overscroll-behavior
โžโž€ scroll-margin
โžโž scroll-padding
โžโž‚ border
โžโžƒ border-top
โžโž„ border-right
โžโž… border-bottom
โžโž† border-left
โžโž‡ border-block
โžโžˆ border-block-start
30. border-block-end
โž‚โž€ border-inline
โž‚โž border-inline-start
โž‚โž‚ border-inline-end
โž‚โžƒ border-color
โž‚โž„ border-block-color
โž‚โž… border-inline-color
โž‚โž† border-style
โž‚โž‡ border-block-style
โž‚โžˆ border-inline-style
40. border-width
โžƒโž€ border-block-width
โžƒโž border-inline-width
โžƒโž‚ border-radius
โžƒโžƒ border-image
โžƒโž„ outline
โžƒโž… block-step
โžƒโž† mask
โžƒโž‡ animation
โžƒโžˆ transition
50. pause
โž„โž€ columns
โž„โž columns-rule
โž„โž‚ flex
โž„โžƒ flex-flow
โž„โž„ place-content
โž„โž… place-items
โž„โž† place-self
โž„โž‡ grid
โž„โžˆ grid-area
60. grid-column
โž…โž€ grid-row
โž…โž grid-template
โž…โž‚ gap
Hey ๐Ÿ‘‹

I am a Tech Writer, Educator, and Mentor from India ๐Ÿ‡ฎ๐Ÿ‡ณ, here sharing

โœ… Tutorials
โœ… Tricks
โœ… Career Tips
โœ… Cheat Sheets
โœ… Practice Questions
โœ… Project Ideas
on
โž  Web Development
โž  Data Structures and Algorithms
โž  Databases

Thanks for reading. ๐Ÿ™

More from Swapna Kumar Panda

๐Ÿ›ฃ Beginner's Roadmap for Front-End

HTML & CSS โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป โ†’ JavaScript โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป
โ†“
๐Ÿ‘ฉโ€๐Ÿ’ป โ† React* โ† ๐Ÿ‘ฉโ€๐Ÿ’ป โ† Tailwind*
โ†“
TypeScript โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป โ†’ Next.js* โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป โ†’ ๐Ÿ

โ‡ฉ

What would we cover?

โžŠ HTML & CSS
โž‹ JavaScript
โžŒ CSS Frameworks
โž UI Frameworks
โžŽ TypeScript
โž Server-side Frameworks
โž Practice, Practice and, Practice
โž‘ Other Skills
โž’ Frequently Asked Questions

โžŠ HTML & CSS

โฌ˜ Your Front-End journey shall always start from HTML & CSS and, ends with these as well.

โฌ— Don't over burden yourself to learn everything at once. It's a continuous subject.

โฌ™ Do not separate HTML from CSS. That's


โž‹ JavaScript

JavaScript is essential. You should start with basics and move to complex subjects.

โ JavaScript Syntaxes
(preferably ES6 onwards)
โ HTML DOM API
โ Event Handling
โ Fetch


โžŒ CSS Frameworks

CSS Framework is necessary if you are planning to be a professional developer.

There are so many options available.

โ Tailwind CSS
โ Bootstrap
โ Chakra
โ Bulma
โ Foundation
โ Skeleton
โ Pure CSS

Start with anything. You can switch any time.

More from Catagory jee

A thread ๐Ÿงตon Resources-for-preparation-Of-Placements (Lecture video links)

**Programming Language Used : C++**

- Programming in C++ - (
https://t.co/gTcLJEMzwx)

- TakeUForward - ( https://t.co/udOwgbpG6O )

- CodeHelp - ( https://t.co/iph5urO1Q3 )

- Ayushi Sharma - ( https://t.co/pJUyl8ViF7 )

- COMPETITIVE PROGRAMMING -

**Programming Language Used : JAVA**

- Programming in JAVA - (https://t.co/fUMecrGVwY)

- Data Structure and Algorithams
- Kunal Kushwaha - (https://t.co/Pkvr5ZMcJ7)
- Pepcoding - (https://t.co/yNoYkSTTfv)
- Durga Sir -

- Anuj Bhaiya - (https://t.co/jHFrsvnwCy)

**Programming Language Used : Python**

- Programming in Python - (https://t.co/6zz3S1MpUO)

- DSA in Python - (https://t.co/vQ1EteJGnm)

- DS-ALGO - (https://t.co/KXE7NZf0ZD)

- Tech With Tim -

- Python Engineer - (https://t.co/VmGtEjiBVE)
**Placement Series**

- C++ - (https://t.co/nCnLHi00BK)

- JAVA - (https://t.co/Pkvr5Zu3uZ)

- JAVA - (https://t.co/pScvzpmlYu)

- PYTHON -
Tools you will regret not knowing as a coder (trust me)๐Ÿงต โ†“

๐Ÿ‘จโ€๐Ÿ’ป Icons:
https://t.co/v0dkE7xnM3
๐Ÿ“ Resume: https://t.co/nOBrCRzGYd
๐ŸŽจ Illustrations, vector images: https://t.co/MSDgzqyndc
๐Ÿฅ 3D icons: https://t.co/skKrqgJMdy
๐Ÿ—ƒ๏ธ Create visual guides: https://t.co/pUmq0rXTrA
โž— Learn sorting visually:

๐Ÿ“š Learn Anything: https://t.co/m76TvGCi3y
๐ŸŽ  Create bg with text: https://t.co/iFSixERygy
๐Ÿฅ Source code to picture: https://t.co/azc3n5mlh5
๐ŸŽฅ Photo engine: https://t.co/4FusgEFSd4
๐Ÿ‘จโ€๐Ÿ’ป Handy Dev tools: https://t.co/H8HeFi5n3E
๐ŸŽจ High-class illustrations:

Thanks for checking this out.

Follow @saumya1singh for more such threads. I generally write about tech, mobile app development, open-source, paid opportunities in tech, job updates & my journey! โœจ

If you loved this, like and retweet the first tweet to help others.
The epic thread ๐Ÿงต on the best "free" resources to start coding and go professional.

Basic Programming and Computing Concepts

CS50 by Harvard
Source:
https://t.co/GYXktrSbCw

Prerequisites: None

Probably the best free course for beginners and professionals alike. It goes through the very basics of programming and painlessly shifts to advance topics.

Programming with Python

CS50P by Harvard
Source: https://t.co/vv7YUWWVV8

Prerequisites: CS50 will help but not necessary.

Takes forward the best things of CS50 but in Python. Undoubtedly, the best Python Course you will find on the internet.

Artificial Intelligence (Theory Focused)

CS50's Introduction to Artificial Intelligence with Python by Harvard
Source: https://t.co/ms2c5mxdTC

Prerequisites: CS50P

This is a more theory and concept focused Course that will be your entry point to AI.

AI with Tensorflow

Tensorflow 2.0 Beginner Tutorial by Aladdin Persson
Source: https://t.co/D7hpDOazZA

Prerequisites: CS50P and CS50 AI with Python

The best beginners tutorial on Tensorflow.

You May Also Like

"I really want to break into Product Management"

make products.

"If only someone would tell me how I can get a startup to notice me."

Make Products.

"I guess it's impossible and I'll never break into the industry."

MAKE PRODUCTS.

Courtesy of @edbrisson's wonderful thread on breaking into comics โ€“
https://t.co/TgNblNSCBj โ€“ here is why the same applies to Product Management, too.


There is no better way of learning the craft of product, or proving your potential to employers, than just doing it.

You do not need anybody's permission. We don't have diplomas, nor doctorates. We can barely agree on a single standard of what a Product Manager is supposed to do.

But โ€“ there is at least one blindingly obvious industry consensus โ€“ a Product Manager makes Products.

And they don't need to be kept at the exact right temperature, given endless resource, or carefully protected in order to do this.

They find their own way.