Vue Masterclass (Covers Vue 2 and 3)

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Overview

Lecture 2: Introducing our Project (Careers Site)

Lecture 3: BONUS: Vue 2 vs. Vue 3

Lecture 4: BONUS: Vue vs. React vs. Angular

Lecture 5: Technical Requirements

Lecture 6: Install Google Chrome

Lecture 7: Install Git

Lecture 8: Node Setup for macOS Users

Lecture 9: Install Node

Lecture 10: Install VSCode

Lecture 11: Install VSCode Extensions

Lecture 12: Asking Good Questions

Chapter 2: Intro to Vue

Lecture 1: Use Create Vue to Initialize Vue Project

Lecture 2: Configuring the App: VSCode

Lecture 3: Configuring the App: ESLint

Lecture 4: Hot Reloading

Lecture 5: Project Structure

Lecture 6: Mounting the Vue App

Lecture 7: The @ Symbol for src Directory

Lecture 8: The Parts of a Vue File

Lecture 9: Cleanup, Cleanup

Lecture 10: More on Components

Lecture 11: Install Dev Tools

Lecture 12: Section Review [SLIDES]

Lecture 13: Code at End of Section 2

Chapter 3: Intro to CSS in Vue

Lecture 1: Targeting by HTML Element or CSS Class

Lecture 2: The scoped Attribute

Lecture 3: A Little Housekeeping

Lecture 4: Section Review [SLIDES]

Lecture 5: Code at End of Section 3

Chapter 4: Intro to Tailwind CSS

Lecture 1: Introduction to Tailwind CSS

Lecture 2: Add Tailwind CSS to Project

Lecture 3: BONUS: ES6 Spread Syntax for Arrays

Lecture 4: Add Open Sans Font to Project

Lecture 5: Try Out Tailwind Styles in App.vue

Lecture 6: Install Tailwind CSS IntelliSense Extension

Lecture 7: Install Prettier Plugin for Tailwind

Lecture 8: Section Review [SLIDES]

Lecture 9: Code at End of Section 4

Chapter 5: Rendering Data to View

Lecture 1: User Story

Lecture 2: Creating the MainNav Component

Lecture 3: Rendering Child Component with the components Property

Lecture 4: Different Ways to Render a Component

Lecture 5: Update Tailwind Styles

Lecture 6: CSS: Styling the MainNav Component

Lecture 7: BONUS: JavaScript Objects, Properties, and Methods

Lecture 8: Rendering Data to View I

Lecture 9: Rendering Data to View II: Multiple Data Properties

Lecture 10: Section Review [SLIDES]

Lecture 11: Code at End of Section 5

Chapter 6: Intro to Vitest

Lecture 1: Intro to Testing

Lecture 2: Quick Fix for Testing Issues

Lecture 3: The Basics of Vitest Syntax

Lecture 4: Multiple Describe Blocks

Lecture 5: Intro to Test-Driven Development (TDD)

Lecture 6: Test-Driven Development In Action

Lecture 7: Adding the —coverage Flag

Lecture 8: Setup Vitest Globals

Lecture 9: Quick Cleanup

Lecture 10: Section Review [SLIDES]

Lecture 11: Code at End of Section 6

Chapter 7: First Vue Tests

Lecture 1: Cleaning up App.vue

Lecture 2: Fixes for Next Lesson

Lecture 3: Setup Vue Testing Library

Lecture 4: The render Function and screen Object

Lecture 5: Our First Component Assertion

Lecture 6: The Second Argument to render Function

Lecture 7: Section Review [SLIDES]

Lecture 8: Code at End of Section 7

Chapter 8: Directives I

Lecture 1: The v-bind Directive I

Lecture 2: The v-bind Directive II: Shortcut

Lecture 3: CSS: Styling Navigation Items

Lecture 4: The v-for Directive

Lecture 5: The :key Attribute

Lecture 6: Using Tailwind's First Child Utility Class

Lecture 7: Review: The ES6 map Method on an Array

Lecture 8: ARIA Roles [SLIDES]

Lecture 9: Testing the v-for Directive

Lecture 10: Install Testing Playground Extension

Lecture 11: Section Review [SLIDES]

Lecture 12: Code at End of Section 8

Chapter 9: Directives II

Lecture 1: User Story

Lecture 2: Create ActionButton Component

Lecture 3: CSS: Styling ActionButton

Lecture 4: Add Custom Box Shadow to ActionButton

Lecture 5: Create ProfileImage Component

Lecture 6: Conditional Rendering with the v-if Directive

Lecture 7: The v-else Directive

Lecture 8: Adding Methods to Vue Component

Lecture 9: The v-on Directive I: HTML Element

Lecture 10: The v-on Directive II: Shortcut