Part 5: Rebuilding Linear's Homepage with Next.js and Tailwind

This video is part of a multi part series in which we are going to rebuild Linear's homepage with Next.js 13 and Tailwind.

In this part we will work on building the command menu component.
In the next parts we will keep working on all of the other components the homepage brings.

👀 Timestamps
00:00 - Intro
00:20 - What we're building
01:13 - Start building command menu
01:56 - Scaffolding basic structure
07:41 - Adding content to command menu
09:09 - First styles
14:59 - Start making command options dynamic with JS
20:52 - Styling command options
23:13 - Focus command bar when clicked (animations!)
30:00 - Fade out block text when menu bar opens
31:40 - Make menu bar buttons clickable and show next buttons
39:48 - Bounce animation when button is clicked
43:10 - Highlight first button
43:42 - Add box shadow
44:07 - Close command menu when second option is clicked
47:47 - Responsive
49:17 - Outro


💬 Join us on Discord: https://www.frontend.fyi/discord
🐦 Follow me on Twitter: https://twitter.com/frontend_fyi & https://twitter.com/JeroenReumkens
👨‍🏫 Check my mentorships: https://www.jeroenreumkens.nl/mentoring

📺 Other parts
Part 1: https://youtu.be/ls_b-1a0ZUc
Part 2: https://youtu.be/rdqjMN7Q-bk
Part 3: https://youtu.be/ar_NCPlRt_U
Part 4: https://youtu.be/RoQ0MXiWQoY

🔗 Source on Github: https://github.com/frontendfyi/rebuilding-linear.app
👀 Preview of what we've build so far: https://rebuilding-linear.vercel.app/

Tools mentioned:
🔗 Tailwind: https://tailwindcss.com
🔗 Linears website: https://linear.app

#linear #react #css #tailwind #frontend

Дата на публикация: 16 февруари, 2023
Категория: Друго