diff --git a/docs/index.json b/docs/index.json index 28f1d730..ec30663c 100644 --- a/docs/index.json +++ b/docs/index.json @@ -3,7 +3,7 @@ { "path": "use-cases", "label": "Use cases" }, { "path": "app-examples", "label": "App examples" }, { "path": "core-concepts", "label": "Core concepts" }, - { "path": "learn-nordcraft", "label": "Learn Nordcraft" }, + { "path": "video-tutorials", "label": "Video tutorials" }, { "path": "ai-assistant", "label": "AI Assistant" }, { "path": "get-started", diff --git a/docs/learn-nordcraft/index.md b/docs/learn-nordcraft/index.md deleted file mode 100644 index 87289e36..00000000 --- a/docs/learn-nordcraft/index.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Learn Nordcraft -description: Learn how to build with Nordcraft in a hands-on video series. Build along in real-time with our Head of Developer Education, Salma Alam-Naylor. ---- - -# Learn Nordcraft - -In the Learn Nordcraft video series, you'll build along in real-time with Nordcraft's Head of Developer Education, [Salma Alam-Naylor](https://whitep4nth3r.com), to explore and learn how to use Nordcraft. All lessons are all self-contained, and are aimed at helping you explore more advanced features and concepts as the series progresses. - -:::tip -View the [supporting materials for the video series on GitHub.](https://github.com/nordcraftengine/learn-nordcraft) -::: - -## Lesson 0: What is Nordcraft? - -Before we get building, get an overview of what Nordcraft is, who it’s for, and what you can build with Nordcraft. - -@@@ youtube -videoId: rbBwuc_M8Vc -title: What is Nordcraft? -@@@ - -## Lesson 1: Build a Linktree-style personal website - -In this lesson, you'll build a Linktree-style website for Rick Astley with two static pages. - -Learn about: - -- [Adding HTML elements](/the-editor/element-tree) -- [Creating components](/components/create-a-component) -- [Applying CSS using the style panel](/styling/styles-and-layout) -- [Creating pages](/pages/create-a-page) - -@@@ youtube -videoId: 3U0UVetAQNc -title: Build a Linktree-style personal website for Rick Astley -@@@ - -## Lesson 2: Build a Keanu Whoa! catalogue - -In this lesson, you'll build an application to fetch data from an API and render it on a page. You'll also learn how to create dynamic pages using dynamic URL path parameters to fetch specific data to render on the page. - -Learn about: - -- [Getting data from APIs](/connecting-data/working-with-apis) -- [Creating dynamic pages using data from an API](/pages/static-and-dynamic#dynamic-pages) -- [Using the repeat formula](/formulas/repeat-formula#repeat-formula) -- [Concatenating data](/references/formulas#concatenate) -- [Formatting dates](/references/formulas#format-date) - -@@@ youtube -videoId: ZhlM7Pw5Njg -title: Build a Keanu Whoa! catalog -@@@ - -## Lesson 3: Build a Pomodoro timer - -In this lesson, you'll build a Pomodoro timer to count down from 25 minutes, 5 minutes, or 15 minutes. You'll also set up a sound to play when the timer reaches 0. - -Learn about: - -- [Using variables to manage application state](/variables/overview) -- [Formulas](/formulas/overview) -- [Workflows](/workflows/overview) -- [Installing and using Nordcraft packages](/packages/overview) - -@@@ youtube -videoId: YhECT8QWk60 -title: Build a Pomodoro Timer -@@@ - -## Lesson 4: Build a multi-step form - -In this lesson, you'll build a multi-step form with validation, save form data to session storage, and POST it to an API when the form is complete. You'll also learn about using Supabase with Nordcraft. - -Learn about: - -- [Adding services](/connecting-data/services) -- [Nordcraft Supabase service](/connecting-data/services#supabase) -- [Configuring APIs to post data](/connecting-data/working-with-apis#configure-api-requests) -- [Using variables to manage application state](/variables/overview) -- [Saving to session storage](/references/actions#save-to-session-storage) -- [Reading from session storage](/references/formulas#get-from-session-storage) -- [Show/hide formula](/formulas/show-hide-formula#show-hide-formula) - -@@@ youtube -videoId: 5gWonN_51A4 -title: Build a multi-step form -@@@ - -## Lesson 5: Build a multi-language website - -In this lesson, you'll build a landing page with localized content from a CMS that supports multiple languages. - -Learn about: - -- [Adding services](/connecting-data/services) -- [GraphQL Explorer and GraphQL APIs](/connecting-data/working-with-apis#graphql-explorer) -- [Context](/contexts/overview#contexts) -- [Custom actions](/actions/overview#actions) - - -@@@ youtube -videoId: _R3qAbfkj_M -title: Build a multi-language website -@@@ diff --git a/docs/video-tutorials/beginner.webp b/docs/video-tutorials/beginner.webp new file mode 100644 index 00000000..c12f20cf Binary files /dev/null and b/docs/video-tutorials/beginner.webp differ diff --git a/docs/video-tutorials/experienced.webp b/docs/video-tutorials/experienced.webp new file mode 100644 index 00000000..ad58de60 Binary files /dev/null and b/docs/video-tutorials/experienced.webp differ diff --git a/docs/video-tutorials/index.md b/docs/video-tutorials/index.md new file mode 100644 index 00000000..5e6fb405 --- /dev/null +++ b/docs/video-tutorials/index.md @@ -0,0 +1,40 @@ +--- +title: Video tutorials +description: Learn how to build for The Web in Nordcraft. Build along in real-time with our Head of Developer Education, Salma Alam-Naylor. +--- + +# Video tutorials + +Learn how to build for The Web in Nordcraft. Choose from a range of courses depending on your experience level. + +All courses are presented by Salma Alam-Naylor, Nordcraft's Head of Developer Education, who is a qualified teacher with over 20 years experience of building for The Web. + +## Learn the Basics + +@@@ image-static +![A bright blue sky with a single bird flying in the distance over a shadowed rocky cliff face.|683/384](beginner.webp 'Beginner') +@@@ + +Learn HTML, CSS, and Nordcraft's approach to JavaScript-based interactivity so you can bring your ideas to life on The Web. + +[Watch beginner course](https://nordcraft.com/learn/fundamentals) + +## Build Projects + +@@@ image-static +![A hazy orange sky over a shadowed dark brown sand dune.|683/384](intermediate.webp 'Intermediate') +@@@ + +Know the basics of HTML and CSS? Level-up your web development skills by building real-world projects in Nordcraft. + +[Watch intermediate course](https://nordcraft.com/learn/build-projects) + +## Speed Run + +@@@ image-static +![A polar blue sky over a bright white glacier.|683/384](experienced.webp 'Experienced') +@@@ + +Familiar with other frameworks? Get up to speed on how HTML, CSS and JavaScript concepts translate to the Nordcraft editor. + +[Watch intermediate course](https://nordcraft.com/learn/speed-run) diff --git a/docs/video-tutorials/intermediate.webp b/docs/video-tutorials/intermediate.webp new file mode 100644 index 00000000..1340abb4 Binary files /dev/null and b/docs/video-tutorials/intermediate.webp differ