Hardik Babla

Btech CSE l 2nd yr
Learning Full-Stack @ ChaiCode
Learning in Public 🚀

[Hardik Babla @hardikdotdev]

How computers connect securely:

I broke down the TCP 3-way handshake (SYN, SYN-ACK, ACK) in my new blog!

https://t.co/5zeoPwXAwX

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

3 JavaScript gotchas I studied today:

Array(3) → 3 empty slots, not [3]
[10, 9, 1].sort() → [1, 10, 9]
Object.freeze() → no edits at all

Run the code. Watch what happens.

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

Perfect centering in CSS, 3 lines
(give it a height):

display: flex;
justify-content: center;
align-items: center;

Flexbox and Grid blog: https://t.co/olKbl5TEfW

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

Today's JavaScript lesson, in 3 surprises:

0.1 + 0.2 === 0.3 → false
typeof null → "object"
intercepted[0] = "J" → silently does nothing

JS is weird. That's why we learn it by testing.

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

typeof null → "object"
typeof [] → "object"
typeof NaN → "number"

JS data types look simple until you test them. Revised today in JS refresher T - 3 class.

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

I added a "NEW" badge to a card.
It flew to the page corner instead 😵
The fix: position: relative on the parent.

Full guide 👇
https://t.co/jJy7C3sWjz

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

map() isn't magic. I built my own today.

Loop through the array, call your function on each item, push the result into a new array.

map( e => e * 10 + 1 ) on [ 3, 10, 24, 90 ] gives [ 31, 101, 241, 901 ]

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

@DeveshGayn7134 @ChaiCodeHQ @Hiteshdotcom @yntpdotme @piyushgarg_dev @nirudhuuu Yes bro, how can i help??

[Hardik Babla @hardikdotdev]

console.log(age);
var age = 32;
Output: undefined. No error.

JavaScript runs in two phases :
memory first (age = undefined), then code.
That's hoisting.

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

Ever set a card width to 600px on your laptop, only for it to overflow on mobile?

I broke down how CSS units actually scale:

https://t.co/KzONvccsV0

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

Best lesson from Chai aur Tailwind? Look before you build. We analyzed a real landing page class by class before coding.
​#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

Here's the code:
https://t.co/EBGr2khCZs

I'm still learning and I'd love your feedback.

[Hardik Babla @hardikdotdev]

ElevenLabs "Book a personalized demo" page, rebuilt:

HTML and CSS only. Two-panel layout, CSS variables, zero JavaScript.

Live on Netlify :
https://t.co/qM2iRQu1Jf

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

Here's the code:
https://t.co/KbHv3BICWR

If you spot anything in my HTML or CSS that could be cleaner, tell me. I'm still learning and I'd love your feedback.

[Hardik Babla @hardikdotdev]

ElevenLabs sign-up page, rebuilt:

Only HTML and CSS. Zero JavaScript.

Live on Netlify :
https://t.co/FqWMMy56R6

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

A class of 30 students:

"Come here" → p (everyone)
"Wearing glasses" → .class (a few)
"Rahul, row 3" → #id (just one)

That's CSS selectors made simple.

New Blog: https://t.co/xYlmmkJIIW

#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

CSS Grid in 3 lines:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
That's a 3x3 layout. Add grid-row: 1 / span 2 and one child takes two rows.
#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

ul>li*3 + Tab = a full HTML list.

That's Emmet. I wrote 2 new blogs :
Emmet for faster markup, and HTML tags and elements, the building blocks of every webpage.

Read them: https://t.co/qoaQNm9xIN

#LearnInPublic #chaicode #HTML

[Hardik Babla @hardikdotdev]

5 boxes. 3 lines of CSS. Perfectly spaced.
display: flex;
flex-direction: row;
justify-content: space-evenly;
Flexbox : you style the parent, and the children follow.
#LearnInPublic #chaicode

[Hardik Babla @hardikdotdev]

A page loads in under a second. How?

New series: HTML, CSS & the Browser.
Part 1: DOM, CSSOM, render tree, paint.

read here : https://t.co/cToiq9dfrp

#LearnInPublic #chaicode