Built a simple digital clock using JavaScript’s Date object. Used basic string formatting and added AM/PM to make it more readable. Also styled it using vanilla CSS. It’s a small project, but it feels great to turn a random idea into something functional. Would love to hear your thoughts and suggestions for improvements.

TIL: CSS hex colors have 4 valid formats 🎨 Most of us use hex colors like #ffffff in CSS, but there are actually 4 valid hex formats: Refer image. 💡 JS tip: you can convert hex strings to numbers in two easy ways: parseInt("ff", 16) // 255 Number("0xff") // 255 Handy when extracting RGB values from hex colors in JavaScript. #TIL #css #javascript #frontend #webdevelopment

Default CSS list bullets can sometimes be… boring. • Same style • Same size • Same color But CSS lets you fully customize them. Using ::before pseudo-element and content property. Check out this Tailwind Demo: https://lnkd.in/d_NUB3cz #css #tailwind #webdevelopment #lists #javascript #html #tailwindcss #softwaredevelopment

There are two confusing points that I came across to create a CSS style when I press the first time. I can label the class of strikethrough into the words. When I press the second time, the words go back to the normal. First point: I find the block" set the attribute class" and I find setting the style in the html useful for me to label the strikethrough into the word. Second point: I need to remove the label "set the attribute block" in the if-conditional block in order to remove the strikethrough label when I click the word second time. #javascript #html

#JavaScript Object Syntax Inline Styles in react are specified using Javascript objects. property names are written in camelCase instead of the traditional css kebab-case, const style = {     backgroundColor: 'black',     fontSize: '16px' }; #units For most numeric values, you need to specify units as a string (e.g., '16px'). Some propertices like zIndex, can take numeric values directly. const style = {     padding : '1.6rem',     zIndex: 1, };

CSS blocks rendering. JavaScript blocks parsing. Together = slow pages. 🔒 Defer, async, inline critical CSS, lazy load everything else. Core Web Vitals depend on it. Read more by clicking below 🔗 https://lnkd.in/dGeyFCQx #WebPerformance #CoreWebVitals #JavaScript #CSS #EaseCloud

Sharing my learnings: Critical Rendering Path - In simple terms, it’s the process the browser follows to convert HTML, CSS, and JavaScript into pixels on the screen. Here’s how it works: - Browser receives HTML from the server - HTML is parsed → DOM is created - CSS is parsed → CSSOM is created - DOM + CSSOM → Render Tree Browser renders in steps: - Style calculation - Layout - Paint - Composite The goal? Show content to the user as fast as possible (First Contentful Paint). #frontend #webperformance #javascript #react #learninginpublic

Day 15 of My JavaScript Journey 🚀 Today, I was introduced to the basics of HTML. HTML (HyperText Markup Language) is used to structure the content of a web page not to style or add functionality, but to define elements like text, images, and links. I also learned about attributes, classes, and IDs. Classes and IDs are used to name elements so they can be selected in CSS for styling and in JavaScript for DOM manipulation. Key differences: • ID: It must be unique (used once per page) • Class: It's reusable (can be used multiple times) One important insight: HTML provides the structure, CSS handles the design, and JavaScript adds interactivity. Key takeaway: Understanding HTML is the foundation for building and manipulating web pages with JavaScript. #JavaScript #HTML #WebDevelopment #LearningInPublic #100DaysOfCode

Day 14/100 of JavaScript Today’s topic : Introduction to DOM The DOM (Document Object Model) represents the HTML structure of a web page as a tree of objects JavaScript can use the DOM to access and manipulate elements dynamically 🔹Selecting elements const heading = document.getElementById("title"); const items = document.querySelectorAll(".item"); 🔹Changing content heading.textContent = "Updated Title"; 🔹Changing styles heading.style.color = "blue"; 🔹Adding elements const newEl = document.createElement("p"); newEl.textContent = "New paragraph"; document.body.appendChild(newEl); 🔑 Key understanding: The DOM allows JavaScript to interact with HTML and update the UI dynamically without reloading the page #Day14 #JavaScript #100DaysOfCode

 Built My Own Tailwind-like CSS Engine “Chaiwind”  I’ve been diving deep into how utility-first CSS frameworks like Tailwind actually work under the hood… and decided to build my own version from scratch.  GitHub: https://lnkd.in/edbMhfxa  Live Demo: https://lnkd.in/ebMWZ7BK  What is Chaiwind? Chaiwind is a runtime CSS utility engine that: • Scans the DOM for custom classes (chai-*) • Parses them into CSS properties • Applies styles dynamically using JavaScript No build tools. No config. Just pure JavaScript.  Tech Highlights: • DOM manipulation & query selection • Custom class parser logic • Dynamic style injection • Utility-first CSS architecture  What I learned: • How Tailwind-like systems work internally • Runtime vs build-time styling tradeoffs • Writing cleaner, modular JavaScript • Thinking like a framework developer  Still improving: • Performance optimization • Responsive & pseudo-class support • Better class parsing system This project pushed me beyond just using frameworks — into understanding how they are built. Would love feedback from the community  Hitesh Choudhary Piyush Garg Chai Code #JavaScript #WebDevelopment #Frontend #TailwindCSS #OpenSource #BuildInPublic #chaicode