Tweet

Vansh Sharma 🧑‍💻

14 Jul, 11 tweets, 4 min read

14/7/2021
📌📌 CSS Background Properties 📌📌
In this 🧵 we are going to discuss:

▶️ background-color
▶️ background-image
▶️ background-position
▶️ background-size
▶️ background-repeat
▶️ background-origin
▶️ background-clip
▶️ background-attachment

#DEVCommunity
#CSS3

1⃣ background-color: The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

3⃣ background-position: The background-position property sets the starting position of a background image.

4⃣ background-size: he background-size property specifies the size of the background images.

values: auto | cover | contain | length

5⃣ background-repeat: The background-repeat property sets if/how a background image will be repeated.

Values: repeat | repeat-x | repeat-y | no-repeat

6⃣ background-origin: The background-origin property specifies the origin position (the background positioning area) of a background image.

Values: padding-box | content-box | border-box

7⃣ background-clip: The background-clip property defines how far the background (color or image) should extend within an element.

Values: border-box | padding-box | content-box |

8⃣ background-attachment: The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.

Values: scroll | fixed | local |

⚠️ ⚠️ Shorthand for background

9⃣ background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment

@Vanshsh2701

▶️▶️▶️ If you learnt from this 🧵

- Do LIKE/RETWEET ♥️
- Follow @Vanshsh2701 for more threads like this

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

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

More from @Vanshsh2701

Vansh Sharma 🧑‍💻

@Vanshsh2701

15 Jul

15/7/2021
📌📌CSS Border Properties📌📌
In this we will discuss:

#100DaysOfCode
#DEVCommunity

1⃣ border-collapse: The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Values: separate | collapse

2⃣ border-image: The border-image property allows you to specify an image to be used as the border around an element.

Border-image property :
▶️ border-image-source
▶️ border-image-slice
▶️ border-image-width
▶️ border-image-outset
▶️ border-image-repeat

Read 10 tweets

Vansh Sharma 🧑‍💻

@Vanshsh2701

13 Jul

13/7/2021 🧵

📌📌CSS Animation📌📌

CSS allows animation of HTML elements without using JavaScript or Flash!

1⃣ animation-name: The animation-name property specifies a name for the keyframes animation.

2⃣ animation-duration: The animation-duration property defines how long an animation should take to complete one cycle.

Note: Always specify the animation-duration property, otherwise the duration is 0, and will never be played.

Read 11 tweets

Vansh Sharma 🧑‍💻

@Vanshsh2701

1 Jul

🗺️HTML/CSS Roadmap for beginners with resources.
If you have done all these things. You can proudly put
HTML/ CSS on your resume.👇👇
Congratulations, Now you have added two more skills in your stack
🧵🧵

1⃣ Fast Learning: 🔗 rb.gy/wcpfx7
As I always say. If you are self-taught. Then before starting new skills go for fast learning because it will give you confidence and an idea about What all is going to come in your way.

2⃣ Basics:
🔗w3schools.com : Do HTML/CSS.

🔗rb.gy/as2yex: Practice and certificate

🔗web.dev/learn/css/: CSS

What I think is only videos will not work unless you read by yourself and make notes.
So do take handwritten notes. It really works.

Read 6 tweets

Vansh Sharma 🧑‍💻

@Vanshsh2701

30 Jun

5⃣ Open Source Contribution Platforms
🧵🧵

1⃣ Google Summer of Code: summerofcode.withgoogle.com

2⃣ Outreachy: outreachy.org

Read 6 tweets

Vansh Sharma 🧑‍💻

@Vanshsh2701

30 Jun

🎯 Simple JavaScript Roadmap with resources.
🧵👇

1⃣ Start with fast learning: 🔗rb.gy/4ftn3c

This is like Reading Chapter Summary before reading the actual chapter. Don't worry if you don't get it during this process. It is just to make you familiar with topics.

2⃣ Build Something:🔗 rb.gy/z4oovl

Now after learning in 1⃣ Step. You should build projects don't worry. If you don't have any idea about what to do.
Follow this video.

Read 6 tweets

Vansh Sharma 🧑‍💻

@Vanshsh2701

29 Jun

4⃣Twitter tools that will help you manage your Twitter account like professionals.
#DEVCommunity

1⃣ SocialOomph 🔗rb.gy/krhhvh

Some of the features that make this one must-have tool:
Auto send DM to new followers
Automatic follow new followers
Send recurring tweets
Delete all DM or Tweets

2⃣ AgoraPulse 🔗 agorapulse.com

Here are a few features:
Automatically delete spam, get rid of trolls
Monitor all tweets,
mentions from a single screen.
Use templates to reply to tweets.
Offers Chrome extension

Read 5 tweets

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!