Hi everyone! 🚀 Day 7 of #30DaysCodeChallenge – Element Display using CSS (No JavaScript!) Today I worked on a simple yet interesting mini project – Element Display & Removal using Pure CSS 🌍🌙 🔹 Created two buttons: Display Earth and Display Moon 🔹 Used the CSS sibling selector (~) to control image visibility 🔹 Implemented display: none and display: inline-block for dynamic effect 🔹 Added hover interaction to display respective images 🔹 Styled buttons with box-shadow and custom font 💡 The most interesting part? I achieved this interaction without using JavaScript – only HTML & CSS! This helped me understand: ✔️ CSS selectors deeply ✔️ How sibling combinators work ✔️ UI interaction using hover states ✔️ Clean structuring of elements Small projects like these improve core fundamentals step by step 💻✨ Looking forward to building more interactive UI components in the coming days! #Day7 #30DaysCodeChallenge #HTML #CSS #FrontendDevelopment #WebDesign #LearningInPublic #WomenInTech

I built a simple and responsive Tip Calculator using HTML, CSS, and JavaScript. 🔹 Users can enter the bill amount 🔹 Add the tip percentage 🔹 Instantly calculate the total amount 🔹 Clean UI with responsive design 🔹 Interactive button with hover effects 🛠️ Technologies Used: ✔️ HTML ✔️ CSS ✔️ JavaScript (DOM Manipulation & Event Handling) This project helped me strengthen my understanding of: 📌 DOM selection & manipulation 📌 Event listeners 📌 Basic arithmetic operations in JavaScript 📌 UI styling & layout design Simple project — but a great step toward mastering frontend development 🚀 #WebDevelopment #JavaScript #HTML #CSS #FrontendDeveloper #CodingJourney

Built a responsive image gallery using HTML and CSS. This layout was created with CSS Grid and grid-template to explore the structure of responsive galleries, emphasizing clean alignment, proportional spacing, and dynamic image arrangement. Key highlights of this project include: • Utilization of CSS Grid for a structured layout • Implementation of grid-template columns and rows • Responsive behavior across various screen sizes • Consistent image scaling and layout This project enhanced my understanding of how CSS Grid can be leveraged to create flexible and responsive UI layouts without relying on frameworks. Special thanks to Sheryians Coding School for the guidance and learning resources. Open to feedback. #frontend #html #css #cssgrid #responsivewebdesign #webdevelopment #learninginpublic

💡 What is the <script> tag in HTML? Every interactive website you use — buttons, forms, pop-ups, animations — all of this works because of JavaScript. And the way we add JavaScript to a webpage is with the <script> tag. 🧠 In simple words The <script> tag tells the browser: 👉 “Run this JavaScript code.” 📍 Where is it used? Inside an HTML file to add JavaScript directly To connect an external JavaScript file To make webpages interactive and dynamic ⚙️ Common examples Showing an alert message when a button is clicked Validating a form before submitting Loading animations or sliders Fetching data from an API ⭐ Why is it important? Brings life to static HTML pages Improves user experience Essential for modern web development 👉 Without the <script> tag, a webpage would be just text and images with no interaction. Small tag… but huge power. 🚀 #HTML #JavaScript #WebDevelopment #Frontend #Programming #Coding #Developers #LearnToCode #TechLearning #CodingTips

🚀 JavaScript – Flex Panels Image Gallery Built an interactive Image Gallery using HTML, CSS (Flexbox), and Vanilla JavaScript 🎯 This project helped me strengthen my understanding of layout systems and DOM event handling. 🔹 What I Learned- How flex: 1 distributes available space equally across elements Deep understanding of Flexbox behavior Using CSS pseudo-selectors like :first-child and :nth-child(n) Difference between em and rem em → relative to parent rem → relative to root (html) Handling dynamic animations using the transitionend event in JavaScript ⚙️ Challenge : Managing animation timing correctly using the transitionend event and understanding how CSS units (em, rem) behave in nested layouts. 🔗 GitHub Repo: https://lnkd.in/gT3kKbCE #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

I recently designed and built a graphics-rich, fully responsive portfolio from scratch using only HTML, CSS, and JavaScript as a focused frontend practice project. No frameworks. No templates. Just core fundamentals applied deliberately. It includes a strong hero section, live projects plus structured skills, experience, and education in a clean single-scroll layout. Built to refine structure, responsiveness, and interaction logic. Portfolio: https://lnkd.in/gQnm3aCU #FrontendDevelopment #HTML #CSS #JavaScript #WebDevelopment #SoftwareEngineering

Day 12 / 30 🔥  -- Dynamic Color Changer using JavaScript 🎨 🔺 Built a small interactive webpage using HTML, CSS, and JavaScript. The layout was designed with CSS positioning and styling to create a clean UI. 🔺 Added buttons that dynamically change background colors using DOM manipulation. 🔺 Implemented JavaScript functions to update RGB values and modify elements in real time. 🔺 This project helped me understand how JavaScript interacts with HTML elements and controls styling dynamically. #JavaScript #DOMManipulation #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningByDoing #MiniProject

