SuperHi FM

Search:

Catalog Cart About Sign in

Next: Chapter 06

Baker + Brown

Back: Chapter 04

Boyce

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!

Email Discord

Search:

Catalog Cart About Sign in

Next: Chapter 06

Baker + Brown

Back: Chapter 04

Boyce

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!

Email Discord

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

SuperHi

Foundation HTML, CSS + Javascript

Chapter 05

Essmei

We learn the basics of Javascript, which allows us to turn static websites into something dynamic and interactive. We use a Javascript library called jQuery to create a shop website that has a filtering menu and a toggling feature on mobile devices.

Links + downloads

Chapter resources

Chapter URL

Frequently Asked Questions

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod imperdiet feugiat. Pellentesque elementum rhoncus justo eu maximus. Donec varius magna sed nisl posuere fermentum. Integer in orci placerat, egestas lacus a, pharetra tortor. Sed iaculis ac turpis sit amet semper. Nunc accumsan gravida tempus. Donec vel eros a risus condimentum ullamcorper ac eu mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tortor faucibus, egestas tellus ut, condimentum erat. Vivamus tristique aliquam purus.

Videos

Lesson 01

Project overview

Lesson 02

HTML structure using outer and inner containers

Lesson 03

Initial CSS and using 2x assets

Lesson 04

Hero background positioning and copy column

Lesson 05

Final navigation and products HTML

Lesson 06

Navigation and products style using flexbox

Lesson 07

Adding product overlay initial HTML and CSS

Lesson 08

Positioning the overlay using absolutes and rgba

Lesson 09

More playful hover effects using transition timings

Lesson 10

Initial breakpoint for tablet layout

Lesson 11

Responsive styles for tablet to mobile

Lesson 12

Mobile responsive styles

Lesson 13

Adding show filters link

Lesson 14

Using unordered list elements to style up the filters

Lesson 15

Final filter list style tweaks

Lesson 16

What is Javascript and jQuery?

Lesson 17

What types of data do we have in Javascript?

Lesson 18

Using the Chrome Javascript console

Lesson 19

Attaching our Javascript files to the page

Lesson 20

Showing and hiding content on the click event

Lesson 21

Building a navigation toggle using jQuery

Lesson 22

Getting attributes and using variables

Lesson 23

Using the this keyword in Javascript

Lesson 24

Filtering the products selection using jQuery

Lesson 25

Adding and removing the active link style

Lesson 26

Overriding CSS styles using !important

Homework 01

The Hexagons

Although they’re a fictional band, The Hexagaons have a website that will rival most of today’s biggest artists! This week’s project has been designed by London based graphic and digital designer Meara Withe (website and Twitter). You’ll hopefully already recognise her work from week 3 Lola’s project, so you’re in store again for another explosively colourful and heavily graphic visual treat.The real challenge here is how to achieve the menu effect with a centered logo between two navigation sections. Give it your best shot, but if you get stuck the solution is here. Oh, and try your best to use flexbox for things like the header and album elements.There’s also the same JavaScript effects used to filter the products, which can pretty much be borrowed over from Essmei.

Private notes

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

SuperHi FM

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