Powerful part of HTML

๐Ÿงต๐Ÿ‘‡๐Ÿป
1๏ธโƒฃ <wbr>

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
2๏ธโƒฃ <bdi>

The HTML Bidirectional Isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
3๏ธโƒฃ <pre>

Text in a <pre> element preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code
4๏ธโƒฃ <code>

The HTML <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
5๏ธโƒฃ <sub>

The HTML Subscript element (<sub>) specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
6๏ธโƒฃ <sup>

The HTML Superscript element (<sup>) specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
7๏ธโƒฃ <progress>

The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

โ€ข โ€ข โ€ข

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

7 May
11 great websites a programmer should visit

Thread ๐Ÿงต๐Ÿ‘‡๐Ÿป
Can I use?

- A website that provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

๐Ÿ”— caniuse.com Image
Web Skills

Websites for all kind of learning resources for web developers

- Fundamentals
- Accessibility
- Web components
- Progressive web apps
- Frameworks and libraries
- Testing
- Architecture and Paradigm
- UI and UX
- DS and Algo

๐Ÿ”— andreasbm.github.io/web-skills/ Image
Read 12 tweets
7 May
I joined Tech Twitter 11 months ago and during this time I made around 72K audience.

Everyone can do this. Let me share how ๐Ÿงต Image
1๏ธโƒฃ Find your niche

Evaluate your passions and skills. And share something in the community in which you are good at. This is how you can let the people know that new member joined in the community recently

This is how I started ๐Ÿ‘‡๐Ÿป ImageImageImageImage
2๏ธโƒฃ Use big accounts smartly ๐Ÿ˜Ž

I have noticed many people tag big accounts in their tweet in order to get impressions. This is not the right thing.

You can reply on the posts of big accounts and by doing so there might be some chances of getting impressions on your reply....
Read 16 tweets
7 May
7 amazing websites that will help you improve your CSS skills

๐Ÿงต๐Ÿ‘‡
1๏ธโƒฃ Learn to code HTML and CSS

- Learn how to build beautiful and intuitive websites by way of clear and organized lessons

๐Ÿ–‡๏ธ learn.shayhowe.com Image
2๏ธโƒฃ CSS reference

- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content

๐Ÿ–‡๏ธ cssreference.io Image
Read 8 tweets
6 May
Do you have videos in your webpage?

Here are 4 tips to style video like a pro โ†“
Adding subtitles is always good from accessibility point of view.

You can style the subtitles of video on your website using ::cue pseudo-element
The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.

You can use it for style video on your webpage when its picture-in-picture mode
Read 5 tweets
6 May
Web development is a beauty :)
I love learning beautiful things so I'm doing it.

Often beautiful things are difficult to master so it is
Too many languages to learn
Too many frameworks
Too many things....

Focusing on one at a time can make the process easier.
Read 4 tweets
6 May
Aurora UI is a latest visual trend in 2021. Let's see how we can create that using CSS in 4 simple steps

Thread ๐Ÿงต๐Ÿ‘‡๐Ÿป
You can create beautiful aurora design hardly in 10 minutes. It is all about creating mesh gradients.

You can create gradient backgrounds using `linear-gradient()` or `radial-gradient()` but here we are creating cambered gradients

{ 2 / 8 }
Step 1๏ธโƒฃ: Create container

Just create a simple div with fixed height and width.

{ 3 / 8 }
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!

:(