Build a Video Game Aggregator: Style the Index Page with Tailwind CSS

Your Teacher | Andre Madarang

Greetings! I'm Andre, a full-stack web developer and Laracasts instructor. My other hobbies include playing guitar, videography and gaming.

About This Episode

Published on May 25th, 2020

We’ll start off by styling the game index page using Tailwind CSS. We make use of Tailwind’s latest features, including transitions and the space-x utilities.

View the source code for this episode on GitHub.

Important Updates | Since IGDB API 3

The API used in this series has since been upgraded to version 4. Learn More
Refer to the supplementary episode for a walk-through of the changes.

Discuss It

Episodes

Section 1 Styling

What We're Building

Free Episode 2:50
Style the Index Page with Tailwind CSS

Free Episode 32:08
Make the Index Page Responsive

Free Episode 5:26
Style a Single Game Page with Tailwind

15:52
Make a Single Game Page Responsive

3:01

Section 2 The Video Game API

Fetch Game Information from the IGDB API

26:38
Improve Performance

22:11
Skeleton Loader

14:08
Use the API to Fetch Details for a Single Game

18:47

Section 3 Refactoring

Section 4 Testing

Testing With HTTP Fakes and Livewire

12:11

Section 5 Animations

Animating the Rating Progress Bar

13:16
Animating the Rating Progress Bar: Part 2

14:00

Section 6 Alpine

Search Dropdown Autocomplete with Livewire

17:08
Search Dropdown UX with Alpine.js

10:45
Modals with Alpine.js

12:35

Section 7 Wrapping Up

PurgeCSS

2:07
Conclusion

1:14
Upgrade the IGDB API to v4

9:27 View Source