Prismic | SvelteKit 1.0 Crash Course - Full Tutorial with Prismic @Prismic | Uploaded December 2022 | Updated October 2024, 2 hours ago.
🎉 NEW 🎉 We published an updated full tutorial for SvelteKit and Prismic, watch it here: youtu.be/QKxJW6VVp6w
Learn the fastest-growing web development framework, SvelteKit. Build a blazing fast website with SvelteKit’s latest release, version 1.0.
This SvelteKit 1.0 tutorial will cover:
- Dynamic Routing
- Data Fetching
- Layouts
- Component Architecture
- Project Structure
- Class Shorthands
- Style Shorthands
- Using Prismic as a CMS (Content Management System)
🔗 Pico CSS: picocss.com
🔗 Content Modeling in Prismic: prismic.io/docs/technologies/legacy-builder
🔗 Project Code: stackblitz.com/edit/node-tusixw?file=src
🔗 Prismic Community Forum: community.prismic.io
🔗 Prismic Svelte Documentation: prismic.io/docs/technologies/svelte
🔗 Sam's Twitter: twitter.com/samlfair
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
Chapters:
📍 00:00 Introduction
📍 01:02 Setup with SvelteKit Skeleton project
📍 02:40 Project file structure
📍 03:48 npm run dev
📍 04:14 Layout and styling
📍 07:53 Content management - Prismic Repository
📍 10:22 Data fetching
📍 15:17 Homepage
📍 18:56 Component directory
📍 22:40 Styled heading
📍 24:45 Rich text
📍 27:49 Class shorthand
📍 29:46 Subheading
📍 31:12 Bullet list
📍 32:12 Each block
📍 33:02 Text markup
📍 35:09 Style shorthand
📍 36:28 Images
📍 39:28 Dynamic routing
📍 42:55 Navigation menu
📍 44:28 Conclusion
--
#sveltekit #prismic
🎉 NEW 🎉 We published an updated full tutorial for SvelteKit and Prismic, watch it here: youtu.be/QKxJW6VVp6w
Learn the fastest-growing web development framework, SvelteKit. Build a blazing fast website with SvelteKit’s latest release, version 1.0.
This SvelteKit 1.0 tutorial will cover:
- Dynamic Routing
- Data Fetching
- Layouts
- Component Architecture
- Project Structure
- Class Shorthands
- Style Shorthands
- Using Prismic as a CMS (Content Management System)
🔗 Pico CSS: picocss.com
🔗 Content Modeling in Prismic: prismic.io/docs/technologies/legacy-builder
🔗 Project Code: stackblitz.com/edit/node-tusixw?file=src
🔗 Prismic Community Forum: community.prismic.io
🔗 Prismic Svelte Documentation: prismic.io/docs/technologies/svelte
🔗 Sam's Twitter: twitter.com/samlfair
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
Chapters:
📍 00:00 Introduction
📍 01:02 Setup with SvelteKit Skeleton project
📍 02:40 Project file structure
📍 03:48 npm run dev
📍 04:14 Layout and styling
📍 07:53 Content management - Prismic Repository
📍 10:22 Data fetching
📍 15:17 Homepage
📍 18:56 Component directory
📍 22:40 Styled heading
📍 24:45 Rich text
📍 27:49 Class shorthand
📍 29:46 Subheading
📍 31:12 Bullet list
📍 32:12 Each block
📍 33:02 Text markup
📍 35:09 Style shorthand
📍 36:28 Images
📍 39:28 Dynamic routing
📍 42:55 Navigation menu
📍 44:28 Conclusion
--
#sveltekit #prismic
