Ravi Kumar Profile picture
Jan 24 β€’ 7 tweets β€’ 3 min read
Do you know about the HTML Meta tag for social media cards?

πŸ§΅πŸ‘‡
1⃣ Introduction

β€” A social media card is a visual representation of the content of a specific web page on a social media platform it is being shared on.

β€” If your website has a social media card, it looks more appealing and provides additional information for people.
2⃣ Twitter card tag

β€” The Summary Card can be used for many kinds of web content, from blog posts and news articles to products and restaurants.

β€” It gives the reader a preview of the content before clicking through to your website.
3⃣ Meta tag attribute

Twitter: title - represents the web page title
Twitter: description - the description of your web page
Twitter: image - an image URL

NoteπŸ’‘
all meta tags should be placed at the head of your web page.
4⃣ Open Graph meta tags

β€” The Open Graph meta tags are used by most of the social media platforms, most known are Facebook and LinkedIn.

β€” Open Graph meta tags to take control over how your content appears on Facebook & LinkedIn like image, content, etc.
5⃣ Attributes

These meta tags have a property attribute that contains a value with the og: prefix and the content attribute:

og: title - represents the web page title
og: description - the description of your web page
of: image - an image URL
og: URL - the URL of your web page
Thanks for reading the thread, if you found it useful give the first one a retweet and if you have any suggestions tell me in a comment

πŸ”—πŸ‘‡

β€’ β€’ β€’

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

Keep Current with Ravi Kumar

Ravi Kumar Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

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

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @ravikmmr

Jan 23
Do you know about CSS Mask or Clip path property?

let's take a lookπŸ‘‡
1⃣ . Intro

β€” The CSS mask property is used to partially or fully hide an element at specific points.

β€” CSS clip-path is also used to hide an element by cutting its path

difference:-

β€” mask property is usually a two images combination.
β€” clip-path cuts the path of an image.
2⃣ Syntax :

β€” CSS mask :
you have to define two images, whether both in the background or one in Html and the other in mask property

.element {
mask-image: url(star.svg);
}

β€” CSS clip :
define the path and apply property.

clip-path: polygon(50% 5%, 0% 100%, 100% 100%);
Read 5 tweets
Jan 22
CSS properties to improve your responsive design of web pageπŸ’‘πŸ’ͺ

πŸ§΅πŸ‘‡ Image
1⃣ Use Em / Rem

β€” Always try using em/percentage/rem instead of px, so that the text, images size adjust regarding the device-width Image
2⃣ Padding/Margin

β€” we usually use a lot of padding when we make websites for desktops, to make them more attractive.

β€” While making it responsive for mobiles, tablets try decreasing the existing padding and margin. Image
Read 8 tweets
Jan 18
Do you know about CSS Scroll-Snap?

πŸ§΅πŸ‘‡
1⃣. What is CSS scroll-snap?

1. It is a CSS property that helps you to make your page more accessible to all devices.

2. Helps you to make more user-friendly websites

ExampleπŸ‘‡
2⃣. How to Implement

1. To use scroll snap on a container, its child items should be displayed inline.

2. We can use the flexbox property for that.

3. Define the scroll-snap type.

Syntax :
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity]
Read 13 tweets
Aug 7, 2021
Do you know about HTML layout ??

πŸ§΅πŸ‘‡ Image
1⃣ Introduction of HTML layout

HTML layout is used to structure a web page in a proper manner so it looks better and gives a proper responsive web page.

It helps users easy to navigate the web page and it easily makes by using standard Html tags. Image
2⃣ Why it is used ??

1. It Simplifies navigation by clarifying the structure.

2. It Makes the design more visually appealing.

3. It helps to make the page in a more responsive form.

4. helps users to easily navigate the web page.
Read 8 tweets
Aug 5, 2021
Top Five udemy courses for web development πŸ’―πŸ˜Ž

πŸ§΅πŸ‘‡

some of the best list of courses that helps you to get started in the world of front-end development.

many people DM me where to start so these are courses for them who want to start or brush up their skills!!
01. The Complete 2021 Web Development Bootcamp

this course is created by @yu_angela, This course gives you a brief intro about the web development world, she discusses the full stack development this is the best course to get started

πŸ”—πŸ”—

udemy.com/course/the-com…
02. The Web Developer Bootcamp 2021

This course is created by colt Steele, he covers all the topics related to web development so goes and start!!

πŸ”—πŸ”—

udemy.com/course/the-web…
Read 7 tweets
Aug 4, 2021
Quick cheat sheet πŸ˜ŽπŸ’―

πŸ§΅πŸ§΅πŸ‘‡πŸ‘‡

HTML, CSS & GIT cheat sheet for a quick revision for interviews and it also helps to memorize all the concept
01. GIT Cheatsheet

In this GIT cheat sheet, there are some important GIT commands that you should definitely know!

πŸ‘‡πŸ‘‡
02. HTML & CSS cheat sheet

πŸ‘‡πŸ‘‡

Read 4 tweets

Did Thread Reader help you today?

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

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(