Smart Study Planner Website Built with HTML CSS JavaScript

🚀 Front-End Development Project – HTML & CSS Landing Page As part of my journey into Front-End Development, I recently built a landing page using HTML and CSS. This project helped me strengthen my understanding of: • HTML structure and semantic elements • CSS styling and layout design • Creating a clean and modern user interface Building projects like this is helping me develop practical skills and improve my confidence as I continue learning web development. 🔗 Live Demo: https://lnkd.in/e6y-VHma 🔗 GitHub Repository: https://lnkd.in/ejUU58wX I’m excited to continue building more projects and expanding my skills in front-end development. Feedback is always welcome! #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningInPublic #OpenToOpportunities

When I started learning web development, I discovered that every website is built using three core technologies: HTML, CSS, and JavaScript. Each one has a different role in building a website. 🧱 HTML (HyperText Markup Language) Creates the structure of a web page — headings, paragraphs, images, buttons. 🎨 CSS (Cascading Style Sheets) Styles the page — colors, layouts, fonts, spacing. ⚡ JavaScript Adds interactivity — form validation, animations, dynamic content. A simple way to understand it: 🏠 HTML = Structure of the house 🎨 CSS = Design and decoration ⚡ JavaScript = Functionality (lights, doors, automation) Together, these three technologies bring websites to life. Mastering these fundamentals is the first step toward becoming a strong Front-End Developer. — Priyanka C Front-End Developer in Progress 🚀 #WebDevelopment #FrontendDeveloper #HTML #CSS #JavaScript #ReactJS #SoftwareEngineering #TechLearning #LearningInPublic #DeveloperJourney

🎥 Float & Margin in CSS | Output Demonstration | Web Development Here’s the output video of my recent practice on CSS Float and Margin properties. This demonstrates how images and text align dynamically when using float, and how margins help maintain proper spacing. 🔎 What you can observe in the output: ✅ Image aligned to the left with text wrapping ✅ Image aligned to the right with smooth layout flow ✅ Clean spacing using margins ✅ Styled content section with borders and background ✅ Proper alignment of headings and footer text 💡 What I learned: ✨ Float helps in creating flexible layouts ✨ Margins improve readability and spacing ✨ Combining HTML + CSS gives better UI control 📌 Code posted in previous post 👆 Check it out for full implementation! 🚀 Consistently building my skills in Web Development + DSA. #CSS #FrontendDevelopment #WebDesign #CodingPractice #LearningJourney #StudentDeveloper #TechSkills

🚀 Day 4 of my 100 Web Development Projects Challenge “Welcome to Day 4 of my 100 Days Web Development Projects Challenge! In this video, we’ll learn how to create a CSS border animation button using only HTML and CSS — no JavaScript needed. This modern hover effect button animates borders smoothly around all four sides, making it perfect for landing pages, portfolio websites, and modern UI designs. What you’ll learn in this video: ✅ Create an animated button using HTML & CSS ✅ Add smooth hover effects with CSS transitions ✅ Style buttons for modern UI and portfolio websites ✅ Center elements with Flexbox and apply CSS resets 🎯 This project is perfect for beginners and frontend developers looking to practice real web development projects. 📁 Source Code: https://lnkd.in/gw3JzN5x This project is part of my 100 Days HTML CSS JavaScript Projects Challenge, where I build real web development projects to improve my coding skills. 🔥 About the Challenge I am building 100 HTML, CSS, and JavaScript projects to improve my frontend development skills and share my learning journey. Follow the series to learn web development by building real projects. 📅 Challenge Progress: Day 4 / 100 📢 Connect With Me GitHub: https://lnkd.in/g_ej-272 LinkedIn: https://lnkd.in/g6mqgEfv Facebook: https://lnkd.in/gdQGzdwn X {Twitter}: https://lnkd.in/gJSiMPf5 #100DaysOfCode #WebDevelopmentProjects #CSSAnimation #HTMLCSSButton #FrontendDevelopment #BorderAnimationButton #WebDesign #PortfolioButton #CSSHoverEffect

🚀 Project Update: Registration Form with Validation As part of my web development learning journey, I built a Registration Form using HTML, CSS, and JavaScript. This project helped me understand how real-world forms work and how to handle user input effectively. 🔹 Key Features ✅ Input fields for Name, Email, and Password ✅ Form validation using JavaScript ✅ Error messages for invalid inputs ✅ Submit button disabled until all fields are valid ✅ Clean and responsive UI design 💡 What I learned from this project • How to validate form inputs using JavaScript • Improving user experience with error messages • Structuring forms properly using HTML • Styling form layouts using CSS Building small projects like this is helping me strengthen my front-end development skills and gain practical experience. I’m excited to keep learning and build more projects in the coming weeks! 💻 GitHub Live demo:https://lnkd.in/gfqzi64K Repo link:https://lnkd.in/gYChPX4f) #WebDevelopment #FrontendDevelopment #HTML #CSS #JavaScript #CodingJourney #LearningInPublic

