🎯 Just built a BMI Calculator using HTML, CSS, and JavaScript! This project allows users to calculate their Body Mass Index (BMI) by entering their height and weight — and the best part? 🧮 You can switch between cm and feet for height input! ✨ Features: Height unit toggle (cm ↔ feet) Responsive design for all devices Input validation & color-coded results Clean and minimal user interface This project helped me strengthen my JavaScript logic and DOM manipulation skills while keeping the UI modern and simple. 🔗 Live Demo: https://lnkd.in/dbJ7qHmU 💻 GitHub Repo: https://lnkd.in/dNS4_iWx #HTML #CSS #JavaScript #WebDevelopment #Frontend #LearningByDoing #StudentProjects #CodingJourney #OpenSource #Netlify #GitHub
More Relevant Posts
-
I recently built a complete chessboard UI using pure HTML and CSS, focusing on structure, styling, and alignment — without a single line of JavaScript! Each square and piece was manually placed to mimic an actual chess setup. This project helped me strengthen my understanding of: ✅ CSS Flexbox for layout alignment ✅ Background color alternation logic ✅ Image embedding and positioning ✅ Reusable class design Here’s a quick overview of what I used: 🔹 HTML for structure (8×8 grid of div ) 🔹 CSS for styling, borders, and hover effects 💡 Fun fact: I even added hover effects on each square — so the board lights up as you move your mouse! It’s a small but rewarding project that reminded me how powerful simple HTML and CSS can be when used creatively. Deployment Link : https://lnkd.in/dMX7PHaG Let's build something amazing 🔗Connect with me:Dhupati Balachakravarthi Thanks for your support Spandana Chowdary madam and Sudheer Velpula sir I'd appreciate any feedback or tips to improve the layout with modern HTML/CSS practices. Let’s connect and grow together!🙌 #HTML #HTML5 #Frontend #WebDevelopment #LearningByDoing #Coding #TechJourney #Developer #10000Coders #LearningDaily #CodingIsFun #ReactJS #JavaScript
To view or add a comment, sign in
-
This project helped me strengthen my fundamentals in DOM manipulation, event handling, and dynamic UI updates. Users can easily add and delete tasks, and everything updates instantly without page reloads. 💻 Tech Stack: 🔹 HTML – structure 🔹 CSS – styling 🔹 JavaScript – functionality 🧠 Key Learnings: Handling form submissions dynamically using preventDefault() Managing a task list with arrays Creating and updating elements in real-time with JavaScript Here’s a quick peek at the app 👇 ✨ Simple UI ✨ Smooth interactions ✨ Fully responsive 📂 GitHub Repository: https://lnkd.in/epivmr3A 🙏 Special thanks to Pranshoo Rathore Sir for guidance and motivation throughout my journey! #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #MERN #CodingJourney #LearningByBuilding
To view or add a comment, sign in
-
Dynamic Accordion Project — Built Fully with JavaScript I recently created an interactive accordion component where the entire HTML structure is generated dynamically using JavaScript — no static HTML was written manually! This project helped me strengthen my understanding of DOM manipulation, event handling, and how to manage dynamic UI updates efficiently. Each question and answer is rendered from a JavaScript data array, and with every click, icons toggle between plus/minus while smoothly showing or hiding the related content. Technologies Used: 1. HTML (for base structure) 2. CSS (for styling & layout) 3. JavaScript (for creating and controlling all elements dynamically) live demo: https://lnkd.in/dRN9jQPS #JavaScript #WebDevelopment #Frontend #DOMManipulation #CodingJourney #DynamicUI #AccordianProject #LearningByBuilding
To view or add a comment, sign in
-
Building a Dynamic Random Color Generator. was fun😊 Just finished a quick, fun project This small application uses HTML for structure (the five div boxes), CSS for layout and initial styling, and JavaScript to bring it all to life. The key is using Math.random() to generate three values between 0 and 255 for the RGB color model. This ensures a completely new, random color is assigned to each box every time the page loads. It’s a great exercise for practicing: DOM manipulation with document.querySelector() Applying inline styles using JavaScript #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingProject
To view or add a comment, sign in
-
🚀 Just built a Tic-Tac-Toe game using HTML, CSS, and JavaScript! 🔗 GitHub Repository: https://lnkd.in/gFSYmYnz This project is more than just a game—it's a hands-on way to understand how the core pillars of web development work together: 🧱 HTML – The foundation of the game board Semantic HTML structures the layout: buttons for each cell, containers for grouping, and headings for clarity. It’s a great example of how HTML gives shape to your ideas. 🎨 CSS – Styling that brings the game to life Responsive sizing with vmin units, hover effects, and shadows make the interface intuitive and visually engaging. Flexbox ensures the board stays centered and clean across devices. 🧠 JavaScript – The brain behind the game JS handles turn logic, win detection, draw conditions, and UI updates. I used arrays to define win patterns and event listeners to track player moves—perfect for learning DOM manipulation and game logic. 🎯 Why this project matters If you're new to web development, this is a perfect starting point. It shows how HTML, CSS, and JS interact in a real-world scenario—and it’s fun to play too! 💬 I'd love feedback from fellow developers! Try it out, fork it, or suggest improvements. Let’s learn and build together. #WebDevelopment #JavaScript #HTML #CSS #TicTacToe #Frontend #LearningByDoing #GitHubProjects #VenkatBuilds
To view or add a comment, sign in
-
Interactive JS Event Playground | HTML, CSS, JavaScript Built a dynamic web page to showcase real-time JavaScript DOM manipulation and events: ✨ Highlights: Live Text Update: Instant reflection of typed text (oninput) Keyboard & Select Events: Key detection (onkeyup) and color customization (onchange) Interactive Display Box: Hover & click animations for smooth UX Theme Toggle: Dark & Light mode switch with one click (onclick) Modern Design: Gradient backgrounds, large readable fonts, responsive layout This project demonstrates front-end interactivity, dynamic styling, and user-centric design, making it a portfolio-ready showcase of JavaScript skills. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #WebDesign #UIUX #Coding #Programming #PortfolioProject #InteractiveWebPage #HTML #CSS #JS #WebDevSkills
To view or add a comment, sign in
-
I’ve just built a modern modal signup form using HTML, CSS, and JavaScript! 🎨✨ This project showcases how to create a popup signup form that appears smoothly on button click and validates user input before submission. ✅ Features: Interactive modal popup 💬 Password match validation 🔐 Clean and responsive UI 🌐 Real-time form output displayed below 🧾 This project helped me strengthen my understanding of DOM manipulation and form handling in JavaScript. 💡 It’s a small but powerful step toward mastering front-end interactivity! 🔗 Check it out on GitHub: https://lnkd.in/eXsXvR75 Special thanks to Pranshoo Rathore Sir for the continuous guidance and motivation 🙏 #HTML #CSS #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearningEveryday
To view or add a comment, sign in
-
Practicing Local Storage, Dynamic Input Handling, and Theme Persistence Today, I worked on a JavaScript project where I implemented multiple features to enhance user experience: Used Local Storage to save user data and theme preferences, ensuring persistence even after refreshing or closing the browser. Added a dark and light mode toggle that remembers the user’s choice using local storage. Practiced dynamic data handling using both objects and arrays to store user input efficiently. Created a loading spinner animation and clean UI using HTML and CSS for better user interaction. This project helped me strengthen my understanding of DOM manipulation, event handling, and local storage in JavaScript. live demo: https://lnkd.in/drU5s89N Every small project like this brings me one step closer to writing cleaner, more efficient, and scalable code. I’d love to hear your feedback or suggestions for improvement. #JavaScript #WebDevelopment #Frontend #LearningByDoing #LocalStorage #DarkMode #CodingJourney #TalhaMohsin
To view or add a comment, sign in
-
Every Webpage Begins Here: The HTML Foundation 🧱 It gives structure to the page and allows JavaScript to make things dynamic and interactive ⚡ Let’s quickly go through some core HTML terms that form the building blocks of every webpage 🧱 🔹 Element: Represents the content and defines its behavior — like text, color, or layout. 🔹 Tag: Every element has an opening and closing tag that wraps around the content (except for self-closing ones like <br>). 🔹 Attribute: Used to customize an element’s appearance or behavior; added within the opening tag. 🔹 Property: The key of an attribute — like color, width, or font-family. 🔹 Value: The value assigned to a property — for example, red, 100px, or Arial. 🔹 Unit: Defines how measurements are applied — • Fixed units: px • Relative units: %, em, rem Even though HTML looks simple, it’s the root that gives life to every webpage 🌱 🔖 Hashtags #HTML #WebDevelopment #Frontend #CodingBasics #JavaScript #LearnWithMe #DeveloperCommunity #WebDesign #CodeNewbie
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
Its Good.. But in a BMI Calculator age is also used is also use an input