Web Development Tutorials

In this project, you will learn how to create a React application that allows users to switch between light and dark mode. The project will demonstrate the usage of the React Context API and the useContext hook to manage the global theme state.

In this project, you will learn how to create a simple show/hide functionality using React. You will implement a button that toggles the visibility of an image on the page.

In this project, you will learn how to create a personal business card using React. The project involves building a responsive and interactive web application that allows users to input their personal information and generate a customized business card.

In this project, you will learn how to implement navigation features in a React application. You will create a simple application with a navigation bar and pages that can be navigated to using links.

In this project, we will create a simple Notes App using React. The app will allow users to add, edit, and delete notes. We will break down the development into several steps, ensuring that each step meets specific requirements and adds essential functionality.

In this project, you will learn how to build a colour filter application using React. The application will allow users to filter a list of colours by typing in the name of the colour they are looking for. This project will help you understand how to work with state management, event handling, and conditional rendering in React.

In this project, we'll walk you through building a simple Pixel Art Animator using React. By the end of this guide, you'll have a basic pixel art editor where you can draw your pixel art and see the resulting animation. This project is beginner-friendly and provides a fun way to dive into the world of React and pixel art!

This project guides you through building a festive Christmas Wish List Builder web application using React. The app features a beautiful full-screen Christmas-themed background and a charming snowfall animation, enhancing the holiday spirit. Users can add wishes to a semi-transparent wish wall, and each wish is presented as a postcard. We'll use React for the frontend and CSS for styling and animations.

In this project, you will learn how to create a custom React Hook called useWindowSize to get the current window size and use it to conditionally render the navigation bar in a web application.

This project guides you through the process of deploying a pre-trained MobileNetV2 model using TensorFlow.js within a Flask web application. MobileNetV2 is a lightweight deep neural network used primarily for image classification. TensorFlow.js enables running machine learning models directly in the browser, allowing for interactive web applications. Flask, a Python web framework, will serve as the backend to host our application. By the end of this project, you will have a running web application that classifies images on the fly using the MobileNetV2 model.

In this project, you will learn how to implement a virtual scrolling list using Vue.js. Virtual scrolling is a technique that only renders the visible area of a large dataset, rather than rendering or partially rendering the data in the non-visible area. This achieves extremely high rendering performance and is suitable for rendering a large number of data with a small volume.

In this project, you will learn how to build a simple task manager application using Vue.js. The task manager allows you to create, delete, and keep track of your daily tasks, helping you become a time management master.

In this project, you will learn how to build a simple Vue.js application that allows users to switch the business status of a store between 'open' and 'close'. The application will display the current status of the store and the corresponding image based on the status. Users can click on a switch button to toggle the store's business status.

In this project, you will learn how to create a flexible skeleton screen component using Vue.js. A skeleton screen is a UI pattern that displays a simplified version of the user interface before the actual content is loaded, providing a better user experience compared to traditional loading indicators.

In this project, you will learn how to create a time conversion tool using Vue.js. This tool will allow you to convert between dates and timestamps, which is a common requirement in many business applications.

In this project, you will learn how to resolve an issue in the vue-router v3.4.0 version where undefined values in router queries are now changed to undefined strings. You will fix this issue by modifying the resolveQuery function in the query.js file of the vue-router library.

In this project, you will learn how to build a shopping cart functionality using Vue.js 2.x. The shopping cart is an essential feature in e-commerce websites, allowing users to manage their selected products before making a purchase.

In this project, you will learn how to fix a bug in the Vue Router v2.5.2 where the beforeRouteUpdate next() function is triggered too early when revisiting a route in an 'out-in' transition.