Building Image Editor with HTML, CSS & JavaScript

🚀 Excited to Share My Personal Portfolio Website! I’m happy to share that I’ve built and deployed my personal developer portfolio website. This project showcases my skills, projects, and learning journey in web development. 💻 Tech Stack Used: • HTML • CSS • JavaScript ✨ Key Features: • Responsive design • Smooth scrolling navigation • Typing animation effect • Clean and modern UI Building this portfolio helped me strengthen my understanding of frontend development, UI design, and JavaScript interactions. I’m continuously learning and exploring new technologies, and I’m excited to build more projects ahead. 🔗https://lnkd.in/gmKKfD6p #WebDevelopment #Portfolio #HTML #CSS #JavaScript #FrontendDevelopment #Coding #LearningJourney

🚀 Task 8 - Services Slider Today I designed and developed a Services Slider using pure HTML and CSS as part of my frontend development journey. The goal of this task was to understand how advanced UI interactions can be created without JavaScript — using only CSS techniques and smart structuring. Problem: I wanted to learn how sliders work internally and how state management can be handled without JS. The challenge was to build a dynamic style slider that changes position smoothly and highlights the active service card. Solution: I built a fully functional services slider that includes: • Pure HTML & CSS implementation (No JavaScript) • Hidden radio buttons to control slide state • CSS sibling selectors to reposition cards dynamically • Only three cards visible at a time for focus and clarity • Active card highlighted in the center • 180° flip effect on hover using CSS transform • Smooth transitions and modern UI styling • Clean dark background for better visual depth What I practiced in this task: • Advanced CSS selectors (:checked, sibling combinators) • State handling using radio inputs • CSS 3D transforms and perspective • Card positioning logic without JavaScript • Smooth transition and animation control • Building interactive UI components • Writing structured and scalable HTML & CSS This task helped me understand how powerful CSS can be when used creatively. Building interactive components without JavaScript strengthened my core frontend fundamentals. 🙏 Special thanks to Code of School — under the guidance of Ritendra Gour Sir and Avinash Gour Sir for their mentorship and continuous support. #FrontendDevelopment #HTML #CSS #CSS3 #WebDesign #3DSlider #UIUX #WebDeveloper #CodingJourney #BuildInPublic #LearnToCode #DeveloperLife #OpenToWork #TechLearning

🚀 Just built my own QR Code Generator using pure HTML, CSS & JavaScript — no frameworks, no libraries! You simply type any text or URL, hit the button, and a QR code is generated instantly. ✅ 🛠️ Tools & Tech I used: • HTML5 — for the structure • CSS3 — for styling, animations & smooth transitions • Vanilla JavaScript — for logic & DOM manipulation • QR Server API — to generate QR codes on the fly ✨ Features: • Instant QR code generation from any text or URL • Smooth reveal animation when QR code appears • Input validation with a shake animation on empty submission • Clean, minimal UI with a centered card layout This project helped me understand how to work with external APIs, CSS animations, and dynamic DOM updates — all without a single framework. 🔗 Live Demo: https://lnkd.in/d_5J4Nwn Would love your feedback! Drop a comment or connect if you're on a similar learning journey. 🙌 #WebDevelopment #JavaScript #HTML #CSS #QRCode #100DaysOfCode #Frontend #Projects #Learning #OpenToWork

⚔️ Warrior Built with Pure CSS — No Images, No SVGs I recently built a Warrior CSS Art project using only HTML & CSS turning code into visuals and pushing the boundaries of what frontend can do. 💡 Why I built this I wanted to challenge myself creatively and technically by creating something purely with code no shortcuts like images or SVGs. This helped me sharpen my understanding of positioning, layering, and advanced CSS techniques. ✨ Key Features 🎨 Fully designed using pure CSS 🧩 Complex shapes using border-radius & pseudo-elements 📐 Precise positioning and layering (z-index mastery) ⚡ Lightweight and fast (no external assets) 🧠 Creative breakdown of a character into reusable components 🛠️ Tech Stack 💻 HTML5 🎯 CSS3 🚀 Live Demo: 👉 https://lnkd.in/gy_qZnRA I’m really enjoying exploring CSS art & creative frontend development and this is just the beginning 👀 Let’s connect and grow together! 🤝 #FrontendDevelopment #CSSArt #WebDevelopment #CreativeCoding #HTML #CSS #UIUX #OpenToWork #Developers #TechSriLanka #BuildInPublic