🚀 Excited to share my latest project! I have developed a Multi-Page Portfolio Website as part of my learning in Web Development. This project includes multiple pages such as Home, About, Contact, and Submissions. I implemented a contact form with JavaScript validation and used LocalStorage to store and display user submissions. Through this project, I strengthened my skills in HTML, CSS, and JavaScript, and gained practical experience in building responsive and interactive web applications. 🔗 GitHub Project Link: https://lnkd.in/gh2K9mvt #WebDevelopment #HTML #CSS #JavaScript #PortfolioProject #LearningJourney

🚀 Project Showcase: Advanced To-Do Web Application I recently developed an Advanced To-Do List Web Application using HTML, CSS, Bootstrap, and JavaScript as part of my web development practice. This project helps users efficiently manage daily tasks with an interactive and user-friendly interface. It demonstrates core frontend development concepts such as DOM manipulation, event handling, and local storage management. 🔹 Key Features: • Add, edit, and delete tasks • Set due dates for tasks • Categorize tasks (Work, Study, Personal) • Search and filter tasks • Task status tracking (Completed / Pending) • Dark mode UI for better user experience • Task counter dashboard • Data persistence using Local Storage 🔹 Technologies Used: HTML5 | CSS3 | Bootstrap 5 | JavaScript | Local Storage This project strengthened my understanding of frontend development, UI/UX design, and JavaScript logic building. I am continuously improving my skills in web development by building practical projects like this. #WebDevelopment #JavaScript #FrontendDevelopment #Bootstrap #StudentProject #LearningByBuilding #CSE

🚀 Today’s Practice: Designing a Landing Page with HTML & CSS As part of my journey learning Web Development, today I practiced HTML and CSS by designing a simple landing page. Every day I try to build something new to improve my understanding of frontend development. In this project, I focused on: • Structuring the page using clean HTML • Styling and layout using CSS • Creating a modern landing page design • Practicing spacing, alignment, and section layout Small projects like this help me understand how real websites are built and improve my confidence as a beginner developer. 🔗 Live Demo: https://lnkd.in/gqRpTn87 I’m continuing to practice and improve my skills every day. My goal is to become a better Frontend Web Developer by building more projects. If you have any feedback or suggestions, I’d love to hear them! 😊 #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #LearningInPublic #BeginnerDeveloper #WebDesign #100DaysOfCode #BuildInPublic

Project Showcase – Market Mate 🛒 While practicing HTML, CSS, and JavaScript, I built a small web application called Market Mate to solve a simple everyday problem: forgetting items while shopping. The idea is simple — create a smart shopping list that helps track what you need to buy and what you’ve already purchased. Key Features:- • Add item name with quantity and measurement unit • Organize your shopping list easily • Mark items as purchased with a strike-through effect • Edit or delete items when needed Technologies Used:- HTML | CSS | JavaScript This project helped me practice DOM manipulation, interactive UI behavior, and real-world problem solving. You can try the project here: C:\Users\Admin\OneDrive\Desktop\html\login.html I’m continuously building projects to improve my web development skills, and feedback is always welcome😊💙. #WebDevelopment #JavaScript #HTML #CSS #ProjectShowcase #LearningInPublic

They say HTML is the skeleton of a webpage, but CSS is the soul. 💡 Today is Day 16 of my #100DaysOfCode journey as I transition deeper into full-stack web development. I focused entirely on mastering spatial layouts and user interactivity. Here are my top 2 technical takeaways today: 1️⃣ The Box Model Reality: Understanding the strict difference between Padding (internal space) and Borders (the physical wall). Miscalculating these is the #1 reason grid layouts break! 2️⃣ Zero-JS Interactivity: Leveraging the power of transform: scale() to create dynamic user experiences without relying on heavy JavaScript event listeners. To test my knowledge, I built an interactive Pokémon card grid. Using smooth CSS transitions, the cards naturally scale up and reveal data when a user hovers over them. Building practical, visual projects is solidifying these concepts faster than any tutorial could. Check out the source code for the project on my GitHub: https://lnkd.in/gwF-Efuh If you are a frontend developer, I'd love to know: what is your go-to CSS trick for making a UI feel more interactive? Let me know in the comments! 👇 #WebDevelopment #Frontend #CSS #100DaysOfCode #LearningInPublic #BlackwindCodingSchool #SoftwareEngineering