🔰10 HTML Tips and Tricks:
HTML has lots of useful elements and attributes that some people don't know about. Check out this list of tips and tricks that can help you achieve better results with HTML.
#100DaysOfCode #HTML
Thread 🧵👇
HTML has lots of useful elements and attributes that some people don't know about. Check out this list of tips and tricks that can help you achieve better results with HTML.
#100DaysOfCode #HTML
Thread 🧵👇
1) Color Picker:
Did you know you can create a nice color picker using only HTML?
Check it out:
Did you know you can create a nice color picker using only HTML?
Check it out:
2) Progress bar:
You can also create a progress bar using only HTML with the progress element. It can be used in order to show the progress of a task such as a file upload/download.
You can also create a progress bar using only HTML with the progress element. It can be used in order to show the progress of a task such as a file upload/download.
3) Meter tag:
You can use the meter element to display measured data within a certain range with min/max/low/high values, such as temperature.
You can use the meter element to display measured data within a certain range with min/max/low/high values, such as temperature.
4) Input search:
You can set an input's type attribute to search to create a search input field. The nice thing is it adds the "x" button that allows the user to quickly clear the field.
You can set an input's type attribute to search to create a search input field. The nice thing is it adds the "x" button that allows the user to quickly clear the field.
5) Start attribute in ordered lists:
You can use the start attribute to specify the start value of an ordered list.
You can use the start attribute to specify the start value of an ordered list.
6) Responsive images:
Use the picture tag to display different images according to the window size.
It's useful to make your website more responsive.v
Use the picture tag to display different images according to the window size.
It's useful to make your website more responsive.v
7) Highlight text:
Use the mark tag to highlight text. The default color is yellow but you can change it by setting the background-color attribute to any other color you like.
Use the mark tag to highlight text. The default color is yellow but you can change it by setting the background-color attribute to any other color you like.
8) Interactive widget:
You can use the details tag to create a native accordion that the user can open and close.
Tip: the summary element should be the first child of the details tag.
You can use the details tag to create a native accordion that the user can open and close.
Tip: the summary element should be the first child of the details tag.
9) Native Input Suggestions:
You can use the datalist element to display suggestions for an input element.
The input's list attribute must be equal to the id of the datalist.
You can use the datalist element to display suggestions for an input element.
The input's list attribute must be equal to the id of the datalist.
10) Open all links in a new tab:
You can set the base element target attribute to blank so when the user clicks a link it always opens in a new tab. It is useful if you want to avoid users unintentionally leaving a certain page.
You can set the base element target attribute to blank so when the user clicks a link it always opens in a new tab. It is useful if you want to avoid users unintentionally leaving a certain page.
if you find it useful consider follow @TalhaCode and Retweet the first tweet for inspiring me more such content.
Loading suggestions...