Svelte & Wordpress Full Stack Course

Become a Full Stack developer with Svelte, SvelteKit, WordPress and Vercel

What you'll learn

Develop a complete project in Svelte

Create an API in WordPress

Learn tips for Svelte, SvelteKit, WordPress, JavaScript, HTML and CSS

Document coding steps on GitHub

Host an app on Vercel and configure environment variables

Requirements

Use a computer/device with internet access

Having basic knowledge of HTML, CSS and JavaScript is interesting, but not mandatory

Description

In this course, you will learn how to use Svelte and WordPress to become a full stack developer. We'll code together a user interface with Svelte, that will have a form to get the user input and send to our WordPress custom post type "Quote". Depending on the event, notifications will pop up on the screen if the quote was successfully sent, if fields are missing, if the user has already submitted recently, and if the database is offline.Svelte changed my life! Now I develop sites and apps having fun, because of how easy, simple and fast it is to code with Svelte. I'm so sorry React, Vue and Angular, but Svelte came to stay, and it's a complete game changer. If you want to become a full stack developer, learn the Svelte framework or understand how to develop complex APIs on WordPress, this course is for you. To honor your time, the lessons are extremely edited. Each video was planned with a defined objective, and I've added code snippets so you may easily add the code to the lesson and prevent you from seeing me making typing mistakes. So, are you ready to be mind blown by this new framework and stack? See you soon!

Overview

Section 1: Initial configuration

Lecture 1 What we are coding with

Lecture 2 What we are coding together

Lecture 3 Create a project

Lecture 4 Assets & snippets

Lecture 5 Components

Lecture 6 Global styles

Lecture 7 GitHub

Section 2: Project

Lecture 8 CSS variables

Lecture 9 CSS reset & global classes

Lecture 10

Lecture 11 Style scope

Lecture 12 Header

Lecture 13 Icons

Lecture 14 Intro

Lecture 15 Footer

Lecture 16 Slider

Lecture 17 Slide

Lecture 18 Stores

Lecture 19 Logic blocks

Lecture 20 Component variables

Lecture 21 Quote

Lecture 22 Form store

Lecture 23 bind:value

Lecture 24 on:blur

Lecture 25 bind:this & on:submit

Lecture 26 Modifiers

Lecture 27 tick

Lecture 28 New pages

Section 3: API

Lecture 29 Local

Lecture 30 Theme

Lecture 31 Security

Lecture 32 Disable Gutenberg

Lecture 33 Custom endpoints

Lecture 34 Advanced Custom Fields

Lecture 35 FakerPress

Lecture 36 WP_Error

Lecture 37 Endpoint: Projects

Lecture 38 Endpoint: Project

Lecture 39 wpautop()

Lecture 40 ACF: get_field()

Lecture 41 Endpoint: Page

Lecture 42 Custom Post Type

Lecture 43 Endpoint: Quotes

Lecture 44 Thunder Client

Lecture 45 wp_insert_post()

Lecture 46 $request

Lecture 47 Sanitizing data

Lecture 48 Update custom fields (ACF)

Lecture 49 Custom fields read-only (ACF)

Lecture 50 Send email

Lecture 51 Extra: AI

Section 4: Project & API

Lecture 52 Fetch

Lecture 53 .env

Lecture 54 Portfolio

Lecture 55 API down

Lecture 56 Project link structure

Lecture 57 [slug]

Lecture 58 Fetch project

Lecture 59 @html

Lecture 60 +error

Lecture 61 API +error

Lecture 62 Customize error

Lecture 63 Pages

Lecture 64 Projects page

Lecture 65 Request a quote

Lecture 66 Quote creation

Lecture 67 Toast

Lecture 68 Failed to fetch

Lecture 69 Current page

Lecture 70 Mobile optimization

Lecture 71 SEO

Lecture 72 Favicon

Lecture 73 Input mask

Lecture 74 Fontsource

Lecture 75 Hosting: WordPress

Lecture 76 Hosting: Vercel

Lecture 77 Thank you

Developers who want to learn how to create an app in Svelte, pulling information from a WordPress API