Pratham Profile picture
29 Apr, 11 tweets, 4 min read
10 HTML tips I bet you are not familiar with 🧡 πŸ‘‡πŸ»
HTML Tip 1

The input with type image defines an image as a submit button. With src attribute that specifies the link to the image
HTML Tip 2

The "step" attribute specifies the interval between legal numbers in an <input> element

Suppose I want the user to only select Sundays in the input date then I'll mention the upcoming Sunday date with 7 stepsDown pointing backhand index
HTML Tip 3

The iframe sandbox attribute enables an extra set of restrictions for the content in the iframe

For example, In this particular case form submission is allowed
HTML Tip 4

The "poster" attribute specifies an image to be shown while the video is downloading, or until the user hits the play button

Its like a thumbnail
HTML Tip 5

The "spellcheck" attribute is used to check the spelling and Grammar.
HTML Tip 6

Use "translate" attribute and set it value to "no" for your company name.
So that in case, the webpage is translated into another language, your brand name will remain intact
HTML Tip 7

The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break

When a word is too long, the browser might break it at the wrong place. You can use the <wbr> tag to add word break opportunities
HTML Tip 8

While adding anchor tag for downloading a file, you can specify the file name also

Like this Right pointing backhand index download = "pratham-resume"
HTML Tip 9

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
HTML Tip 10

The "ping" attribute of <a> tag

When the user clicks on the hyperlink, the ping attribute will send a short HTTP POST request to the specified URL

β€’ β€’ β€’

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

30 Apr
5 seamless single div css art that anyone can create for fun πŸ“±πŸŒ₯οΈπŸŽ§πŸ‘“πŸš€

🧡 πŸ‘‡πŸ»
1️⃣ Mobile Phone πŸ“±

Complete code: codepen.io/prathkum/pen/W… Image.phone {   position: relati...
2️⃣ Cloud πŸŒ₯️

Complete code: codepen.io/prathkum/pen/V… Image.cloud {   height: 50px;   ...
Read 8 tweets
29 Apr
6 amazing GitHub repositories that can help you in your web development journey

🧡 πŸ‘‡πŸ»
1️⃣ frontend-guidelines

- Some HTML, CSS and JS best practices.

πŸ”— github.com/bendc/frontend…
2️⃣ awesome-learning-resources

- Awesome list of resources on Web Development.

πŸ”— github.com/lauragift21/aw…
Read 7 tweets
29 Apr
The next 19 tweets will help you start your JavaScript journey with zero inconvenience

🧡 πŸ‘‡πŸ»
Some valid reasons why you should learn JavaScript

πŸ”Ή Currently used by 94.5% websites
πŸ”Ή Wide range of applications including mobile and desktop devices
πŸ”Ή Most in-demand language

{ 2 / 20 }
Here's a crash course of JavaScript by Freecodecamp.

Crash courses are just for quick look. Don't just stop learning after it. Keep exploring things by your own



{ 3 / 20 }
Read 20 tweets
28 Apr
5 amazing CSS properties you won't believe really exist 🎨

🧡 πŸ‘‡πŸ»
1️⃣ touch-action

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

This propety accepts the following values πŸ‘‡πŸ»
2️⃣ will-change

You can optimize the performance of your web page by adding one line of CSS🀯

The will-change CSS property hints to browsers how an element is expected to change. It can increase the speed by doing potentially expensive work before they are actually required.
Read 9 tweets
27 Apr
5 simple single div CSS arts you can try 🎨

{ 1 / 5 } 🧡
2. Yin and Yang ☯️
3. Coffee β˜•
Read 5 tweets
27 Apr
These 13 web development code snippet websites can save you a lot of time

A thread 🧡
1️⃣ W3 Schools How to

- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS and JavaScript

πŸ”— w3schools.com/howto/default.…
2️⃣ Code My UI

- Handpicked collection of Web Design & UI Inspiration with Code Snippets.

πŸ”— codemyui.com
Read 14 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!