YoVDO

Awesome Split Screen Slider Using CSS3 and JavaScript

Offered By: Traversy Media via YouTube

Tags

HTML & CSS Courses Web Development Courses Javascript Courses HTML Courses Responsive Design Courses CSS3 Courses

Course Description

Overview

Learn to create an impressive split screen slider using HTML, CSS3, and vanilla JavaScript in this 34-minute tutorial video. Inspired by the Corsair website, build a visually appealing and interactive slider that showcases advanced CSS techniques while remaining accessible to beginners. Follow along step-by-step to construct the HTML structure, style the content with CSS, implement responsive design, and add interactivity with JavaScript. Gain hands-on experience with transform properties, z-index manipulation, and DOM manipulation to achieve a professional-looking split screen effect. Access the provided CodePen for reference and practice implementing this eye-catching web design element in your own projects.

Syllabus

Intro
Support Me
Create Project
HTML
Body Styles
Content Wrap
Content Body
Transform Property
ZIndex
ContentBody
Split in Half
Handle Style
Skew Style
Text
Responsive
JavaScript
Query Selector
Skew


Taught by

Traversy Media

Related Courses

Apprenez à créer votre site web avec HTML5 et CSS3
EFREI via OpenClassrooms
HTML, CSS, and Javascript for Web Developers
Johns Hopkins University via Coursera
Introduction to CSS3
University of Michigan via Coursera
Desarrollo de servicios en la nube con HTML5, CSS3, JavaScript 6-7-8-9 y node.js
Universidad Politécnica de Madrid via Miríadax
Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS...
Universidad Politécnica de Madrid via Miríadax