YoVDO

Build a Blog on Linode Using Tailwind CSS - Bootstrap Alternative

Offered By: Linode via YouTube

Tags

Tailwind Courses Web Development Courses MongoDB Courses Next.js Courses Responsive Design Courses Linode Courses

Course Description

Overview

Learn how to program and deploy a blog using Tailwind CSS as an alternative to Bootstrap in this comprehensive video tutorial. Follow step-by-step instructions to create a Next.js project, customize a blog template, set up a MongoDB instance on Linode, and integrate it with your application. Master essential web development skills including working with Alpine.js, Font Awesome, and MongoDB Compass. Discover techniques for resolving connectivity issues, ensuring responsiveness, and fetching blog posts from a database. By the end of this tutorial, you'll have the knowledge to host your own fully functional blog on a Linode instance, complete with customized components, efficient data management, and optimized performance.

Syllabus

Introduction
Create a new Next project
Find a Blog Template
Import Blog Template
Create Next App
Customize Index
Add Fonts to Global Styles
Create Navbar Component
Install Alpine.js and Font Awesome
Create footer.js
Continue Customizing Index
Spin-up MongoDB Instance at Linode
Login to MongoDB Cluster
Update Firewall
Create Database
Setup Next.js with MongoDB
Install MongoDB Locally
Create a new Document
Resolve Connectivity Issue
Update Image Sizing
Finish Customizing Index
Troubleshoot /post page
Add Blog Name to Navbar
How to Modify Posts
Create Sidebar Component
Check Responsiveness
Resolve Responsiveness Issues
Import Posts into MongoDB Compass
Fetch Blog Posts from Database
Create getBlog.js and getBlogs.js
Update Blog Tags
Configure Create Markup Function
Configure Meta Description
Fetch Content for Slug
Update Select Posts
Conclusion


Taught by

Linode

Related Courses

Build a Full Stack Twitter clone with Next.js
Coursera Project Network via Coursera
Next JS with React Hooks - Building SSR React Applications
Udemy
End to End React with Prisma 2
Udemy
Build a Server Rendered Website with Next.js
Coursera Project Network via Coursera
Next.js 14 & React - The Complete Guide
Udemy