Harvard University · edX
CS50's Introduction to Computer Science
An introduction to the intellectual enterprises of computer science and the art of programming.
freeCodeCamp via YouTube Free video
Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial
Overview
Learn how to use Next.js to build an SEO-optimized blog using. Also, use TailwindCSS, contentlayer, Supabase, an dmore. The course covers building a homepage, blog pages, category pages, an about page, and a contact page. Also, you'll learn to implementing powerful SEO strategies for higher Google rankings. Our blog features both dark and light themes, offering a minimal and elegant design that's fully responsive on mobile devices. Plus, you'll discover how to showcase your Markdown-based blogs easily on this website.
Course developed by @CodeBucks
Watch the final section of this course here: https://youtu.be/1QGLHOaRLwM?si=TnQmWgGoL6ferRIu&t=19896
Demo Link: https://create-blog-with-nextjs.vercel.app/
✏️ Starter Code: https://github.com/codebucks27/Nextjs-contentlayer-blog
✏️ Final Code: https://github.com/codebucks27/Nextjs-tailwindcss-blog-template
❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba)
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro + Demo
⌨️ (0:10:10) Setup and Installation
⌨️ (0:13:34) Tailwind CSS Setup, Dark Mode and project files
⌨️ (0:19:09) Adding Fonts
⌨️ (0:26:56) Navbar Component
⌨️ (0:46:31) Setup Contentlayer
⌨️ (1:08:31) How to render a Blog
⌨️ (1:13:11) Creating Home Cover Section
⌨️ (1:34:16) Featured Posts Component
⌨️ (1:50:11) Recent Posts Component
⌨️ (2:00:46) Footer Component
⌨️ (2:16:31) Blog Page
⌨️ (3:02:06) Creating TOC Component
⌨️ (3:20:51) Category Page
⌨️ (3:45:31) About page
⌨️ (3:58:26) Contact page
⌨️ (4:14:11) Insights Component
⌨️ (4:23:41) Store blog views using Supabase
⌨️ (4:49:16) Adding SEO
⌨️ (5:18:36) Adding Dark Mode
⌨️ (5:30:36) Making it Responsive
Watch the final section of this course here: https://youtu.be/1QGLHOaRLwM?si=TnQmWgGoL6ferRIu&t=19896
⌨️ Adding Sitemap
⌨️ Image Optimization
⌨️ Adding Favicon and manifest file
⌨️ Adding google's structured json-ld for SEO
Correction:
6:55:15 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.
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Advantages and disadvantages
Advantages
- Completely free, with no ads inside the lessons.
- Project-based: you build real apps as you learn.
- freeCodeCamp's own certifications are free and well known among developers.
- Free, one long video that covers a topic end to end.
- Use the chapters to jump to what you need.
- 113,134 views, so help and notes are easy to find.
- Completely free.
- Self-paced: start any time.
Disadvantages
- YouTube videos are long single recordings; you pace yourself.
- Less theory than a university course.
- No exercises or certificate: code along to make it stick.
- No certificate.
- No graded assignments or feedback.
Some points apply to every course of this kind; see how we rank.
Free
- Free: Watch on YouTube, no account needed.
- Certificate: None. Code or take notes along to make it stick.
freeCodeCamp is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (78/100). Free full courses and certifications; practical, but not university-level depth.
Similar courses
CS50's Mobile App Development with React Native 2018
Learning objectives This course picks up where Harvard University's CS50 leaves off, transitioning from web development to mobile app development with React Native, a popular open-source framework maintained by Facebook that enables cross-platform native apps using JavaScript without Java or Swift.…
Harvard University · edX
CS50's Web Programming with Python and JavaScript
This course picks up where CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap.
CS50 Fall 2023 - Lecture 8 - HTML, CSS, JavaScript (live, unedited)
*** This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. *** TABLE OF CONTENTS 00:00:00 - Introduction 00:14:01 - Bingo Board 00:14:51 - Internet 00:19:37 - TCP/IP 00:27:25 - ports 00:31:05 - DNS 00:34:20 - DHCP 00:35:25 - H…
CS50 Fall 2025 - Lecture 8 - HTML, CSS, JavaScript (live, unedited)
*** This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. *** 00:20:28 - TCP/IP 00:31:06 - Ports 00:36:22 - DNS 00:40:11 - DHCP 00:41:43 - HTTP 00:52:29 - Status Codes 00:55:15 - Inspect 01:02:09 - HTML 01:55:26 - Regular Exp…
Harvard University · edX
Data Science: Wrangling
4.436 ratingsLearn to process and convert raw data into formats needed for analysis.