SuperHi FM

Search:

Catalog Cart About Sign in

Javascript for Designers

Plant Life

Chapter 02

Plant Life

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Introduct to Plant Life

Lesson 02

How to structure our site in HTML

Lesson 03

Adding in our CSS

Lesson 04

Placing things in a main tag

Lesson 05

What is classList in Javascript

Lesson 06

Adding preparation for our menu

Lesson 07

Toggling our class for slide out

Lesson 08

Changing our text from Menu to Close

Lesson 09

Variation #1

Lesson 10

Variation #2

Lesson 11

Variation #3

Lesson 12

Additional styling for our menu

Lesson 13

Adding our slideshow HTML

Lesson 14

Styling up our slideshow

Lesson 15

How to add layering in HTML and CSS

Lesson 16

Looping around with Javascript

Lesson 17

Adding CSS animation with Javascript

Lesson 18

The forEach function and shortcut functions

Lesson 19

Applying forEach to our project

Lesson 20

Adding the mouseover event

Lesson 21

Adding a mouseout event

Lesson 22

Snapping our randomness to a grid

Lesson 23

Applying grid snapping

Lesson 24

Adding a box shadow on hover

SuperHi FM

Want some ambient music in the background? Play our radio station!

Type Checker

Next: Chapter 03

Type Checker

Rose Culver

Back: Chapter 01

Rose Culver

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

In this chapter, we create a plant shop website that features a slideshow and a sliding menu. We also go further with Javascript events by adding in click, mouseover and mouseout events, and talk about how to add randomness into our design work.

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

Sign in to save notes