$10
per class
Class
Play

Programming HTML, CSS, Javascript - Xbox PS5 Split Landing Page

Completed by 6 learners
Ages 10-15
Live One-Time Class
In this single lesson, students will use HTML, CSS, and Javascript to create and style a single page web page that is dynamically split in half and responsive to cursor movements.
Average rating:
5.0
Number of reviews:
(61 reviews)

Live video meetings
Meets once
2-6 learners per class
55 min

What's included

1 live meeting
55 mins in-class hours

Class Experience

In this course, students will learn how to create a web based application using fundamental HTML, CSS, and Javascript to make a sophisticated landing page. This webpage will be dynamically split in half to feature two competing products. The respective half will increase to a large majority of the screen when a user hovers their mouse over that portion of the screen. HTML and CSS are the foundation of the web. So, they're also the foundation for taking tech skills to the next level. Having a handle on the fundamentals of JavaScript will make learning another programming language easier.

This class will show and explain how to create a basic HTML layout, style it with CSS, and then use Javascript to animate each half of the webpage. Students will learn about various animations and conditional statements to control those animations. I will also give out a challenge after every class so students can experiment and grow their knowledge. By the end of the course, students will have the knowledge of how to create a basic web based application using HTML, CSS, and Javascript to animate web page elements.

We play Kahoot to warm up to HTML, CSS, and JavaScript topics so students will need access to that site. Students should be able to type on a keyboard and have some coding knowledge. This lesson will require a computer with internet access and the ability to navigate to CodeSandbox.io for a shared coding environment.

Learning Goals

-Basic HTML Layout with markdown sections for titles, body paragraph, and interactive buttons.
-Basic CSS Styling applying background colors, text colors, element location, and interactive animations.
-Basic Javascript creating variables, adding event listeners, crafting functions, and conditional statements used to control programming.

Other Details

External Resources
In addition to the Outschool classroom, this class uses:

Meet the teacher

Joined January, 2021
5.0
61reviews
Profile
Teacher expertise and credentials
Howdy! My name is Chris and I personally believe they should be teaching coding languages in our classrooms. The courses I teach focus on interactivity and building on programming fundamentals. It's so important to me that students get the opportunity to create something unique during our time together. My classes will always endeavor to have a sense of humor and while producing applications that lead to greater understanding of not only the computer language, but also the actions we take while playing games. This approach means students are not only entertained, but really remember the underlying aspects of the lesson, and most importantly, are able to apply them to new challenges.

Reviews

Parents also liked
Summer Camp Coding Workshop-Build Your Own Website Using HTML, CSS, & Javascript
Coding Doctors Learning Lab, Inc.
4.8
(1,256)
$15 per class
Next session at 12 AM on Tue 6/3
Group Class
2 wks, 4/wk, 55 min
10-14
Master Web Development: Year-Long HTML, CSS, & Javascript Projects for Kids
Faruk Hasan
4.8
(152)
$12 per class
Next session at 11 PM on Tue 7/1
Group Class
1/wk, 35 min
11-15
Coding - Intro to HTML and CSS for Website Creation for Beginners Level 1
Einsteins Square: Chess, Coding, Math, Art, Games
4.8
(5,895)
$20 per class
Next session at 9 PM tomorrow
Group Class
10 wks, 1/wk, 50 min
9-14
Web Design for Kids: HTML & CSS & WordPress
AI Code Academy
4.7
(1,801)
$21 per class
Next session at 3 PM on Saturday
Group Class
10 wks, 1/wk, 1 hr
9-14
Coding - Intro to HTML and CSS for Website Creation for Beginners Level 2
Einsteins Square: Chess, Coding, Math, Art, Games
4.8
(5,895)
$20 per class
Next session at 3 AM tomorrow
Group Class
10 wks, 1/wk, 50 min
10-15
Summer Camp: Web Design for Kids: HTML & CSS & Wordpress
AI Code Academy
4.7
(1,801)
$18 per class
Next session at 3 PM on Mon 6/16
Group Class
2 wks, 5/wk, 1 hr
10-15
Personalized 1-On-1 Tutoring: Build Your First Website With HTML & CSS
Antonia Burroughs
$60 per session
1-on-1 Lessons
On Demand
3-18
Build Awesome Websites With HTML, CSS & AI Design Tools (Beginner Friendly)
PopSkool: English, Music, Art, Math, Coding & More
5.0
(53)
$15 per class
Next session at 5 PM tomorrow
Group Class
8 wks, 1/wk, 55 min
10-14
Website Development | Beginners - Coding
Codingal - #1 AI & Coding | Backed by Y Combinator
4.5
(17)
$18 per class
Next session at 3 PM on Thursday
Group Class
4 wks, 2/wk, 1 hr
12-17
Web Programming Weeklong Camp
MissB aka Bhavana R (Coding)
4.9
(38)
$80 per class
Next session at 7 PM on Mon 7/14
Group Class
1 wk, 5/wk, 1.50 hr
10-15
"Kids' Coding Quest: Building Awesome Websites Together"
MS. JEN of ARTISTIC KIDS WORKSHOP
4.7
(6)
$9 per class
Next session at 11 PM on Mon 6/2
Group Class
4 wks, 2/wk, 55 min
9-14
Web Design & Coding Summer Camp: Build Your First Website for Beginners
Sora Schools, Inc.
$30 per class
Next session at 2 PM on Mon 7/14
Group Class
1 wk, 5/wk, 1.50 hr
10-14
1:1 Coding Sessions: Java, Python, HTML, CSS, JavaScript (Customizable)
MissB aka Bhavana R (Coding)
4.9
(38)
$70 per session
1-on-1 Lessons
On Demand
9-18
Computer Programming, Coding, Python, Javascript, C#, C++ One on One Tutoring
Dragon Academy by Trammell Classes, DnD,Coding,RPG
4.8
(732)
$36 per class
Next session at 12:30 AM tomorrow
Group Class
1/wk, 25 min
7-12
Summer Coding Camp: Javascript Adventures for Kids!
Coco Coders
4.8
(974)
$18 per class
Next session at 1 PM on Mon 6/23
Group Class
6 wks, 1/wk, 55 min
9-14
Kids' Coding Quest: JavaScript Games Edition
MS. JEN of ARTISTIC KIDS WORKSHOP
4.7
(6)
$12 per class
Next session at 12 AM on Tue 6/3
Group Class
4 wks, 2/wk, 55 min
9-14
See More Classes
Home
Search
Give a Gift Card
Open currency, time zone, and language settings
Language & Region
Log In