🚀 Frontend Project Demo Excited to showcase the final output of my frontend project built using HTML, CSS, JavaScript, React.js, and Material UI (MUI). 🎯 In this demo, you can see: • A fully responsive and user-friendly interface • Smooth navigation between different sections • Clean and modern UI design using Material UI • Well-structured components built with React 🎥 This video highlights: • Live working of the website in the browser • User interactions and UI flow • Final look and feel of the project 💡 This project demonstrates my ability to build real-world frontend applications with a focus on performance and design. I’d love to hear your feedback and suggestions! #FrontendDeveloper #ReactJS #WebDevelopment #JavaScript #HTML #CSS #MUI #Projects #OpenToWork

🚀 Exploring Interactive Web Design with CSS & JavaScript Recently, I built a small project that combines CSS radial gradients with JavaScript event handling to create a dynamic overlay effect. ✨ The idea: A looping background video sets the stage. An overlay uses a radial gradient variable (--x, --y) that updates in real time with mouse movement. The gradient highlights text (DEPOT) by following the cursor, blending creativity with code. 🔧 Tech stack highlights: CSS Variables for flexible gradient control JavaScript (mousemove event) to update gradient coordinates SCSS nesting for clean, structured styling Demo Link 🔗: https://lnkd.in/girjx8xx Github Repo 📂: This project reminded me how powerful small touches of interactivity can be in web design — turning a static page into something immersive. 💡 I’d love to hear how others are using gradients, overlays, or creative CSS variables in their projects. #WebDevelopment #CSS #JavaScript #Frontend #CreativeCoding #sheriyansCodingSchool

🚀 Excited to Share My New Project: Auto Text Generator! I recently built a simple yet powerful Auto Text Generator using HTML, CSS, and JavaScript 💻 🔹 What it does: This project automatically types and displays text on the screen, creating a dynamic “typing effect” — perfect for landing pages, intros, or creative UI designs. 🔹 Tech Stack: ✔️ HTML – Structure ✔️ CSS – Styling & animations ✔️ JavaScript – Logic for auto typing effect 🔹 Key Features: ✨ Smooth typing animation ✨ Customizable text speed ✨ Easy to integrate into any website ✨ Beginner-friendly and lightweight 🔹 What I learned: This project helped me strengthen my understanding of DOM manipulation, timing functions (setTimeout / setInterval), and creating interactive UI elements. 💡 Small projects like this are a great way to sharpen frontend development skills and build a strong portfolio. 👉 I’d love your feedback and suggestions to improve it further! 🚀 Here check my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 13 of #100DaysOfCode #WebDevelopment #JavaScript #FrontendDevelopment #HTML #CSS #Projects #Coding #Learning

🚀 Frontend Practice Project – HTML & CSS . MY FIRST MINI PROJECT As a 2nd year student, I’ve been improving my frontend skills by building small projects using pure HTML and CSS. 📌 Recently, I designed a structured Time Table layout from scratch. Through this project, I practiced: • HTML table structure • CSS styling and layout design • Color combinations and alignment • Clean UI formatting Every small project helps me understand web development concepts better and improve my design thinking 💻✨ I’m consistently working on strengthening my technical skills step by step. Feedback and suggestions are always welcome! 🙌 You can see on your mobile ➡️ https://lnkd.in/dG_hN87p #HTML #CSS #WebDevelopment #Frontend #StudentDeveloper #AIML #LearningJourney

🚀 Building My Frontend Skills – HTML & CSS Practice I’ve been working on improving my web development skills, and I recently created a simple resume/profile layout using HTML and CSS. This project helped me practice: Structuring content with semantic HTML Styling layouts using CSS (Flexbox) Creating buttons and basic UI elements Organizing code with external stylesheets It’s a small step, but a meaningful one in my journey toward becoming a better frontend developer and designer. I’m continuously learning and open to feedback—feel free to share suggestions or tips that can help me improve 🙌 #WebDevelopment #HTML #CSS #FrontendDevelopment #LearningJourney #TechSkills

🚀 Today’s Learning Journey in CSS 🎨 Today I explored some fundamental concepts of CSS that are essential for building beautiful and responsive web designs. Here’s what I covered: 🔹 What is CSS & How It Works Learned how CSS styles HTML elements and controls layout, colors, and design to make websites visually appealing. 🔹 Types of CSS Understood the differences between Inline, Internal, and External CSS, and when to use each effectively. 🔹 Colors, Fonts & Text Styling Practiced using colors, font families, sizes, and text styling to enhance readability and user experience. 🔹 Background Images Learned how to add and control background images for better visual design. 🔹 Box Model Got a clear idea of margin, border, padding, and content — the core structure behind every element. 🔹 Positioning Explored different positioning techniques like static, relative, absolute, and fixed. 🔹 Display & Visibility Understood how elements behave using display properties and how visibility affects layout. 💡 Every small step is building a strong foundation toward becoming a better frontend developer. #CSS #WebDevelopment #FrontendDevelopment #LearningJourney #Programming #DeveloperLife #100DaysOfCode #python #django #ostad