Pratham Profile picture
30 Apr, 8 tweets, 4 min read
5 seamless single div css art that anyone can create for fun 📱🌥️🎧👓🚀

🧵 👇🏻
1️⃣ Mobile Phone 📱

Complete code: codepen.io/prathkum/pen/W… .phone {   position: relative;   height: 128px;   width: 72p
2️⃣ Cloud 🌥️

Complete code: codepen.io/prathkum/pen/V… .cloud {   height: 50px;   width: 140px;   background: #6EC4
3️⃣ Headphones 🎧

Complete code: codepen.io/prathkum/pen/w… .headphones {   height: 40px;   width: 40px;   background: w
4️⃣ Spectacles 👓

Complete code: codepen.io/prathkum/pen/J… .specs {   height: 10px;   width: 150px;   background: black
5️⃣ Rocket 🚀

Complete code: codepen.io/prathkum/pen/y… .rocket {   position: relative;   height: 400px;   width: 20
Which one is your favourite? Drop the link of your creation below 😉

• • •

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

2 May
Check out these 10 amazing GitHub repositories 😼

🧵 👇🏻
1. github.com/gztchan/awesom…
- 🌟Curated design resources

2. github.com/DovAmir/awesom…
- A curated list of software and architecture related design patterns 🎨
3. github.com/lnishan/awesom…
- 💎 A curated list of awesome Competitive Programming, Algorithm and Data Structure resources

4. github.com/microsoft/node…
- Tips, tricks, and resources for working with Node.js
Read 6 tweets
1 May
z-index is a powerful yet confusing concept of CSS. But this short thread will solve all your doubts related to it.

Thread🧵 👇🏻 Image
z-index is a CSS property that controls stacking order of elements along z axis.

Image a hypothetical line starting from your eye to screen, that is z-axis
Note that z-index only works on positioned elements.

You need to specify the position (relative, absolute, sticky, fixed) if you want to arrange an element using z-index ImageImage
Read 8 tweets
29 Apr
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
Read 11 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

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!