Pratham Profile picture
8 Apr, 8 tweets, 2 min read
5 HTML features probably you haven't heard yet

Thread 🧵👇🏻
1️⃣ enterkeyhint attribute

The enterkeyhint is a global attribute defines the action for "enter" key on virtual keyboard

It accpets the following values 👇🏻
2️⃣ sizes attribute

You may have heard about "size" attribute but did you know about "sizes" attribute?

The sizes attribute specifies the sizes of icons for visual media.

Check the compatibility here caniuse.com/?search=sizes
3️⃣ importance attribute

The importance attribute indicates the relative fetch priority for the resource.

Valid values for the importance attribute are:
- obsolete
- deprecated
- optional
- default
- low
- normal
- high
- recommended
- required
- urgent
4️⃣ slot attribute

The slot global attribute assigns a slot in a shadow DOM shadow tree to an element. An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value.
Read more about shadow DOM here

developer.mozilla.org/en-US/docs/Web…
5️⃣ inputmode attribute

The inputmode global attribute hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:

- none
- text
- decimal
- numeric
- tel
- search
- email
- url
Although some features are currecntly in experiment and not standardized yet.

But its good to know that HTML is much than few tags. It is deep.

Anything you want add in this thread?

• • •

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!

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

10 Apr
Are you planning to learn React in 2021? Here are some free courses for you

🧵 👇🏻
1️⃣ Course on Scrimba

You'll learn key React features while building two apps and practice what you learn through interactive coding challenges and exercises along the way.

🔗 scrimba.com/learn/learnrea… Image
2️⃣ Course on Codecademy

You’ll develop a strong understanding of React’s most essential concepts: JSX, class and function components, props, state, lifecycle methods, and hooks. And able to combine these ideas in React’s modular programming style

🔗 codecademy.com/learn/react-101 Image
Read 6 tweets
9 Apr
These 9 websites will help you improve your JavaScript knowledge

🧵👇🏻
1️⃣ JavaScript visualizer

- A great visualizer for JavaScript code

🔗 jsv9000.app
2️⃣ JavaScript Tutorial

- This JavaScript Tutorial helps you learn JavaScript programming language from scratch quickly and effectively.

🔗 javascripttutorial.net Image
Read 11 tweets
8 Apr
These 30 free CSS generators can help you immensely and save you a lot of time

Mega Thread 🧵
1️⃣ Animation Generator

- Dead simple visual tools to help you generate CSS for your projects.

🔗 keyframes.app
2️⃣ Palette Ninja

- Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds.

🔗 palette.ninja Image
Read 31 tweets
8 Apr
I compiled 22 cheat sheets in a single PDF. If you are interested, you can download it for absolutely free

🔗 github.com/PrathamKumar14…
Table of content

1. Grid cheat sheet
2. Two axes of Flexbox
3. Alignment in layouts
4. Alignment in layouts (older version)
5. Grid overview
6. Flex cheat sheet
7. Display
8. Positioning in CSS
9. CSS selectors
10. animation-timing-function
11. CSS Box-model
12. Z-index
13. Semantic elements
14. Border-style
15. CSS pseudo classes
16. DOM addEventListener method
17. JavaScript Array methods
18. Arrow function
19. DOM
20. Functions
21. Tailwind Flex classes
22. Git workflow
Read 4 tweets
7 Apr
Everything you need to know about CSS Flex layout

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

{ 2 / 16 }
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 }
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…
📌 Magic of CSS

- A CSS course to turn you into a magician

🔗 github.com/adamschwartz/m…
Read 6 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!