Web Development Tutorials

In this lab, you will learn the fundamentals of JavaScript operators and expressions, including arithmetic operations, string concatenation, and increment operators.

In this project, you will learn how to create a weather forecast application that displays the weekly weather information for a specific location. The project involves fetching weather data from an API, parsing the response, and dynamically updating the HTML elements to present the weather forecast to the user.

The http module is the official Node.js module for creating a web server, allowing front-end developers to quickly get started with server-side development. Let's create an application using this module.

In this Lab, you'll learn how to create animated social sharing buttons using HTML and CSS3. These buttons use the Font Awesome library for the icons and are styled with CSS to provide a smooth hover transition effect. By the end of this guide, you'll have a set of beautiful, responsive social buttons that you can integrate into any website.

In this lab, we will create a 3D rotating cube using HTML and CSS. This cube will have colorful faces and will rotate infinitely, creating a visually appealing effect. We'll guide you through each step of the process to help you build this project from scratch.

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 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, 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, 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!

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.

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 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, 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 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.