Vue Masterclass (Covers Vue 2 and 3)
Learn VueJS and build a complete real-world project using Vue, Pinia, TypeScript, TailwindCSS, Vitest, and more.
Certificado oficial emitido por la SEPA través del Gobierno del Estado de México
12 meses de acceso
En línea · 60 h
37 unidades
Nivel principiante
Qué aprenderás
Lo que serás capaz de hacer
Welcome to the most comprehensive Vue course on Udemy ! The Vue Masterclass introduces you to the powerful VueJS library for building dynamic, reactive front end interfaces . VueJS has taken the web development community by storm and is a fantastic technology to learn in 2023: Vue has been used to built over 1,000,000 websites Vue has over 200,000 stars on GitHub Vue downloads on NPM have doubled year-over-year Vue is used by leading tech companies like Netflix, Apple, GitLab, and Nintendo. The best way to learn a technology is to create something with it . That's why the Vue Masterclass consists of a complete real-world project that we'll build together from scratch. I'll be coding alongside you from the very first line of code. I believe this course is the closest I've come to capturing what it feels like to be a Vue developer on the job. We'll introduce and complete user stories, discuss tradeoffs of different technical approaches, summarize what we've learned at the end of each section, and more. No prior experience with Vue (or any other front end library) is needed. Beginners are welcome! The course starts with Vue basics and progresses to advanced Vue concepts including: Creating Vue components Styling Vue components Using Vue directives to compose dynamic interfaces Passing props between components Emitting events Routing our user from page to page Testing Vue components and more! Throughout 50+ hours of video content , we'll cover numerous aspects of the Vue ecosystem including: Vue (including both the Options API from Vue 2 and the new Composition API in Vue 3) Pinia for global state management Vue Router for navigating the user across pages in our application Testing with Vue Testing Library and Vitest Scaffolding Vue applications with Create Vue Styling components with Tailwind CSS Adding type checking with TypeScript Linting our code with ESLint Formatting our code with Prettier and more! Another aspect that makes the course special is its emphasis on testing . We'll discuss how to unit test our Vue applications using the Vitest and Vue Testing Library packages. We'll also walk through various testing methodologies, including test-driven development (TDD) . Vue Masterclass offers you an incredible, comprehensive introduction to the powerful Vue library. I'm super excited to build this project together with you and I can't wait to see you in the course!
- Build a complete, real-world Vue application using Vue, Pinia, Vue Router, and more
- Master modern front end technologies like TailwindCSS, TypeScript, and Prettier
- Use Vitest and Vue Testing Libary to write unit tests for all elements of the Vue ecosystem
- Learn best practices for Vue component design
- Covers both Vue 2's Options API and Vue 3's Composition API
Temario
UNIDAD 1 - Introduction · 12 leccionesUNIDAD 1 - Introduction
UNIDAD 1 - Introduction · 12 lecciones
UNIDAD 1 - Introduction
- Course Overview
- Introducing our Project (Careers Site)
- BONUS: Vue 2 vs. Vue 3
- BONUS: Vue vs. React vs. Angular
- Technical Requirements
- Install Google Chrome
- Install Git
- Node Setup for macOS Users
- Install Node
- Install VSCode
- Install VSCode Extensions
- Asking Good Questions
UNIDAD 2 - Intro to Vue · 13 leccionesUNIDAD 2 - Intro to Vue
UNIDAD 2 - Intro to Vue · 13 lecciones
UNIDAD 2 - Intro to Vue
- Use Create Vue to Initialize Vue Project
- Configuring the App: VSCode
- Configuring the App: ESLint
- Hot Reloading
- Project Structure
- Mounting the Vue App
- The @ Symbol for src Directory
- The Parts of a Vue File
- Cleanup, Cleanup
- More on Components
- Install Dev Tools
- Section Review [SLIDES]
- Code at End of Section 2
UNIDAD 3 - Intro to CSS in Vue · 5 leccionesUNIDAD 3 - Intro to CSS in Vue
UNIDAD 3 - Intro to CSS in Vue · 5 lecciones
UNIDAD 3 - Intro to CSS in Vue
- Targeting by HTML Element or CSS Class
- The scoped Attribute
- A Little Housekeeping
- Section Review [SLIDES]
- Code at End of Section 3
UNIDAD 4 - Intro to Tailwind CSS · 9 leccionesUNIDAD 4 - Intro to Tailwind CSS
UNIDAD 4 - Intro to Tailwind CSS · 9 lecciones
UNIDAD 4 - Intro to Tailwind CSS
- Introduction to Tailwind CSS
- Add Tailwind CSS to Project
- BONUS: ES6 Spread Syntax for Arrays
- Add Open Sans Font to Project
- Try Out Tailwind Styles in App.vue
- Install Tailwind CSS IntelliSense Extension
- Install Prettier Plugin for Tailwind
- Section Review [SLIDES]
- Code at End of Section 4
UNIDAD 5 - Rendering Data to View · 11 leccionesUNIDAD 5 - Rendering Data to View
UNIDAD 5 - Rendering Data to View · 11 lecciones
UNIDAD 5 - Rendering Data to View
- User Story
- Creating the MainNav Component
- Rendering Child Component with the components Property
- Different Ways to Render a Component
- Update Tailwind Styles
- CSS: Styling the MainNav Component
- BONUS: JavaScript Objects, Properties, and Methods
- Rendering Data to View I
- Rendering Data to View II: Multiple Data Properties
- Section Review [SLIDES]
- Code at End of Section 5
UNIDAD 6 - Intro to Vitest · 11 leccionesUNIDAD 6 - Intro to Vitest
UNIDAD 6 - Intro to Vitest · 11 lecciones
UNIDAD 6 - Intro to Vitest
- Intro to Testing
- Quick Fix for Testing Issues
- The Basics of Vitest Syntax
- Multiple Describe Blocks
- Intro to Test-Driven Development (TDD)
- Test-Driven Development In Action
- Adding the —coverage Flag
- Setup Vitest Globals
- Quick Cleanup
- Section Review [SLIDES]
- Code at End of Section 6
UNIDAD 7 - First Vue Tests · 8 leccionesUNIDAD 7 - First Vue Tests
UNIDAD 7 - First Vue Tests · 8 lecciones
UNIDAD 7 - First Vue Tests
- Cleaning up App.vue
- Fixes for Next Lesson
- Setup Vue Testing Library
- The render Function and screen Object
- Our First Component Assertion
- The Second Argument to render Function
- Section Review [SLIDES]
- Code at End of Section 7
UNIDAD 8 - Directives I · 12 leccionesUNIDAD 8 - Directives I
UNIDAD 8 - Directives I · 12 lecciones
UNIDAD 8 - Directives I
- The v-bind Directive I
- The v-bind Directive II: Shortcut
- CSS: Styling Navigation Items
- The v-for Directive
- The :key Attribute
- Using Tailwind's First Child Utility Class
- Review: The ES6 map Method on an Array
- ARIA Roles [SLIDES]
- Testing the v-for Directive
- Install Testing Playground Extension
- Section Review [SLIDES]
- Code at End of Section 8
UNIDAD 9 - Directives II · 16 leccionesUNIDAD 9 - Directives II
UNIDAD 9 - Directives II · 16 lecciones
UNIDAD 9 - Directives II
- User Story
- Create ActionButton Component
- CSS: Styling ActionButton
- Add Custom Box Shadow to ActionButton
- Create ProfileImage Component
- Conditional Rendering with the v-if Directive
- The v-else Directive
- Adding Methods to Vue Component
- The v-on Directive I: HTML Element
- The v-on Directive II: Shortcut
- The Event Object
- Overwriting Component Data in a Method
- The queryBy Methods from Vue Testing Library
- The userEvent Library
- Section Review [SLIDES]
- Code at End of Section 9
UNIDAD 10 - Passing Props · 19 leccionesUNIDAD 10 - Passing Props
UNIDAD 10 - Passing Props · 19 lecciones
UNIDAD 10 - Passing Props
- User Story: Multiple Buttons
- Independent Components
- Intro to Props
- The Tailwind @apply Directive
- Adding v-bind to class Attribute
- Adding Slice of Data for Dynamic Class
- Intro to Computed Properties
- Computed Properties for Class Object
- Adding New Blue Color to Tailwind Config
- Adding Secondary Button Style
- Passing in Props for Style
- Adding a type Prop
- BONUS: ES6 Review: Dynamic Object Keys
- Refactoring the type Prop
- Testing CSS Classes
- Updating Prop Validation in ActionButton
- Custom Prop Validation with the validator Function
- Section Review [SLIDES]
- Code at End of Section 10
UNIDAD 11 - Creating Subnav · 12 leccionesUNIDAD 11 - Creating Subnav
UNIDAD 11 - Creating Subnav · 12 lecciones
UNIDAD 11 - Creating Subnav
- User Story: Subnav
- Create TheSubnav Component
- Styling TheSubnav Component
- Install FontAwesome
- Register Global Components
- Use FontAwesome Icon in TheSubnav
- Conditionally Render TheSubnav
- Using TDD for v-if Directive for Jobs Page
- Fixing Test Warnings in TheSubnav and MainNav
- Using Helper Function in MainNav Test
- Section Review [SLIDES]
- Code at End of Section 11
UNIDAD 12 - Create Headline Component · 25 leccionesUNIDAD 12 - Create Headline Component
UNIDAD 12 - Create Headline Component · 25 lecciones
UNIDAD 12 - Create Headline Component
- User Story
- Create TheHero.vue Component
- Dynamically Adjust Height of Header
- CSS: Style TheHero Component
- Introducing CSS Grid
- Apply CSS Grid to TheHero
- Introduction to Vue Lifecycle Hooks - Lifecycle Methods
- REVIEW: The setTimeout, setInterval and clearInterval Functions
- Using the created Lifecycle Hook
- Changing the Action Verb in TheHeadline
- CSS: Style Action Verb
- CSS: Fix Styles of Primary Header
- CSS: Fix Styles of Secondary Header
- Refactor Font Color Class Selection
- Microphone Update
- Moving Interval Function Logic Out of Component
- Adding Function to Headline Component
- Intro to vi.fn() Function
- Tests for TheHeadline Component
- More Tests for TheHeadline Component
- Fixing Error in Next Lesson
- Even More Tests for TheHeadline Component
- The beforeEach and afterEach Functions
- Section Review [SLIDES]
- Code at End of Section 12
UNIDAD 13 - Creating Job Search Form · 16 leccionesUNIDAD 13 - Creating Job Search Form
UNIDAD 13 - Creating Job Search Form · 16 lecciones
UNIDAD 13 - Creating Job Search Form
- User Story
- Add New Colors to tailwind.config.js
- Create JobSearchForm Component
- Add Bottom Margin to TheHeadline
- CSS: Styling JobSearchForm I
- CSS: Styling JobSearchForm II
- Binding Component Data to Form Input
- Binding Form Input to Component Data
- Two-Way Data Binding with v-model Directive
- Image Link for Next Lesson
- Add Vue Image in Grid
- Refactor I: Isolating Navigation Components
- Refactor II: Isolating JobSearch Components
- Refactor III: Isolating Shared Components
- Section Review [SLIDES]
- Code at End of Section 13
UNIDAD 14 - Emitting Events · 12 leccionesUNIDAD 14 - Emitting Events
UNIDAD 14 - Emitting Events · 12 lecciones
UNIDAD 14 - Emitting Events
- Creating Reusable TextInput Component
- Using TextInput in JobSearchForm
- Emitting an Event from a Component
- Listing to Emitted Messages
- Overwriting Parent Data from Emits
- Inline Overwriting
- Improving Our Design
- The v-model Directive on Component
- The emits Key
- Testing Event Emission
- Section Review [SLIDES]
- Code at End of Section 14
UNIDAD 15 - Vue Router I · 14 leccionesUNIDAD 15 - Vue Router I
UNIDAD 15 - Vue Router I · 14 lecciones
UNIDAD 15 - Vue Router I
- User Story
- Install Vue Router
- Writing the Router File
- The router-view Component
- The router-link Component
- Keep MainNav Constant, Dynamically Render Component
- Adding Content to Home Page
- Accessing this.$route
- Accessing this.$router
- Navigating with router.push Method
- Adding a <router-link> Item to MainNav
- Fixing Warnings with the RouterLinkStub Component
- Section Review
- Code at End of Section 15
UNIDAD 16 - Vue Router II · 12 leccionesUNIDAD 16 - Vue Router II
UNIDAD 16 - Vue Router II · 12 lecciones
UNIDAD 16 - Vue Router II
- User Story
- Adding <router-link> to Main Menu
- The mocks Property for render Function Config
- Fixing MainNav Tests
- Using Factory Functions for TheSubnav Tests
- Creating Page for Individual Job
- Display the Route ID Dynamically
- BONUS: Review: Query Params
- Navigating to Job Results Page when Submitting Form
- Testing JobSearchForm Form Submission
- Section Review [SLIDES]
- Code at End of Section 16
UNIDAD 17 - Building Job Results Page · 10 leccionesUNIDAD 17 - Building Job Results Page
UNIDAD 17 - Building Job Results Page · 10 lecciones
UNIDAD 17 - Building Job Results Page
- User Story
- Create JobFiltersSidebar Component
- Create JobListings Component
- CSS: Styling JobFiltersSidebar and JobListings Components
- Extend Tailwind with New Boxshadow Option
- CSS: Adding Job Title and Location to a Job Listing
- CSS: Adding Job Qualifications to Job Listing
- Extracting JobListing to Separate Component
- Section Review [SLIDES]
- Code at End of Section 17
UNIDAD 18 - Creating Mock Backend · 17 leccionesUNIDAD 18 - Creating Mock Backend
UNIDAD 18 - Creating Mock Backend · 17 lecciones
UNIDAD 18 - Creating Mock Backend
- Install JSON Server
- Create Our Jobs Data
- Making Jobs Request in Browser
- Install Axios NPM Package
- Making Axios Request for Jobs in JobListings Component
- REVIEW: async/await Syntax
- Use async/await Syntax to Fetch Jobs
- Render JobListing in JobResults
- Compute Dynamic Job Page
- Update Job Listing to Render Job’s Data
- Testing the JobListing Component
- Refactoring JobListings Test
- More Tests for JobListing Component
- Mocking a Module with Vitest
- Create First Tests for JobListings Component
- Section Review [SLIDES]
- Code at End of Section 18
UNIDAD 19 - Dynamic Pagination · 17 leccionesUNIDAD 19 - Dynamic Pagination
UNIDAD 19 - Dynamic Pagination · 17 lecciones
UNIDAD 19 - Dynamic Pagination
- User Story
- REVIEW: The slice Method
- Display only the First 10 Jobs
- Dynamic Pagination
- Fixing Failing JobListings Component Tests
- Refactor JobListings Component Tests
- Displaying Page Number at Bottom of Job Listings
- Wiring Up Computed Properties for Next and Previous Page
- Rendering the Previous and Next Page
- Scrolling to Top on Params Change
- Adding Tests for Page Number
- More Tests for JobListings Component
- Fixing the Bug
- Adding More Tests for JobListings Component
- Environment Variables in Vite
- Section Review [SLIDES]
- Code at End of Section 19
UNIDAD 20 - Pinia I: State and Actions · 15 leccionesUNIDAD 20 - Pinia I: State and Actions
UNIDAD 20 - Pinia I: State and Actions · 15 lecciones
UNIDAD 20 - Pinia I: State and Actions
- What is Pinia?
- Install Pinia Dependency
- Register Pinia Store
- Creating a Pinia Store
- Add First Store Action
- Adding Tests for Pinia State and Actions
- Reading from Pinia Store in Component with mapStores Function
- Writing to Pinia Store in Component
- Interacting with Pinia Store in Dev Tools
- Install Pinia Testing Library
- Fixing our Failing MainNav Tests
- A Second Testing Option
- The mapState and mapActions Functions
- Section Review [SLIDES]
- Code at End of Section 20
UNIDAD 21 - Pinia II · 10 leccionesUNIDAD 21 - Pinia II
UNIDAD 21 - Pinia II · 10 lecciones
UNIDAD 21 - Pinia II
- Intro to the Section
- Review of vi.mock and Building out API Call
- TDD: Adding Test for Jobs API Call I
- TDD: Adding Test for Jobs API Call II
- TDD: Adding Test for jobs State
- TDD: FETCH_JOBS Action
- Dispatching Action from Component to Fetch Jobs
- Fixing Tests for JobListings Component
- Section Review [SLIDES]
- Code at End of Section 21
UNIDAD 22 - Slots I · 15 leccionesUNIDAD 22 - Slots I
UNIDAD 22 - Slots I · 15 lecciones
UNIDAD 22 - Slots I
- User Story
- CSS: Adding Initial Styles for JobFiltersSidebar Component
- Update Font Awesome Icons
- Create CollapsibleAccordion Component
- CSS: Styling CollapsibleAccordion Component
- Introduction to Slots
- Render Custom Content in Slot
- Slots and Props
- Writing Test for Slots
- Fallback Content for Slots
- Adding Tests for Fallback Slot Content
- The Usual Refactor
- Extracting Organizations Accordion to New Component
- Section Review [SLIDES]
- Code at End of Section 22
UNIDAD 23 - Slots II: Named Slots · 9 leccionesUNIDAD 23 - Slots II: Named Slots
UNIDAD 23 - Slots II: Named Slots · 9 lecciones
UNIDAD 23 - Slots II: Named Slots
- User Story: Building a Reusable Header
- Named Slots I
- Creating TeamsView Page
- Named Slots II
- Default Slot
- Testing Named Slots
- Named Slots Shorthand
- Section Review [SLIDES]
- Code at End of Section 23
UNIDAD 24 - Slots III: Advanced Slots · 12 leccionesUNIDAD 24 - Slots III: Advanced Slots
UNIDAD 24 - Slots III: Advanced Slots · 12 lecciones
UNIDAD 24 - Slots III: Advanced Slots
- User Story
- JSON Content for db.json File
- Adding spotlights Endpoint
- Create SpotLight Component
- Render SpotLight Component
- Alternative Render of Data
- Passing Multiple Props from Scoped Slot
- Object Destructuring with Scoped Slots
- Testing Scoped Slots
- Refactoring Test Suite
- Section Review [SLIDES]
- Code at End of Section 24
UNIDAD 25 - Pinia III: Getters · 21 leccionesUNIDAD 25 - Pinia III: Getters
UNIDAD 25 - Pinia III: Getters · 21 lecciones
UNIDAD 25 - Pinia III: Getters
- User Story
- Review of JavaScript Sets
- Intro to Getters
- Testing Pinia Getters
- Wire Up UNIQUE_ORGANIZATIONS Getter in JobFiltersSidebarOrganizations
- Use v-for to Render Unique Organizations in JobFiltersSidebarOrganizations
- Testing Getters in JobFiltersSidebarOrganizations
- Add v-model to Checkbox for Organizations
- The v-on:change Handler
- TDD: Add selectedOrganizations Property to Pinia Store State
- TDD: Create ADD_SELECTED_ORGANIZATIONS Action
- Dispatch Action to Add Organizations from JobFiltersSidebarOrganizations
- BONUS: REVIEW: filter Method on an Array
- TDD: Adding Getter to Filter Jobs by Organization
- Rendering Filtered Organization Jobs in JobListings Component
- Fixing FILTERED_JOBS_BY_ORGANIZATIONS Getter Bug
- Adding Test for JobFiltersSidebarOrganizations Checkbox Interaction
- Refactoring JobFiltersSidebarOrganizations Test
- Displaying Accurate Number of Filtered Jobs
- Section Review [SLIDES]
- Code at End of Section 25
UNIDAD 26 - Pinia IV: More Practice · 19 leccionesUNIDAD 26 - Pinia IV: More Practice
UNIDAD 26 - Pinia IV: More Practice · 19 lecciones
UNIDAD 26 - Pinia IV: More Practice
- User Story
- TDD: Adding State for Job Types
- TDD: Adding Action for Selecting Job Types
- TDD: Adding Getter for Unique Job Types
- TDD: Adding Getter for Filtered Jobs by Job Types
- TDD: New JobFiltersSidebarJobTypes Component
- Wire up Job Type Filters in Sidebar
- Filter for Job Types in Job Listings
- Allow User to Apply Multiple Filters
- Use New Getter in JobListings Component
- Fixing New Bug
- Getters with Arguments
- Tests for Getters with Arguments
- TDD: Updating TheSubnav Tests and Implementation
- Delete Old Two Getters
- Fixing Extra Bug I
- Fixing Extra Bug II
- Section Review [SLIDES]
- Code at End of Section 26
UNIDAD 27 - Reactivity in Vue 3 · 14 leccionesUNIDAD 27 - Reactivity in Vue 3
UNIDAD 27 - Reactivity in Vue 3 · 14 lecciones
UNIDAD 27 - Reactivity in Vue 3
- What is reactivity?
- Vue’s ref Function
- Vue’s computed Function
- One More Example with Another Primitive
- What about Object Reactivity?
- Cleaning up the Code with reactive Function
- Multiple Properties on Reactive Object
- Multiple Levels of Reactivity
- Destructuring Problems
- The toRef Function
- The toRefs Function
- A Clarification on toRefs
- Section Review [SLIDES]
- Code at End of Section 27
UNIDAD 28 - Composition API I · 13 leccionesUNIDAD 28 - Composition API I
UNIDAD 28 - Composition API I · 13 lecciones
UNIDAD 28 - Composition API I
- Introduction to the Composition API
- The setup Method
- The ref Function in setup Method
- More Practice with ref
- The computed Function
- Accepting Props in Component
- Checking in on Test Suite
- Accepting Props in Setup Method
- Using toRefs on Props
- The new script setup Syntax
- More Practice with the script setup Syntax
- Section Review [SLIDES]
- Code at End of Section 28
UNIDAD 29 - Composition API II · 15 leccionesUNIDAD 29 - Composition API II
UNIDAD 29 - Composition API II · 15 lecciones
UNIDAD 29 - Composition API II
- Composition API with Vue Router
- Fixing Failing JobSearchForm Tests
- Composition API with Route
- Composition API with Pinia Getters
- Fixing Failing Tests for TheSubnav
- Fixing Failing Tests for MainNav
- Refactoring JobFiltersSidebarJobTypes
- Fixing JobFiltersSidebarJobTypes Tests
- Refactoring JobFiltersSidebarJobOrganizations Component
- Fixing Failing JobFiltersSidebarOrganizations Tests
- Creating Reusable JobFiltersSidebarCheckboxGroup Component
- Reuse JobFiltersSidebarCheckboxGroup
- Adding Tests for JobFiltersSidebarCheckboxGroup
- Section Review [SLIDES]
- Code at End of Section 29
UNIDAD 30 - Composition API III · 10 leccionesUNIDAD 30 - Composition API III
UNIDAD 30 - Composition API III · 10 lecciones
UNIDAD 30 - Composition API III
- The onMounted Function
- Refactoring JobListings Component to Use Composition API
- Fixing Failing JobListings Tests
- One More Update to JobListings Tests
- Extracting Previous and Next Page Logic to Composable Function
- Add Composables to Component
- Adding Tests for usePreviousAndNextPages Composable
- Updating JobListing Component
- Section Review [SLIDES]
- Code at End of Section 30
UNIDAD 31 - Intro to TypeScript · 16 leccionesUNIDAD 31 - Intro to TypeScript
UNIDAD 31 - Intro to TypeScript · 16 lecciones
UNIDAD 31 - Intro to TypeScript
- Welcome to TypeScript [SLIDES]
- Primitive Types
- Type Inference
- The any type
- The unknown Type and Type Guards
- Array Type Declarations
- Object Type Declarations
- Type Literals
- Type Literals and Objects
- Optional Properties
- Interfaces and Types
- Declaring Types for Functions
- Interfaces for Functions
- Intro to Generics
- Section Review [SLIDES]
- Code at End of Section 31
UNIDAD 32 - TypeScript and Pinia · 15 leccionesUNIDAD 32 - TypeScript and Pinia
UNIDAD 32 - TypeScript and Pinia · 15 lecciones
UNIDAD 32 - TypeScript and Pinia
- tsconfig.json for Next Lesson
- Install TypeScript for Vue
- Create Job Interface
- Update getJobs API Call
- Updating Test File for getJobs
- Define Types for User Store
- Define Types for Jobs Store
- Update Jobs Test File to TypeScript I
- Update Jobs Test File to TypeScript II
- TypeScript’s Partial Type
- Create Factory Function for Jobs Test File
- Update Utils Files to TypeScript
- Adding Types to Composables
- Section Review [SLIDES]
- Code at End of Section 32
UNIDAD 33 - TypeScript and Vue · 19 leccionesUNIDAD 33 - TypeScript and Vue
UNIDAD 33 - TypeScript and Vue · 19 lecciones
UNIDAD 33 - TypeScript and Vue
- Adding Type Annotations to ProfileImage Component
- Adding Type Annotations to MainNav Component
- Adding Type Annotations to TheHeadline Component
- Adding Type Annotations to CollapsibleAccordion Component
- Adding Type Annotations to ActionButton Component
- Annotating Event Handlers
- Adding Type Annotations to HeaderContainer Component
- Adding Type Annotations to TheSubnav Component
- Annotating Axios Requests (SpotLight Component)
- Adding Type Annotations to JobListing Component
- Adding Type Annotations to JobListings Component
- Adding Type Annotations to JobFiltersSidebar Component
- Adding Type Annotations to JobFiltersSidebarCheckboxGroup Component
- Adding Type Annotations to JobSearchForm Component
- Adding Type Annotations to TheHero and App Components
- Annotating Our Views
- Updating User Store and Setup Test File
- Section Review [SLIDES]
- Code at End of Section 33
UNIDAD 34 - Building A Feature with TypeScript · 16 leccionesUNIDAD 34 - Building A Feature with TypeScript
UNIDAD 34 - Building A Feature with TypeScript · 16 lecciones
UNIDAD 34 - Building A Feature with TypeScript
- User Story
- JSON Content for db.json File
- Adding /degrees Endpoint to db.json
- TDD for API Call: getDegrees API Call
- An Alternative Syntax for Pinia Stores
- TDD for Action: FETCH_DEGREES
- TDD for Getters: UNIQUE_DEGREES
- TDD for State: selectedDegrees
- TDD for Getters: INCLUDE_JOB_BY_DEGREE
- Updating FILTERED_JOBS Getter
- TDD for Actions: ADD_SELECTED_DEGREES
- Updating JobFiltersSidebar Component
- Fetch Degrees when JobListings Loads
- Trying Out Code in Browser
- Section Review [SLIDES]
- Code at End of Section 34
UNIDAD 35 - Clearing Job Filters · 12 leccionesUNIDAD 35 - Clearing Job Filters
UNIDAD 35 - Clearing Job Filters · 12 lecciones
UNIDAD 35 - Clearing Job Filters
- User Story
- TDD for CLEAR_USER_JOB_FILTER_SELECTIONS Action
- Refactor User Store to new Pinia Syntax
- Wiring up Click Handler In JobFiltersSidebar
- The Pinia $onAction Method
- Refactoring CollapsibleAccordion Component
- Add Tests for Action Side Effect
- Breaking JobFiltersSidebar Into Smaller Components
- Creating JobFiltersSidebarPrompt Component
- Adding Tests for JobFiltersSidebarPrompt Component
- Section Review [SLIDES]
- Code at End of Section 35
UNIDAD 36 - Adding Skills Filter · 14 leccionesUNIDAD 36 - Adding Skills Filter
UNIDAD 36 - Adding Skills Filter · 14 lecciones
UNIDAD 36 - Adding Skills Filter
- User Story
- Create Component to Track Skills and Qualifications
- Add New Search Term to Pinia State
- Add Action to Update Skills Search Term
- Filtering the Jobs by Search Term
- Two More Tests for INCLUDE_JOB_BY_SKILL Getter
- Wiring up Search State to Pinia Store
- The lazy Input Modifier
- The trim Input Modifier
- Adding Tests for JobFiltersSidebarSkills Component
- Clearing the Search Input when Clearing Filters
- Reading Search Term from Params
- Section Review [SLIDES]
- Code at End of Section 36
UNIDAD 37 - Congratulations · 3 leccionesUNIDAD 37 - Congratulations
UNIDAD 37 - Congratulations · 3 lecciones
UNIDAD 37 - Congratulations
- Congratulations
- Complete Slide Decks
- Bonus
Certificado oficial
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Cómo funciona
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
37 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Lo que obtienes
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Boris Paskhaver.
- Folio y QR verificables para compartirlo con quien te contrate.
Medios que necesitas
Equipo de cómputo
Conexión estable a internet
Pago único
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 37 unidades · 499 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Preguntas frecuentes
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Boris Paskhaver; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
