SuperHi FM

CatalogCart AboutSign in

SuperHi

Plan, Design + Code Your First Website

Mobile + Variation
Chapter 04

Mobile + Variation

Now that we've finished the desktop version, we'll add in a responsive design and discuss the many variations we can add to this project!

Videos

Lesson 01

Let's dig in!

Lesson 02

What do we need to fix

Lesson 03

Adding our first media query

Lesson 04

Adding our desktop layout

Lesson 05

Adding a second style to our media query

Lesson 06

Fixing the header layout

Lesson 07

Fixing the grid

Lesson 08

Fixing our header for mobile

Lesson 09

Testing on our phone

Lesson 10

Adding a contact form

Lesson 11

What variations can we add?

Lesson 12

Variation 1: text underlines in navigation

Lesson 13

Variation 2: Alice's layout

Lesson 14

Variation 3: social images in footer

Lesson 15

Variation 4: highlighted words in text

Lesson 16

Variation 5: Jaclyn's grid layout

Lesson 17

Variation 6: GIFs and videos

Lesson 18

Variation 7: border radius

Lesson 19

Variation 8: background gradients and images

Lesson 20

Variation 9: linking to projects

Lesson 21

Setting up our domain

Lesson 22

Social images and optimizing for search

Lesson 23

Thanks for taking our course!

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!

Code

Back: Chapter 03

Code

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!

EmailDiscord