Bolivar Alexander A.’s Post

🚀 Just Built a Live Code Editor in the Browser! Share my latest mini project — a Live HTML, CSS & JavaScript Editor 💻✨ 🔹 Real-time preview using iframe 🔹 Clean dark/light theme toggle 🌗 🔹 One-click copy & download 🔹 Fully responsive layout 📱 🔹 Preloaded landing page template to get started instantly This project helped me sharpen my skills in: ✔️ DOM manipulation ✔️ UI/UX design ✔️ JavaScript event handling ✔️ Responsive layouts 💡 It’s amazing how powerful pure HTML, CSS, and JavaScript can be without any frameworks! Would love your feedback and suggestions 🙌 What feature should I add next? 🤔 #WebDevelopment #JavaScript #Frontend #Coding #BuildInPublic #Developer #HTML #CSS #Editor #LiveEditor #MiniProject #VEDESH

I built my first serious project with Bootstrap. Then moved to Tailwind. Then one day I stopped reaching for a framework at all. Not because frameworks are bad. Because I finally understood the language underneath them. Modern CSS is not what it was five years ago. Container queries let components respond to their own context, not just the viewport. The component decides how to render based on the space it actually has. The has selector is the parent selector developers asked for for twenty years. It changes how you think about styling relationships between elements. Cascade layers give you real control over specificity without fighting the order of your imports. CSS custom properties are not just variables. They are dynamic, they inherit, they can be set from JavaScript, and they make theming genuinely clean. Subgrid finally makes complex layout work without hacks. I am not saying drop your tools. I am saying understand what they are abstracting. The developers who know the language under the framework ship leaner, faster, and cleaner. What is the CSS feature that changed how you think about styling? #FrontendDevelopment #CSS #WebDevelopment #JavaScript

I built my first serious project with Bootstrap. Then moved to Tailwind. Then one day I stopped reaching for a framework at all. Not because frameworks are bad. Because I finally understood the language underneath them. Modern CSS is not what it was five years ago. Container queries let components respond to their own context, not just the viewport. The component decides how to render based on the space it actually has. The has selector is the parent selector developers asked for for twenty years. It changes how you think about styling relationships between elements. Cascade layers give you real control over specificity without fighting the order of your imports. CSS custom properties are not just variables. They are dynamic, they inherit, they can be set from JavaScript, and they make theming genuinely clean. Subgrid finally makes complex layout work without hacks. I am not saying drop your tools. I am saying understand what they are abstracting. The developers who know the language under the framework ship leaner, faster, and cleaner. What is the CSS feature that changed how you think about styling? #FrontendDevelopment #CSS #WebDevelopment #JavaScript

I built my first serious project with Bootstrap. Then moved to Tailwind. Then one day I stopped reaching for a framework at all. Not because frameworks are bad. Because I finally understood the language underneath them. Modern CSS is not what it was five years ago. Container queries let components respond to their own context, not just the viewport. The component decides how to render based on the space it actually has. The has selector is the parent selector developers asked for for twenty years. It changes how you think about styling relationships between elements. Cascade layers give you real control over specificity without fighting the order of your imports. CSS custom properties are not just variables. They are dynamic, they inherit, they can be set from JavaScript, and they make theming genuinely clean. Subgrid finally makes complex layout work without hacks. I am not saying drop your tools. I am saying understand what they are abstracting. The developers who know the language under the framework ship leaner, faster, and cleaner. What is the CSS feature that changed how you think about styling? #FrontendDevelopment #CSS #WebDevelopment #JavaScript

𝐏𝐫𝐨𝐣𝐞𝐜𝐭 𝐔𝐩𝐝𝐚𝐭𝐞: 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒 & 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 After working on my JavaScript skills, I built a simple yet engaging project -an animated download button using HTML, CSS, and JavaScript. This project focuses on creating a smooth user experience. When the button is clicked, it triggers an animation that visually represents a download process. The button expands, a progress-like effect runs using CSS animations, and after a few seconds, it changes into a “Completed” state with an updated icon. Through this project, I practiced: • DOM manipulation in JavaScript • Event handling • Using setTimeout for timed actions • CSS animations and transitions • Creating interactive UI elements It’s a small project, but it helped me understand how frontend technologies work together to create dynamic and user-friendly interfaces. Below is the link of the project: https://lnkd.in/dGkNSnqW #WebDevelopment #JavaScript #CSS #HTML #CodingJourney #LearnToCode #Programming #DeveloperLife

💡 Interactive Light Bulb with Click Sound using HTML, CSS & JavaScript 🔊 Ever wanted to bring a simple UI idea to life with a touch of realism? I recently built a fun mini-project where a light bulb turns ON and OFF with a click — complete with a satisfying switch sound! ⚡ Here’s what this project covers: 🔹 HTML – Structure for the bulb and switch 🔹 CSS – Styling the bulb glow effect and smooth transitions 🔹 JavaScript – Handling click events and toggling states 🔹 Sound Integration – Adding a realistic click sound for better user experience ✨ Key Features: Toggle light ON/OFF with a single click Visual glow effect when the bulb is ON Realistic click sound for interaction feedback Beginner-friendly and great for practicing DOM manipulation 🚀 This is a great project if you're starting with JavaScript and want to understand how interactivity works in real-world UI elements. 💻 Concept: Use an image or div for the bulb Toggle a CSS class on click Play audio using JavaScript when switching states Small projects like these make learning fun and practical! If you'd like, I can share the full code snippet as well. Let me know in the comments! 👇 🚀 Here Check my GitHub repo: 🔗 https://lnkd.in/g6MgHkh2 🚀 Day 19 of #100DaysOfcode #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingProjects #LearningByDoing

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

CSS is DOOMed No, CSS is awesome. CSS is better than ever and it is only getting better. Every wall, floor, barrel, and imp is a <div>, positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely CSS. You can play it right now. https://lnkd.in/eaWgNuzq

Dynamic Image Generation using JavaScript (createElement & setAttribute): I’m excited to share another JavaScript DOM project where I implemented dynamic image generation on button click. In this project, when the button is clicked, multiple images are created dynamically and displayed at different random positions on the screen. This creates a fun and interactive visual effect. Key concepts I practiced in this project: 1. createElement() – Dynamically creating image elements 2. setAttribute() – Setting attributes like src and positioning 3. DOM Manipulation – Adding elements to the webpage in real time 4. Event Handling – Triggering actions using button clicks 5. Dynamic UI Behavior – Generating multiple elements with different positions Through this project, I clearly understood how to create and insert elements dynamically into the DOM, and also strengthened my knowledge of setAttribute() and interactive UI design. Building projects like this is helping me improve my creativity and confidence in JavaScript. Checkout my full project code on github: https://lnkd.in/gqPQptPS Feedback and Suggestions are always welcome! 😊 #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #UIInteraction

Day 2 of build in public with Access Denied Built a simple gallery website using HTML & CSS. worked on structuring multiple pages and organizing images properly instead of dumping everything in one file and hoping for the best. also fixed an issue where images weren’t showing (turns out file paths matter a lot more than I thought). small project, but helped me understand how websites are actually structured behind the scenes. Trying to get comfortable with fundamentals before jumping to fancy frameworks. GitHub link in comments. #buildinpublic #html #css #learning #webdevelopment