Frontend Development Practice – Flats Booking Web Page 🌐 #30daysofcode challenge #day3 Built a Flats Booking static web page using HTML, CSS, and Bootstrap. This project helped me practice creating a multi-section user interface. Through this project, I focused on structuring the page clearly and ensuring the layout remains clean, responsive, and user-friendly. Key Highlights: ✅ Implemented section-based navigation using id attributes and button interactions ✅ Structured the webpage using semantic HTML elements ✅ Designed layouts and UI components using CSS styling ✅ Utilized Bootstrap flex utilities for responsive alignment #NxtWave #30daysoflearning #coding #ccbp #HTML #CSS #Bootstrap #FrontendDevelopment #CodingJourney #TechBeginners #WebDevelopment #LearningByDoing

🚨 𝐂𝐒𝐒 𝐢𝐬 𝐧𝐨 𝐥𝐨𝐧𝐠𝐞𝐫 𝐣𝐮𝐬𝐭 𝐬𝐭𝐲𝐥𝐢𝐧𝐠. With CSS Wrapped 2025, we're seeing CSS evolve into something much closer to a UI programming language. Things that once required JavaScript can now be done natively with CSS and HTML: • 𝑩𝒖𝒊𝒍𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝒄𝒂𝒓𝒐𝒖𝒔𝒆𝒍𝒔 𝒘𝒊𝒕𝒉 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒃𝒖𝒕𝒕𝒐𝒏 𝒂𝒏𝒅 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒎𝒂𝒓𝒌𝒆𝒓 • 𝑺𝒕𝒚𝒍𝒆 𝒏𝒂𝒕𝒊𝒗𝒆 <𝒔𝒆𝒍𝒆𝒄𝒕> 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 (𝒇𝒊𝒏𝒂𝒍𝒍𝒚!) • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒉𝒐𝒗𝒆𝒓 𝒑𝒓𝒆𝒗𝒊𝒆𝒘𝒔 𝒂𝒏𝒅 𝒕𝒐𝒐𝒍𝒕𝒊𝒑𝒔 𝒘𝒊𝒕𝒉 𝒊𝒏𝒕𝒆𝒓𝒆𝒔𝒕-𝒇𝒐𝒓 • 𝑾𝒓𝒊𝒕𝒆 𝒄𝒐𝒏𝒅𝒊𝒕𝒊𝒐𝒏𝒂𝒍 𝒍𝒐𝒈𝒊𝒄 𝒖𝒔𝒊𝒏𝒈 𝒊𝒇() 𝒊𝒏 𝑪𝑺𝑺 • 𝑼𝒔𝒆 𝒄𝒐𝒏𝒕𝒂𝒊𝒏𝒆𝒓 & 𝒔𝒄𝒓𝒐𝒍𝒍 𝒔𝒕𝒂𝒕𝒆 𝒒𝒖𝒆𝒓𝒊𝒆𝒔 𝒇𝒐𝒓 𝒔𝒎𝒂𝒓𝒕𝒆𝒓 𝒍𝒂𝒚𝒐𝒖𝒕𝒔 • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒔𝒕𝒂𝒈𝒈𝒆𝒓𝒆𝒅 𝒂𝒏𝒊𝒎𝒂𝒕𝒊𝒐𝒏𝒔 𝒘𝒊𝒕𝒉 𝒔𝒊𝒃𝒍𝒊𝒏𝒈-𝒊𝒏𝒅𝒆𝒙 • 𝑹𝒆𝒐𝒓𝒅𝒆𝒓 𝑫𝑶𝑴 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝒍𝒐𝒔𝒊𝒏𝒈 𝒔𝒕𝒂𝒕𝒆 𝒖𝒔𝒊𝒏𝒈 𝒎𝒐𝒗𝒆𝑩𝒆𝒇𝒐𝒓𝒆 • 𝑩𝒖𝒊𝒍𝒅 𝒑𝒐𝒑𝒐𝒗𝒆𝒓𝒔, 𝒅𝒊𝒂𝒍𝒐𝒈𝒔, 𝒂𝒏𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝑼𝑰 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝑱𝑺 𝗜𝗻 𝘀𝗵𝗼𝗿𝘁: CSS is becoming stateful, logical, and interaction-driven. The web platform is shifting toward native UI capabilities, reducing the need for heavy JavaScript for common patterns. If you're a frontend developer, this is a moment worth paying attention to. The platform is getting seriously powerful. Explore all the features visually from official docs: https://lnkd.in/dnXM6tcR #CSS #Frontend #WebDevelopment #WebPlatform #ChromeDev #FrontendEngineering