Share this page!

Maybe Scrolly?
Ravi Kumar Profile picture
Twitter logo
Feb 3 β€’ 8 tweets β€’ 2 min read
BAD CSS Practice to avoid.

πŸ§΅πŸ‘‡
1⃣ Not using shorthand properties

πŸ‘‡
2⃣ Use PX when it's not needed

πŸ‘‡
3⃣ Repeating the same code

πŸ‘‡
4⃣ No font fallback

πŸ‘‡
5⃣ Using colour names

πŸ‘‡
6⃣ Didn't use !Important Keyword precisely

πŸ‘‡
Thanks for reading the thread.

If you find it useful. Give the first one a retweet and if you have any feedback, let me know in the comment.

πŸ”—

β€’ β€’ β€’

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

Keep Current with Ravi Kumar

Ravi Kumar 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 @ravikmmr

Ravi Kumar Profile picture
Feb 4
Projects to brush up on your Html skills.

πŸ§΅πŸ‘‡ Image
1⃣ HTML personal website

create your portfolio website and use as many tags as possible for your portfolio like <table> tag , <img> tag,<hr> tag etc.

Snapshot of ProjectπŸ‘‡ Image
2⃣ Documentation page

create your own documentation page for your notes and report with your own functionality and practice all links, heading, and paragraph tags.

Snapshot of ProjectπŸ‘‡ Image
Read 8 tweets
Ravi Kumar Profile picture
Jan 24
Do you know about the HTML Meta tag for social media cards?

πŸ§΅πŸ‘‡
1⃣ Introduction

β€” A social media card is a visual representation of the content of a specific web page on a social media platform it is being shared on.

β€” If your website has a social media card, it looks more appealing and provides additional information for people.
2⃣ Twitter card tag

β€” The Summary Card can be used for many kinds of web content, from blog posts and news articles to products and restaurants.

β€” It gives the reader a preview of the content before clicking through to your website.
Read 7 tweets
Ravi Kumar Profile picture
Jan 23
Do you know about CSS Mask or Clip path property?

let's take a lookπŸ‘‡
1⃣ . Intro

β€” The CSS mask property is used to partially or fully hide an element at specific points.

β€” CSS clip-path is also used to hide an element by cutting its path

difference:-

β€” mask property is usually a two images combination.
β€” clip-path cuts the path of an image.
2⃣ Syntax :

β€” CSS mask :
you have to define two images, whether both in the background or one in Html and the other in mask property

.element {
mask-image: url(star.svg);
}

β€” CSS clip :
define the path and apply property.

clip-path: polygon(50% 5%, 0% 100%, 100% 100%);
Read 5 tweets
Ravi Kumar Profile picture
Jan 22
CSS properties to improve your responsive design of web pageπŸ’‘πŸ’ͺ

πŸ§΅πŸ‘‡ Image
1⃣ Use Em / Rem

β€” Always try using em/percentage/rem instead of px, so that the text, images size adjust regarding the device-width Image
2⃣ Padding/Margin

β€” we usually use a lot of padding when we make websites for desktops, to make them more attractive.

β€” While making it responsive for mobiles, tablets try decreasing the existing padding and margin. Image
Read 8 tweets
Ravi Kumar Profile picture
Jan 18
Do you know about CSS Scroll-Snap?

πŸ§΅πŸ‘‡
1⃣. What is CSS scroll-snap?

1. It is a CSS property that helps you to make your page more accessible to all devices.

2. Helps you to make more user-friendly websites

ExampleπŸ‘‡
2⃣. How to Implement

1. To use scroll snap on a container, its child items should be displayed inline.

2. We can use the flexbox property for that.

3. Define the scroll-snap type.

Syntax :
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity]
Read 13 tweets
Ravi Kumar Profile picture
Aug 7, 2021
Do you know about HTML layout ??

πŸ§΅πŸ‘‡ Image
1⃣ Introduction of HTML layout

HTML layout is used to structure a web page in a proper manner so it looks better and gives a proper responsive web page.

It helps users easy to navigate the web page and it easily makes by using standard Html tags. Image
2⃣ Why it is used ??

1. It Simplifies navigation by clarifying the structure.

2. It Makes the design more visually appealing.

3. It helps to make the page in a more responsive form.

4. helps users to easily navigate the web page.
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

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Like this author's thread?

Get emails when @ravikmmr has new unrolls!

Check out other threads from @ravikmmr!

Read all threads by @ravikmmr

:(