In this tutorial for beginners, you will learn how to develop a full-stack web application entirely in your browser using Gitpod (https://www.gitpod.io/). You will build the app with Svelte and Postgres. From creating a new repository to deploying to production, we will write and discuss every line of code.
✏️ Course developed by Mike Nikles. Mike on Twitter: https://twitter.com/mikenikles.
📝 Code: https://github.com/gitpod-io/full-stack-web-development
Pull requests are available for each section of the course.
💻 The technology stack for this course includes:
💿 Svelte (https://svelte.dev/)
💿 SvelteKit (https://kit.svelte.dev/)
💿 Prisma (https://www.prisma.io/)
💿 Postgres (https://www.postgresql.org/)
💿 Vercel (https://vercel.com/)
💿 Railway (https://railway.app/)
🎉 This course was made possible through a grant from GitPod.
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:08:51) What you will learn
⌨️ (0:12:07) Gitpod developer environment
⌨️ (0:13:33) Project Overview: A todo app
⌨️ (0:16:33) Architecture
⌨️ (0:20:39) Initialize the application
⌨️ (0:40:12) Intro to SvelteKit
⌨️ (0:55:31) Configure Gitpod
⌨️ (1:32:07) Develop HTML structure
⌨️ (1:53:46) Apply CSS styles
⌨️ (2:44:32) Develop CRUD endpoints: GET and POST
⌨️ (3:31:54) DELETE
⌨️ (4:16:45) PATCH – Edit Text
⌨️ (4:33:22) PATCH – Mark as Done
⌨️ (4:48:41) Enhance HTML forms
⌨️ (5:40:56) Install & start the dev database
⌨️ (5:50:33) Use Prisma ORM
⌨️ (6:26:32) Update API to use Prisma
⌨️ (6:47:58) Deploy Database on Railway
⌨️ (7:03:33) Deploy web app & API on Vercel
⌨️ (7:12:28) Project review
⌨️ (7:16:14) What’s next?
⌨️ (7:19:22) Wrap up
Closed captions for this video were provided by Primsa. You can get free captions for your own videos that feature Prisma here: https://pris.ly/closedcaptions
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
source
The Strong Testimonials plugin allows you to collect and display testimonials or reviews on your…
From an AI-fueled stock rally to record-high gold, the signs are stacking up that nearly…
🔥 Gemini 3 全面升級！為什麼大家都說它是目前最強的 AI 模型？ 这支视频用 8 個最貼近生活和工作的真實場景，帶你一次看懂： ⚡ 長文總結、英文郵件、績效自評一次搞定 📊 自動整理筆記 → 變成代辦清單…
Gen AI Foundation AI Masterclass : https://studyiq.u9ilnk.me/d/AfqxvqM1zB Clear UPSC with StudyIQ’s Courses : https://studyiq.u9ilnk.me/d/Lgsok33byQ Call…
Do you want to create a powerful form with multiple columns? Let me show you…
The AI infrastructure buildout is only just getting started — and the data center story…