Check out these 3 things that will prove how powerful CSS is

πŸ§΅πŸ‘‡πŸ»
1️⃣ Pure CSS Typewriter effect

- You can create cool typing effect using steps() function of animation-timing-function
Check out the full source code here πŸ‘‡πŸ»

codepen.io/prathamkumar/p…
2️⃣ Carousel

You can create image carousel using CSS only

πŸ”— codepen.io/prathkum/pen/b…
Output
3️⃣ Zoom image with custom cursor

- Zoom image on hover using one line of CSS

πŸ”— codepen.io/prathamkumar/p…
Output

β€’ β€’ β€’

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 Jun
CSS Animation and CSS Transition are two different modules of CSS but many of us get confused that when to use which one?

Let's try to explore more about them 🧡 πŸ‘‡πŸ»
Though there are some similarities in animation and transition but first let's try to find out the real difference
Transition is something that needs to be triggered. For example, changing the height when the user hover the element

On the other side, animations do not need to be triggered.
Read 10 tweets
7 Jun
5 great favicon websites for every web developer and designers πŸ”―

πŸ§΅πŸ‘‡πŸ» Image
1. Favicon

The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis.

πŸ”— favicon.io Image
2. Favicon .cs

favicon .cc is a tool to create or download favicon.ico icons, that get displayed in the address bar of every browser.

πŸ”— favicon.cc Image
Read 6 tweets
7 Jun
Web development is all about exploration. If you are learning this, explore more and learn more from these websites

🧡 πŸ‘‡πŸ»
πŸ“Œ HTML

1. Learn HTML
learn-html.org

2. HTML best practice
hail2u.github.io/html-best-prac…

3. HTML reference
htmlreference.io Image
πŸ“Œ CSS

1. CSS reference
cssreference.io

2. Learn to code
learn.shayhowe.com

3. CSS layout
learnlayout.com

4. CSS tutorial
csstutorial.net

5. Learn about colors
hexinvaders.com Image
Read 4 tweets
7 Jun
5 HTML features probably you haven't heard yet

πŸ§΅πŸ‘‡πŸ»
1️⃣ enterkeyhint attribute

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

It accpets the following values πŸ‘‡πŸ» Image
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 Image
Read 7 tweets
5 Jun
Introduction to Event Loop ➰

Event loop is the confusing concept in JavaScript but you need to know about it because whole JavaScript is based on this programming construct.

Let's try to understand it in a simple way πŸ§΅πŸ‘‡πŸ»
Before diving into it, we need to understand what multithreading is?

Multithreading is nothing but a programming feature by which we can make maximum use of CPU by running two or more parts of program simultaneously
πŸ“Œ What exactly event loop is?

Event loop is a programming concept or design pattern that makes the JavaScript a multithreaded language
Read 13 tweets
5 Jun
CSS is also a deep module of web development. There are over 250 unique properties

Do we need to learn them all? Let's try to figure out how much CSS will be enough

🧡 πŸ‘‡πŸ»
CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...
CSS is totally operates on properties value pair. And there are around ~300 distinct properties in CSS
Read 17 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!

:(