Learn to build an SEO-optimized blog using Next.js, Tailwind CSS, and Contentlayer in this 6-hour course. The course covers creating various pages like the homepage, blog pages, category pages, about page, and contact page. You will also learn to implement SEO strategies for better Google rankings, showcase Markdown-based blogs, and make the website fully responsive. The course teaches Tailwind CSS setup, Contentlayer integration, blog rendering, creating components like Navbar, Featured Posts, Recent Posts, and more. The intended audience for this course is individuals interested in web development, SEO, and creating responsive websites.
Overview
Syllabus
⌨️ Intro + Demo
⌨️ Setup and Installation
⌨️ Tailwind CSS Setup, Dark Mode and project files
⌨️ Adding Fonts
⌨️ Navbar Component
⌨️ Setup Contentlayer
⌨️ How to render a Blog
⌨️ Creating Home Cover Section
⌨️ Featured Posts Component
⌨️ Recent Posts Component
⌨️ Footer Component
⌨️ Blog Page
⌨️ Creating TOC Component
⌨️ Category Page
⌨️ About page
⌨️ Contact page
⌨️ Insights Component
⌨️ Store blog views using Supabase
⌨️ Adding SEO
⌨️ Adding Dark Mode
⌨️ Making it Responsive
⌨️ Adding Sitemap
⌨️ Image Optimization
⌨️ Adding Favicon and manifest file
⌨️ Adding google's structured json-ld for SEO
We have created one file called ThemeScript.js but that is not needed. Instead, just add id and strategy to the script that is in the layout.js file.
Taught by
freeCodeCamp.org
Related Courses
-
YouTube Clone – T3 Stack Tutorial (Next.js, TypeScript, Tailwind CSS)
-
Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx
-
Full Stack Next.js & Supabase Twitter Clone – Full Course
-
Build & Deploy AI SaaS with Reoccurring Revenue (Next.js, OpenAI, Stripe, Tailwind, Vercel)
-
Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial
-
Strapi & GatsbyJS Course - Portfolio Project
