Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript // TRAIN BRAIN

Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript

Learn to build a Weather App using Next.js, Tailwind CSS, and TypeScript in this hands-on tutorial! Create a responsive, dynamic app from scratch with React components.
✏️ Course from @reactwithutkarsh
Live Demo: https://weather-app-nextjs-seven-rho.vercel.app/
Code Repo: https://github.com/whoisseth/weather-app-nextjs
⭐️ Chapters ⭐️
⌨️ (0:00:13) Introduction
⌨️ (0:03:45) Navbar Component
⌨️ (0:27:41) API and Data Types Configurations
⌨️ (0:38:59) Current Day Section Components
⌨️ (1:12:45) Additional Details Component
⌨️ (1:30:53) 7 Days Forecast Data Section
⌨️ (1:41:53) Search and Current Location Logic
? 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

freeCodeCamp.org

Learn to code for free....

Intro to AI Engineering – OpenAI JavaScript Tutorial

Ben Awad is a 10x Programmer [freeCodeCamp Podcast #120]

TypeScript Platformer Game Tutorial – Kirby Clone

Webflow Tutorial for Beginners – No-Code Web Design

Build a Google Photos Clone with Next.js and Cloudinary – Tutorial

Intuitive SQL For Data Analytics - Tutorial

CTO Andrew Brown on DevOps + Cloud Certification Exams [freeCodeCamp Podcast #120]

WebSockets Beginners Tutorial with Socket.IO

RAG From Scratch – Tutorial from LangChain Engineer

Digital Ocean Tutorial – Deploy Django and Other Frameworks

CSS Artist Kass Moreno – freeCodeCamp Podcast #119

1-Click AI Web Development Tutorial - Turn Figma Designs into Working Code using AI

Backend Development Course - Build 3 Projects

Indie Game Dev Jabrils talks AI & Anime [freeCodeCamp Podcast #118]

React Router v6 – Full Course

Build a Dev Portfolio as a 2D Game – JavaScript Course

Understanding AI from Scratch – Neuaral Networks Without Libraries Course

Automate Boring Tasks – No-Code Automation Course

Learn NestJS – Complete Course

ASP.NET Core Tutorial – Beginner to Advanced Projects

Intro to Stacks – Data Structure Explained

Building web applications in Java with Spring Boot 3

From Stay-at-Home Mom to Developer at Age 36 [freeCodeCamp Podcast #115]

Localize Your Websites with Crowdin – Full Course

Top 10 Javascript Algorithms to Prepare for Coding Interviews

Back End Developer Roadmap 2024

Having Fun in Tech with Cassidy Williams – freeCodeCamp Podcast

Build a Virtual 3D Art Gallery – Three.js Tutorial / Code-a-Long

Learn C# – Full Course with Mini-Projects

Founder and Yale CS Student Seth Goldin – freeCodeCamp Podcast

Machine Learning in 2024 – Beginner's Course

Serverless Node.js Tutorial – Neon Serverless Postgres, AWS Lambda, Next.js, Vercel

Generative AI Full Course – Gemini Pro, OpenAI, Llama, Langchain, Pinecone, Vector Databases & More

Working at OpenAI with Logan Kilpatrick – freeCodeCamp Podcast

Logical And &&

Logical And &&

Google Gemini AI Course for Beginners

Azure AI Fundamentals Certification 2024 (AI-900) - Full Course to PASS the Exam

Resume Projects

How the Insane Pressure of Classical Music Prepared Jessica for Tech – freeCodeCamp.org Podcast

100 Days of Code

Learn p5.js for Creative Coding – 5 Beginner Projects

Learn SvelteKit – Full Course for Beginners

Scrimba CEO Per Borgen – freeCodeCamp.org Podcast Interview

Career Change to Code - The Complete Guide

Spring Boot & Spring Data JPA – Complete Course

Oh My Zsh Creator Robby Russell – freeCodeCamp.org Podcast Interview

Learn Accessibility - Full a11y Tutorial

GitHub Foundations Certification Course – Pass the exam in 10 hours!

Deep Learning Interview Prep Course

Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript

LangChain GEN AI Tutorial – 6 End-to-End Projects using OpenAI, Google Gemini Pro, LLAMA2

Passkey Authentication with Express.js and Docker – Web Authentication API Tutorial

Event Driven Architecture on AWS – Course for Beginners

OpenAI Assistants API – Course for Beginners

Python Data Analysis and Visualization Course – Astronomical Data

How to Get a Programming Job

UIs with Python – Use PyQt5 to Create a Music Player

Data Engineering Course for Beginners

NGINX Tutorial for Beginners

How to Add Email to Your Apps – Tutorial

Data Analyst Bootcamp for Beginners

Learn to Code with AI - ChatGPT Tutorial

Memcached Tutorial for Beginners

Full Stack React Developer Course with Appwrite

Learn JavaScript Interactively in NEW freeCodeCamp.org Curriculum

Remix and Strapi Crash Course – Full Stack Development

JavaScript Testing with Jest – Crash Course

Vector Search RAG Tutorial – Combine Your Data with LLMs with Advanced Search

Beginner JavaScript Project – Snake Game Tutorial

AWS Certified Cloud Practitioner Certification Course (CLF-C02) - Pass the Exam!

MLOps Course – Build Machine Learning Production Grade Projects

API Documentation Best Practices – Full Course

Go Programming Tutorial – 3 Beginner Projects

Master Technical Interviews – Full Course

PaLM 2 API Course – Build Generative AI Apps

Become a Great Engineering Manager – Course

Azure Solutions Architect Expert Certification Course (AZ 305) – Pass the Exam!

Arduino Course for Everybody

Create a Store with WordPress and AI Tutorial – Real AI-Generated Products