Web Development Tutorials

Web development provides a structured learning path for creating modern websites and web applications. Our tutorials cover front - end and back - end technologies, suitable for both beginners and intermediate developers. With free labs and practical code examples, you'll gain hands - on experience in HTML, CSS, JavaScript, and popular frameworks. Our interactive web environment enables you to experiment with different technologies and see real - time results.

Create Your First HTML Page with Image

Create Your First HTML Page with Image

Learn how to create a basic HTML page and add images using simple HTML tags, perfect for beginners starting their web development journey.
HTML
Build a Web Based TCP Port Scanner

Build a Web Based TCP Port Scanner

In the previous project, we developed a Python port scanner that leveraged threading and sockets to scan TCP ports. While effective, there's room for improvement using third-party packages.
HTML
Building a Voting Application

Building a Voting Application

In this project, you will learn how to build a voting application that allows users to create and manage voting options, as well as delete options if needed. The application also includes features for multi-selection support and public voting results.
JavaScript
Insert and Style Images in HTML

Insert and Style Images in HTML

Learn how to add, style, and manipulate images in HTML using various attributes like src, alt, width, height, and title.
HTML
Build an VSCode Extension with ChatGPT

Build an VSCode Extension with ChatGPT

In this project, we will create a VSCode extension that lets the user adjust the heading level of selected Markdown text.
JavaScript
Fruit Matching Game with HTML, CSS, JavaScript

Fruit Matching Game with HTML, CSS, JavaScript

In this project, you will learn how to create a simple 'Fruit for Fun' game using HTML, CSS, and JavaScript. The game involves matching pairs of fruit images by clicking on the squares on the game board.
JavaScript
Build URL Shortener with Flask MySQL

Build URL Shortener with Flask MySQL

This project guides you through creating a simple URL shortener service using Flask and MySQL. You'll learn to set up a database, design a web interface, and implement functionality to shorten URLs, search for URLs by tags, and view analytics. The project is beginner-friendly and offers a comprehensive insight into web development with Python and database management.
HTML
Develop Markdown Editor with Live Preview

Develop Markdown Editor with Live Preview

In this project, we will create a simple web-based Markdown editor that offers live HTML preview as you type. Using libraries like Ace Editor, marked, and highlight.js, you'll develop an intuitive editor that not only allows writing in Markdown but also saves data across browser sessions and highlights code snippets in the preview.
JavaScript
Fruit Stacking Game with HTML, CSS, JavaScript

Fruit Stacking Game with HTML, CSS, JavaScript

In this project, you will learn how to create a simple fruit stacking game using HTML, CSS, and JavaScript. The goal is to stack the falling fruit items at the top of the page into the box at the bottom. If there are three identical fruits in the box, they will be automatically removed.
JavaScript
Build an Image Cropping Tool Using HTML5

Build an Image Cropping Tool Using HTML5

This project will guide you through the process of creating a simple image cropping tool. By the end, you'll have an interactive application that allows users to upload, display, and crop images.
JavaScript
Simple Prize Draw Application

Simple Prize Draw Application

In this project, you will learn how to create a simple prize draw application using JavaScript and jQuery. The application will simulate a prize draw by rotating a list of prizes and displaying the winning prize when the rotation stops.
JavaScript
Building Responsive Accordion Interfaces

Building Responsive Accordion Interfaces

In this project, you will learn how to create a simple folding accordion using HTML, CSS, and JavaScript. The folding accordion is a common UI element that allows users to expand and collapse content sections, making it a useful feature for displaying information in a compact and organized manner.
JavaScript
2048 Web Game Using jQuery

2048 Web Game Using jQuery

2048 is an extremely popular and easy-to-learn game that has taken the world by storm. If you haven't played it yet, you can download it on your mobile phone to give it a try. This project will guide you in using HTML, CSS, JavaScript, and jQuery to create a web version of the 2048 game.
JavaScript
Time with Your Phone

Time with Your Phone

In this project, you will learn how to create a line chart using the ECharts library. The chart will display the number of hours the user spends on their phone each day of the week.
HTML
Interactive Film Collection Web App

Interactive Film Collection Web App

In this project, you will learn how to create an interactive collection of films web application using HTML, CSS, and JavaScript (jQuery). The application allows users to mark their favorite films, and when a collection of favorite films is created, a success message is displayed.
JavaScript
Build a Sliding Puzzle Game with JavaScript

Build a Sliding Puzzle Game with JavaScript

Welcome to this project on building a simple Sliding Puzzle game using JavaScript. By the end of this guide, you'll have a functioning 3x3 sliding puzzle game that you can play in your browser. The game will feature numbered tiles, a timer, and controls to start, pause, and reset the game.
JavaScript
Real-Time Sales Dashboard with Echarts

Real-Time Sales Dashboard with Echarts

In this project, you will learn how to create a real-time sales dashboard using the Echarts library. The dashboard will display the sales and volume data in a visually appealing and easy-to-understand format.
JavaScript
Build a Tic-Tac-Toe Web App

Build a Tic-Tac-Toe Web App

In this project, you will learn how to create a Tic-Tac-Toe game using HTML, CSS, and JavaScript. Tic-Tac-Toe is a two-player game where players take turns marking X or O in a 3x3 grid. The objective is to get three marks in a row, either horizontally, vertically, or diagonally. You will create the necessary HTML, CSS, and JavaScript files and implement the game logic step by step.
CSS
  • Prev
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ...
  • 54
  • Next