Build game landing page with video background using ReactJS, NextJS and TailwindCSS

3 years ago
48

Welcome!

Let's build a professional responsive game landing page with video background from scratch using ReactJS, NextJS and TailwindCSS. It's a beginner friendly video, if you do not know anything about web development, this video should help you get started.

Game page - https://shepherdgames.vercel.app/games/tim

Chapters:
00:00 Introduction
02:57 Set up the Nextjs project with TailwindCSS
04:33 Responsive website demo
07:11 Start coding
10:34 Update website name and favicon
12:06 Build webpage with video background and sound button
46:10 Make use of React Hook, useState, for enabling/disabling audio
01:04:58 Add number count up animation with Reactjs
01:22:17 Add visibility sensor to know if an element is on screen
01:28:43 Build responsive hero banner
01:46:03 Implement grid and flex responsive views with TailwindCSS
01:57:50 Build responsive page with gameplays
02:13:20 Crop image with TailwindCSS
02:39:33 Add styled hyperlinks
02:42:46 Implement click to scroll with react scroll (react-scroll)
02:50:56 Ending

Get our games and related assets
itch.io - https://shepherdgames.itch.io
Codester - https://www.codester.com/sudeep98/shop
Construct - https://www.construct.net/en/game-assets/users/shepherdgames-152200
Gamedevmarket - https://www.gamedevmarket.net/member/shepherd-games/

You may contact us for any game development requirements or support for any game of our assets or any help with Construct 3 game logics
Email - contact@shepherd.games
Discord - https://discord.gg/WrMwKKEaUn
Website - https://www.shepherd.games

Follow us
Facebook - https://www.facebook.com/shepherdgames
Twitter - https://twitter.com/_shepherdgames
Pinterest - https://in.pinterest.com/shepherdgames
Instagram - https://www.instagram.com/shepherdgames
Twitch - https://www.twitch.tv/shepherdgames1

Support us
Paypal - https://paypal.me/shepherdgame
Patreon - https://www.patreon.com/shepherdgames
BuyMeACoffee - https://www.buymeacoffee.com/shepherdgames

#reactjs #nextjs #tailwindcss

Loading comments...