Add Header and Footer with Tailwindcss / Building Website with Next.js with Coursor.ai

Add Header, Footer, and Content Area UI Elements to the Website

[ 3 videos and homework | Duration: 35-40 mins | | Preview demo ]

As part of the step-by-step tutorial for creating a simple website with Next.js, we will extend the website with basic UI features: a header with a Navbar, a content area, and a footer with links. We will build these UI components using TailwindCSS, TailwindUI, and Next.js.

This article includes:

1. Primary video tutorial (video 1) explaining how to add header, footer, and content area to a simple Next.js website using Tailwindcss.
2. An extra video (video 2) showcasing how to refactor the header using Cursor AI (prompts).
3. Another extra video tutorial (video 3) showcases how to refactor the footer area using Cursor AI (prompts).
4. A preview website to see the final result.
5. Follow-up learning topics.
6. 1 Homework (for paid members).
7. Complete source code (paid members).

Tutorial 1: Header, Footer, and Content Area with TailwindCSS

Includes:

• Mention structure and which file should contain the code
• Why do we inline the code (why not components, for now)
• Major differences in versions

Result:

Preview website

Add a NavBar (navigation menu) to a Next.js app

This sub-section covers:

1. Implement a header with a navbar, a footer, and a simple content area (with raw HTML for now)
2. Extend our solution by adding Tailwindcss and TailwindUI
3. Use Navbar from TailwindUI
   1. Install dependencies:
      1. npm install @heroicons/react
      2. npm install @headlessui/react
4. Replace <img> with next/image
5. Add the external domain to your Next.js config (next.config.ts) to allow image optimization for images from Unsplash and TailwindUI.

Link to TailwindUI's Navbar:

Tailwind CSS Navbars - Official Tailwind UI Components

Responsive navbar examples for Tailwind CSS, designed and built by the creators of the framework.

Official Tailwind UI Components

Add content area

This sub-section covers:

1. Using Tailwindcss flex component
2. Using alignment and size Tailwindcss classes

Add a footer to a Next.js application

This sub-section covers:

1. Add a two-sided and multi-column footer to the website
2. Adjust links in the header and footer
3. Add a simple content area placeholder

Tutorial 2: Refactor Tailwindcss Header UI using Cursor AI (Extra 1)

Tutorial 3: Refactor Tailwindcss Footer Area using Cursor AI (Extra 2)

Follow-ups to improve your skills after this section

• It is recommended to learn more about the following Tailwindcss elements:
  • Layout (Flex, Grid)
  • Spacing: Padding, Margin, Space Between
  • Sizing: Width, Height, Max/Min, Size

🔐 Source Code, Homework Excercise, and Solution

This tutorial includes homework, a solution for the homework, and complete source code.

All CoderVlogger.com paid members are eligible to access all course materials with extra steps.

Additionally, you can buy complete course materials and source code with a one-time payment (coming soon; subscribe for announcement).