Top Tweets for #20DayCSSChallenge
Completed the CSS challenge. Though it took me 36 days.
#20DayCSSChallenge #20DaysCSSChallenge #CSS
Though initially when I started web dev. I read docs, trial and error methods and used bootstrap.
But this time did a deep dive. And its amazing.
https://t.co/9hzoPSFZiz
While building full stack apps, the most problematic issue for me is #CSS. I know the basics of it but always stuck when need to do custom styling. Hours of #stackoverflow & #ChatGPT. So going deeper in CSS for 20 days. Will be sharing insights. Stay tuned!
#20DayCSSChallenge
Day 20: CSS Animations
This is the most fun property in css. You can literally through keyframes (ie states in animation) make any element do anything.
Like below I made rectangle wave on horizontal axis.
#20DayCSSChallenge #20DaysCSSChallenge #CSS
Day 19: CSS Transform
This property helps in rotate, scale and move the element. Most fun usage of this property can be seen in animations. There are no transitions just single state.
Like in below image we rotated the rectangle.
#20DayCSSChallenge #20DaysCSSChallenge #CSS
Pheww! Took me 33 days consistently on 2x speed. And applying the knowledge. Thanks @maxedapps and Manuel Lorenz.
#20DayCSSChallenge #20DaysCSSChallenge #CSS
Day 15: CSS Variables
Always use css variables. Especially the color palette you are using. This will help in changing themes. Or adding dark theme to your project easily. Define it in root.
It will not hurt to use #DRY principle.
#20DayCSSChallenge #20DaysCSSChallenge #CSS
Day 13-14: Flexbox's Core Concept
Everything in flexbox is revolving around the main and cross axis.
All properties are defined with respect to axes.
It can be difficult to understand at first. But froggy helps a lot. https://t.co/hrGnsmYnNk
#20DayCSSChallenge #CSS
Day 9: Background Size
Background image sizing is both broad and important concept to make your site look good.
If you want your image to cover whole container or to show the whole image, its done as shown below.
#20DayCSSChallenge #CSS
Do you know before flexbox and grid how people position their elements?
They used float. Even today in legacy code you can see float used here and there.
Positioning was one pain in the a$$ back then.
https://t.co/HvLy8Mdcc4
#20DayCSSChallenge #CSS
Before running the below command you need to install the ffmpeg package in ubuntu.
ffmpeg -i input.mkv -filter:v "setpts=PTS/100" -an output.mkv
Here "-an" is for muting audio. 100 is the x speed you need. It will convert 100 minutes file in 10 minutes
#20DayCSSChallenge #CSS
Day 7: Practice.
I thought lets practice what I have learnt so far. So using @iCodeThis platform for practice created this design.
Took me 1hr 40min to create the whole design. But took me 2 hrs to fast forward the .mkv video in 100x speed.
command 👇
#20DayCSSChallenge #CSS
As I am learning CSS in depth right now. So I tested the knowledge over @iCodeThis and felt really amazing. The reaction was, that much CSS I wrote myself? 😁
Anyone who is learning CSS or even learning to create beginners web projects should try this.
#20DayCSSChallenge #CSS
Day 4: Pseudo Classes & Pseudo Elements
I never understood what pseudo elements were. But they are not so hard to understand. Class or element they just tell about html elements.
The image below will help you understand.
#20DayCSSChallenge #CSS
Many time #CSS properties were not working. One of the many reasons can be specificity. CSS properties are iterated over particular order. That order depend on particular kind of selector. This order might overwrite your property.
My first try over #Canva.
#20DayCSSChallenge
Working group: https://t.co/xJzuNJYatX
#20DayCSSChallenge
No. They are not focusing on versioning now. Instead they split the CSS development into independent modules like colours, shadows, animations etc.
@csswg is responsible for development of working features.
#20DayCSSChallenge
While building full stack apps, the most problematic issue for me is #CSS. I know the basics of it but always stuck when need to do custom styling. Hours of #stackoverflow & #ChatGPT. So going deeper in CSS for 20 days. Will be sharing insights. Stay tuned!
#20DayCSSChallenge
Trends for you
Most Popular Users
Elon Musk 
@elonmusk
240.2M followers
Barack Obama
@barackobama
119.3M followers
Donald J. Trump
@realdonaldtrump
111.6M followers
Cristiano Ronaldo
@cristiano
109.4M followers
Narendra Modi
@narendramodi
106.9M followers
Rihanna
@rihanna
97.4M followers
NASA
@nasa
92.1M followers
Justin Bieber
@justinbieber
90.7M followers
KATY PERRY
@katyperry
87.1M followers
Taylor Swift
@taylorswift13
80.9M followers
Lady Gaga
@ladygaga
72.4M followers
Kim Kardashian
@kimkardashian
69.5M followers
Virat Kohli
@imvkohli
68.9M followers
YouTube
@youtube
68.6M followers
Bill Gates
@billgates
63.5M followers
The Ellen Show
@theellenshow
62.5M followers
CNN
@cnn
61.9M followers
Neymar Jr
@neymarjr
61.5M followers
X
@x
60.9M followers
Selena Gomez
@selenagomez
60.2M followers