16 amazing HTML attributes that are so powerful and maybe you haven't heard of them yet

1️⃣ Type

The "type" attribute of <ol> element let you change the type of order i.e, numeric, alphabetic or roman numbers
2️⃣ Target

"Open link in new tab" by just adding 'target' attribute as "_blank"
3️⃣ Accesskey

You can create shortcut key for your element using "accesskey" attribute.

It will focus or activate a particular element on your web page.
4️⃣ Make a skype call / chat

Did you know you can create a link for skype chat or call?
5️⃣ Multiple

Using "multiple" attribute of input element, user is allowed to enter more than one value in the <input> element

It is valid for type email and file only
6️⃣ Translate

The translate attribute specifies whether the content of an element should be translated or not

You can use it in your brand name so that whenever page translated to other language, your brand name will keep same
7️⃣ sandbox

Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions
sandbox attribute accepts following values
8️⃣ Custom attribute

HTML allow us to create our custom attribute as well so that we can store some data associated with it

The data-* attribute
9️⃣ Reversed

Reversed attribute simply reverse the numbering of ordered list. Instead to 1, 2, 3... It will be 3, 2, 1
🔟 Poster

Specifies an image to be shown while the video is downloading, or until the user hits the play button. You can consider it as a thumbnail
1️⃣1️⃣ Pattern

Specifies a regular expression that an <input> element's value is checked against. For example, a password field must contain 8 or more characters
1️⃣2️⃣ Spellcheck

The "spellcheck" attribute is used to check the spelling and Grammar.
1️⃣3️⃣ Tabindex

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

For example, the element with tabindex="1" will be focused when user press the tab first time
Check this pen for better understanding

1️⃣4️⃣ Accept

The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload)
1️⃣5️⃣ Loop

Loop is a boolean attribute. When present, it specifies that the audio / video will start over again, every time it is finished.
1️⃣6️⃣ Draggable

The draggable attribute specifies whether an element is draggable or not. It is often used in drag and drop operations.

• • •

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

Keep Current with Pratham 👨‍💻🚀

Pratham 👨‍💻🚀 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!


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 @Prathkum

7 Apr
Everything you need to know about CSS Flex layout

A Thread🧵 Image
Start appyling display: flex; property to parent element
This will take the all the elements in horizontal direction

{ 2 / 16 } ImageImage
You can also change the direction of elements. For doing so, you need to mention the "flex-direction" property

The flex-direction property specifies the direction of the items within the flex container

{ 3 / 16 } Image
Read 16 tweets
7 Apr
5 GitHub repositories that can help you writing better CSS code
📌 Awesome CSS Learning

- A tiny list limited to the best CSS Learning Resources

🔗 github.com/micromata/awes… Image
📌 Magic of CSS

- A CSS course to turn you into a magician

🔗 github.com/adamschwartz/m… Image
Read 6 tweets
6 Apr
Are you planning to learn React? If yes, these 35 tweets can make the process easier for you👇🏻

Long Thread🧵
If you just started or planning to getting started with React, this thread might help you.

In this thread I'll try to give you a quick overview to the world of React.

So if you find that sound interesting, give this thread a read😉

{ 2 / 35 }
Before you go further into the React, make sure to check these things

✅ Basic knowledge of HTML and CSS
✅ JavaScript fundamentals and ES6 features

I would like to suggest you build a decent hold on JavaScript concepts because that is the backbone of React

{ 3 / 35 }
Read 36 tweets
5 Apr
Complete resources pack to make a website from scratch

Editors ✍️

➸ codeinterview .io
➸ codesandbov .io
➸ codepen .io
➸ godbolt .org
➸ wandbox .org
➸ carbon .now.sh
➸ pastebin .com
➸ jsfiddle .net
➸ ideone .com
➸ jsbin .com
➸ ide .judge0.com
Color picker 🎨

🔹colorhunt .co
🔸webgradients .com
🔹gradienta .io
🔸0to255 .com
🔹colors .lol
🔸colorbrewer2 .org
🔹colormind .io
🔸flatuicolors .com
🔹happyhues .co
🔸color-hex .com
🔹farbvelo .elastiq.ch
Read 10 tweets
5 Apr
Are you planning to learn Front-end development in 2021?

Here is a quick start guide 👇🏻

Thread 🧵
You can start learning web development with backend as well but starting with Front-end is more beneficial.

Well it depends on person to person. Let's move forward 🔽

{ 2 / 28 }
First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc

I recommend you to start with VS code. Why?

Many built-in features
It's fast
Large community
IntelliSense code completion and debugging

{ 3 / 28 }
Read 28 tweets
4 Apr
Seven amazing tools / websites a developer should visit

A Thread 🧵👇🏻
1️⃣ linuxsurvival.com

Linux Survival is a free tutorial designed to make it as easy as possible to learn Linux. Even though Linux has hundreds of commands, there are only about a dozen you need to know to perform most basic tasks.
2️⃣ learn-anything.xyz

Search anything here and it will show you the correct roadmap
Read 8 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 Become our Patreon

Thank you for your support!

Follow Us on Twitter!