ranawebpro
Experienced Web Developer. specializing in JavaScript and React.js. proficient in various technologies, tools and frameworks. Keep learning & Building 👨💻
Pinned Repositories
3DNav-Showcase
This "3DNav Showcase" is a single-page website featuring an elegant 3D navigation system. Users can seamlessly explore Home, Project, and About sections using a toggle button. The visually striking pages with background images and a subtle 3D rotation effect offer a modern and engaging user experience✨
Accordions-project
This "Accordion" is a sleek webpage introducing JavaScript concepts through an interactive accordion. Covering key topics with a modern design and smooth animations, it provides a user-friendly learning experience😎.
Auto-Typing-Effect
This is a webpage that displays a dynamically changing text with a typewriter effect. The words "Awesome," "Fun," "Cool," "Life," "Famous," and "Weird" are cycled through, creating an animated typing and erasing effect. The JavaScript code controls the timing and animation, while HTML and CSS structure and style the content 🎉
background-image-carousel
The "Background Image Carousel" project presents a visually appealing webpage with a background image carousel. Users can navigate through a series of background images using left and right arrow buttons. The project combines HTML, CSS, and JavaScript to create an interactive and dynamic user experience :)
Box-Shadow-Generator
This project is a visual tool for generating CSS box shadow code with real-time updates. Users can adjust sliders to control the X and Y offsets, blur radius, and spread radius of the box shadow. The generated code is displayed and can be copied to use in other projects. 📦🌈
Captcha-cheacker
This project implements a Captcha Checker web application. Captchas are challenges designed to distinguish between humans and automated programs (bots). The system generates a random captcha string, displays it to the user, and allows them to input the correct response. Free free to check it out 🚀
Creative-Image-Hover-Effect
This "Creative Image Hover Effect" is a visually engaging webpage featuring three images with distinct clip-path shapes. Hovering over the container triggers a dynamic transformation, revealing the entire images with an artistic flair. This project adds a captivating and interactive dimension to image presentation.
Fully-Responsive-E-Commerce-Store
This E-Commerce Website crafted with HTML, CSS, and JavaScript for a fully responsive design. Enjoy seamless navigation, responsive layout, quick checkout, interactive product exploration, dynamic search, personalized accounts, sleek animations and more. Feel free to check it out 🛍️✨
HTML-CSS-JavaScript-100-Projects
Embark on your coding journey with these hands-on projects! Whether you're new to web development or looking for practice, I designed these projects to enhance your skills in HTML, CSS, and JavaScript. Yo, happy coding✨
Rayhansch-Responsive-Education-website
Rayhansch is a fully responsive education website designed to cater to users across all devices. Crafted with a combination of HTML, CSS, and JavaScript, this project provides a seamless and interactive learning experience. Explore the dynamic features and user-friendly interface, making education accessible to everyone🎓👨💻
ranawebpro's Repositories
ranawebpro/HTML-CSS-JavaScript-100-Projects
Embark on your coding journey with these hands-on projects! Whether you're new to web development or looking for practice, I designed these projects to enhance your skills in HTML, CSS, and JavaScript. Yo, happy coding✨
ranawebpro/3DNav-Showcase
This "3DNav Showcase" is a single-page website featuring an elegant 3D navigation system. Users can seamlessly explore Home, Project, and About sections using a toggle button. The visually striking pages with background images and a subtle 3D rotation effect offer a modern and engaging user experience✨
ranawebpro/Accordions-project
This "Accordion" is a sleek webpage introducing JavaScript concepts through an interactive accordion. Covering key topics with a modern design and smooth animations, it provides a user-friendly learning experience😎.
ranawebpro/Auto-Typing-Effect
This is a webpage that displays a dynamically changing text with a typewriter effect. The words "Awesome," "Fun," "Cool," "Life," "Famous," and "Weird" are cycled through, creating an animated typing and erasing effect. The JavaScript code controls the timing and animation, while HTML and CSS structure and style the content 🎉
ranawebpro/background-image-carousel
The "Background Image Carousel" project presents a visually appealing webpage with a background image carousel. Users can navigate through a series of background images using left and right arrow buttons. The project combines HTML, CSS, and JavaScript to create an interactive and dynamic user experience :)
ranawebpro/Box-Shadow-Generator
This project is a visual tool for generating CSS box shadow code with real-time updates. Users can adjust sliders to control the X and Y offsets, blur radius, and spread radius of the box shadow. The generated code is displayed and can be copied to use in other projects. 📦🌈
ranawebpro/Captcha-cheacker
This project implements a Captcha Checker web application. Captchas are challenges designed to distinguish between humans and automated programs (bots). The system generates a random captcha string, displays it to the user, and allows them to input the correct response. Free free to check it out 🚀
ranawebpro/Creative-Image-Hover-Effect
This "Creative Image Hover Effect" is a visually engaging webpage featuring three images with distinct clip-path shapes. Hovering over the container triggers a dynamic transformation, revealing the entire images with an artistic flair. This project adds a captivating and interactive dimension to image presentation.
ranawebpro/Fully-Responsive-E-Commerce-Store
This E-Commerce Website crafted with HTML, CSS, and JavaScript for a fully responsive design. Enjoy seamless navigation, responsive layout, quick checkout, interactive product exploration, dynamic search, personalized accounts, sleek animations and more. Feel free to check it out 🛍️✨
ranawebpro/Rana-shopee-Responsive-Ecommerce
This "Rana Shopee" project is a Fully responsive design and dynamic functionality, built using HTML, CSS, and JavaScript. Feel free to check this out🚀🌐
ranawebpro/Rayhansch-Responsive-Education-website
Rayhansch is a fully responsive education website designed to cater to users across all devices. Crafted with a combination of HTML, CSS, and JavaScript, this project provides a seamless and interactive learning experience. Explore the dynamic features and user-friendly interface, making education accessible to everyone🎓👨💻
ranawebpro/CSS-Variable-Manipulator
Explore the interactive power of CSS variables with this project. Users can adjust spacing, blur, and color using input controls, which dynamically update corresponding CSS variables. As a result, the styling of the webpage, featuring an image with variable padding, background color, and blur, changes in real-time.💻🎨
ranawebpro/Cursor-Following-Eyes
This "Cursor-Following Eyes" An interactive webpage with eyes that playfully follow your cursor. Built using HTML, CSS, and JavaScript for a fun and engaging experience.👀
ranawebpro/Dynamic-Background-Color-Switcher
Welcome to the Dynamic Background Color Switcher project! This web application adds a touch of interactivity to your webpage by allowing users to change the background color dynamically. The project is implemented using HTML, CSS, and JavaScript.✨
ranawebpro/Emoji-Catcher-Game
This "Emoji Catcher Game" is a web-based game where players catch randomly appearing emojis by clicking on them within a grid. The objective is to score points within a set time. The game features a countdown timer and a simple, responsive design for an engaging user experience. 🎮🕹️
ranawebpro/Expending-cards
The "Expanding Cards" project is a simple webpage featuring a dynamic image slider. Users can click on individual cards to expand them, revealing additional content and creating an interactive and visually appealing experience. The project is built using HTML, CSS, and JavaScript to handle the card expansion functionality. 🌟
ranawebpro/Gradient-Generator
This project is a simple web-based Gradient Generator. It allows users to dynamically generate gradient backgrounds by selecting two colors or generating random ones.🌈
ranawebpro/Interactive-Todo-List
This "Interactive Todo List" project is a dynamic and user-friendly application for managing tasks. It offers a clean and visually appealing interface, allowing users to add and delete todo items effortlessly. The project includes interactive features, such as success and error messages, providing a delightful user experience. 📝✨
ranawebpro/Lazy-Web-Loading
This project demonstrates a lazy web loading effect, where a background image gradually blurs in as a loading percentage increases. It provides a visual representation of content loading dynamically.
ranawebpro/Light-On-and-Off
This project is a creative representation of a light bulb that can be toggled on and off with a switch. The switch triggers a change in the background and applies visual effects to simulate the bulb turning on or off.💡
ranawebpro/Live-User-Filter
This project is a live user filter that fetches user data from the Random User Generator API and dynamically updates the displayed user list based on user input in the search bar. Additionally, there's a toggle switch to change the color theme of the interface. 🌈
ranawebpro/R-design-Responsive-Website
Explore this sleek and responsive website crafted with HTML, CSS, and JavaScript. Vibrant design, smooth transitions, and user-friendly navigation. Sections include header, hero, about, services, features, blog, and footer. Check the live demo for a dynamic experience. Happy coding💻
ranawebpro/Rotating-Gallery
This project is a rotating gallery that showcases a series of images in a three-dimensional space. Users can navigate through the gallery by clicking "Prev" and "Next" buttons, creating a visually appealing rotating effect.🔄🖼️
ranawebpro/Social-Media-Menu-Select
This project is a stylish social media menu selector that allows users to choose from a list of social media platforms. The interface features a visually appealing design with icons and animations, providing an interactive way to select a social media option.🌐🔍
ranawebpro/Text-CopyMove-Web-App
This Copy and Move project is a simple web application that allows users to copy and move text between two text areas. It provides a user-friendly interface with features to copy text to the clipboard and move text between text areas, along with a notification system to inform users about the actions performed.📋🔄
ranawebpro/Timer
This project is a sleek stopwatch application that enables users to track elapsed time accurately. The user interface is designed with a modern look, featuring a large timer display and intuitive control buttons for starting, stopping, and resetting the timer.⏱️🚀
ranawebpro/Trailer-Preview
"Trailer Preview" is a sleek and engaging project designed to showcase movie trailers in a captivating and user-friendly manner. With an intuitive interface, users can easily access trailers and enjoy a seamless viewing experience. The project focuses on simplicity and elegance, offering a preview of the movie world right at your fingertips.🎬🍿
ranawebpro/Twitter-Follow-Interface-
"Twitter Follow Interface" project provides an interactive and visually appealing UI for following and unfollowing users. The interface includes profile cards with user information, profile pictures, and follow buttons. Users can easily toggle between light and dark themes for a personalized experience.🐦🤝
ranawebpro/Two-Side-Scroll
The Two Side Scroll project is an interactive slider that showcases gaming titles and their corresponding images. It allows users to scroll both up and down, revealing information on the left side and visually engaging images on the right side :)
ranawebpro/Word-Counter-Machine
This Word Counter Machine is a simple web application that allows users to analyze and count words, letters, and spaces in a given text. Users can paste or type text into a textarea, and the application dynamically updates the counts in real-time 🚀