LabEx
Join Free

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.

Other Skill Trees

LinuxDevOpsCybersecurityDevOps EngineerCybersecurity EngineerDevSecOpsKali LinuxRed Hat Enterprise LinuxRHCSA TrainingRHCE in Enterprise Linux TrainingLFCS TrainingShellGitDockerKubernetesCKA TrainingCKAD TrainingCKS TrainingAnsibleRHCE in Ansible TrainingJenkinsNmapWiresharkHydraCompTIADatabaseMySQLPostgreSQLRedisMongoDBSQLitePythonGolangJavaCC++Data Science
CSS Styling Tables

CSS Styling Tables

In this lab, you will learn how to style HTML tables using various CSS properties to improve their readability and visual appeal.
HTMLCSS
CSS Text Styling

CSS Text Styling

In this lab, you will learn the fundamentals of CSS text styling, including how to set text color, font size, font weight, alignment, and line height.
CSS
CSS Styling Lists

CSS Styling Lists

In this lab, you will learn how to style HTML lists using various CSS properties to create a horizontal navigation bar.
HTMLCSS
CSS Selectors Basics

CSS Selectors Basics

In this lab, you will learn the fundamentals of CSS selectors, including element, class, ID, grouping, and descendant selectors to style HTML elements.
CSS
CSS Modern Utilities with Tailwind

CSS Modern Utilities with Tailwind

In this lab, you will learn the basics of Tailwind CSS, a utility-first CSS framework, by styling a simple HTML element. You'll add the CDN, and apply classes for background color, text color, padding, and layout.
CSSHTML
CSS Layout Basics

CSS Layout Basics

In this lab, you will learn the fundamentals of CSS Flexbox to create responsive and flexible web layouts.
CSS
CSS Introduction and Linking

CSS Introduction and Linking

In this lab, you will learn the basics of CSS, including how to create an external stylesheet and link it to an HTML document to change the font of the page.
CSSHTML
CSS Colors and Backgrounds

CSS Colors and Backgrounds

In this lab, you will learn how to style web page elements by applying various CSS color and background properties, including setting colors, adding images, and controlling their position and repetition.
CSSHTML
CSS Box Model

CSS Box Model

In this lab, you will learn the fundamentals of the CSS Box Model, including content, padding, border, and margin, and how to control element sizing with box-sizing.
CSS
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.
JavaScriptHTMLCSS
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.
JavaScriptHTMLCSS
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
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
Building a React Drag-and-Drop Puzzle Game

Building a React Drag-and-Drop Puzzle Game

In this project, we will create a drag-and-drop puzzle game using React. This is an excellent project for beginners to learn about React components, state management, and handling user interactions. By the end of this project, you will have a functional puzzle game.
ReactJavaScriptCSS
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.
HTMLPythonMySQLCSS
Building a Modern Expense Splitter Web App

Building a Modern Expense Splitter Web App

In this step-by-step project, we will create a modern and visually appealing Expense Splitter web application using HTML, CSS, and JavaScript. This application will allow you to split expenses among a group of people and calculate who owes what to whom. We will start from scratch and cover each step to build the project progressively.
JavaScriptHTMLCSS
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
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.
JavaScriptCSSHTML
  • Prev
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ...
  • 82
  • Next