CSS Tutorials

CSS provides a structured learning path for web styling and design. Our tutorials cover CSS3 properties, layout techniques, and responsive design, suitable for beginners and intermediate web developers. Through hands-on labs and practical examples, you'll gain experience in creating attractive and responsive web layouts. Our interactive CSS playground allows you to experiment with different styles and see instant visual results.

Monty Hall Simulation Web App
Monty Hall Simulation Web App
Welcome to the Monty Hall Problem Simulation project. The Monty Hall problem is a probability puzzle based on a game show scenario. In this project, we'll guide you through creating a simple web-based simulation to demonstrate the puzzle. By the end, you'll have a functional Monty Hall simulation to test out the theory for yourself.
JavaScriptCSSHTML
Creating a Whack-a-Mole Web Game
Creating a Whack-a-Mole Web Game
In this project, you will learn how to create a Whack-a-Mole game using HTML, CSS, and JavaScript. The game involves whacking moles that randomly appear from holes within a specified time limit. You will create the necessary HTML, CSS, and JavaScript files and implement the game logic step by step.
JavaScriptCSSHTML
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.
CSSHTMLJavaScript
Vue.js Search Functionality Development
Vue.js Search Functionality Development
In this project, you will learn how to create a simple search function using Vue 2. The search function allows users to search for content and displays the relevant results. This project will help you understand the basics of Vue.js and how to implement a search feature in a web application.
HTMLCSSJavaScript
Web-based HTML Presentation Builder
Web-based HTML Presentation Builder
In this project, you will learn how to create a web-based PowerPoint (PPT) presentation using front-end technologies. This type of PPT is more convenient for dissemination and viewing, and can make full use of the layout and interaction capabilities of front-end technologies.
HTMLJavaScriptCSS
User Permission Management System with JavaScript
User Permission Management System with JavaScript
In this project, you will learn how to implement a user permission management system using JavaScript and jQuery. The project involves fetching user data asynchronously, rendering it in a user permission table, and providing functionality to move users between the user and administrator lists, as well as updating the user permissions accordingly.
JavaScriptCSS
Create Responsive Modal Boxes
Create Responsive Modal Boxes
In this project, you will learn how to create a modal box component that can be displayed and hidden on a web page. Modal boxes are commonly used in web applications to display additional content or forms without navigating away from the current page.
JavaScriptCSS
Westward Journey to Heavenly West
Westward Journey to Heavenly West
In this project, you will learn how to create an animated sequence using CSS. The project is based on the story of a group of disciples who set out on a journey to the Western Heaven to seek Buddhist scriptures. However, they were immobilized midway by demons, and a character named Tom used CSS to save them, allowing the disciples to continue their journey to the West.
CSS
Responsive Web Design for All Screens
Responsive Web Design for All Screens
In this project, you will learn how to create a responsive web design that adapts to different screen sizes. The goal is to develop a webpage that provides a comfortable user experience for both desktop and mobile users.
HTMLCSS
Responsive Web Design with Gulp
Responsive Web Design with Gulp
In this project, you will learn how to implement a responsive layout for a website, similar to the official Gulp.js website. You will use media queries to adjust the layout and styles of the web page based on the screen size.
CSSHTML
Movie Theater Seat Arrangement
Movie Theater Seat Arrangement
In this project, you will learn how to create a seating arrangement for a movie theater using CSS. The goal is to design a layout that includes a screen and a seating area with specific spacing requirements.
HTMLCSS
Give Your Page a Makeover
Give Your Page a Makeover
In this project, you will learn how to design and style a login page with a beautiful interface. The goal is to create a visually appealing login page that provides a pleasant user experience.
CSSHTML
Simple and Beautiful Home Page Design
Simple and Beautiful Home Page Design
In this project, you will learn how to create a simple and beautiful home page layout for the LabEx Knowledge Network website. The goal is to design an aesthetically pleasing home page that effectively presents the website's content and features.
CSSHTML
Creating Earth's Orbital Animation with CSS
Creating Earth's Orbital Animation with CSS
In this project, you will learn how to create a CSS animation that simulates the Earth's orbit around the Sun. This project will help you understand the concepts of CSS animations and how to apply them to create a dynamic and visually engaging web experience.
CSS
Implement Dynamic Sticky Tab Bar
Implement Dynamic Sticky Tab Bar
In this project, you will learn how to implement a dynamic tab bar that fixes to the top of the page when the user scrolls down. This feature is commonly seen in mobile apps and websites, providing a smooth and intuitive user experience.
CSSHTML
Depth of Field in Images
Depth of Field in Images
In this project, you will learn how to dynamically apply a depth of field effect to images using JavaScript. The depth of field effect is a popular visual technique in photography and web design, where the foreground of an image is blurred while the background remains clear.
JavaScriptCSS
Creative Billboard Design with Wooden Textures
Creative Billboard Design with Wooden Textures
In this project, you will learn how to create a creative billboard design that combines the history of 'Fanciful Valley' and the prosperity of 'Dream Bay'. You will learn how to style the billboard with a wooden-textured background and a tilted top sign, creating a captivating artistic experience for passersby.
CSSHTML
Building a Responsive News Website Homepage
Building a Responsive News Website Homepage
In this project, you will learn how to create the homepage for the LabEx Daily newspaper website. You will be responsible for setting up the HTML structure and styling the various sections of the homepage using CSS.
CSSHTML
  • Prev
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ...
  • 9
  • Next