CF

Laravel and Vue.js - Fullstack Web Development (2019)

28h 14s
English
Free

Laravel and Vue.js - Fullstack Web Development (2019) is a 186-lesson 28 hours self-paced course by Udemy. Welcome to Laravel and Vue.

Course facts

Lessons
186
Duration
28 hours
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Free

Welcome to Laravel and Vue.js - Fullstack Web Development  course, the best online resource for learning how to build full stack web app with Laravel, Vue.js and other technologies. You will learn basic and advance Laravel features, integrating Bootstrap 4 to create beautiful and responsive website, Integrating Fontawesome 5, utilizing Laravel mix to write and compile Sass code and Javascript code and much more.

All of my courses are project-driven learning, in this course we will build real world project, that will make you proud of yourself and make you confident to build complex web applications that you can imagine.

Here's exactly what you will learn:

  • Basic Laravel features: database migration, database seeds, model factories, accessor & mutattors, form validation, authentication and authorization.

  • Advance Eloquent Relationship: Many to many and Many to Many polymorphic relationship.

  • Integrating Fontawesome 5 via Laravel mix.

  • Integrating Bootstrap 4 for UI Styling.

  • Implementing DRY principle.

  • Using Git for version control and Github as code repository.

  • Introduction to Vue js: Directive, list rendering, conditional rendering, class binding, style binding, components, mixins and much more.

  • Integrating Vue js & Ajax to make our application more interactive.

  • RESTfull API Development

  • Deploy Laravel applications in Heroku and Digital Ocean Virtual Private Server.

  • Upgrade Laravel application to the newer version to make our app up to date.

  • And much more

So what you're waiting for? Join today and learn how to build full stack web apps from scratch with Laravel & Vue.js.

Requirements:
  • You should have a basic understanding of HTML, PHP, OOP, CSS & Javascript
  • A Mac, Windows, or Linux computer with Local Development Environement installed (xampp, wamp or Laravel homestead, etc)
  • A Mac, Windows, or Linux computer with Nodejs installed
Who this course is for:
  • Anyone who wants to learn how to combine Laravel with Vue js and other web technologies to build full stack web application
  • This course is meant for students already familiar with the basics of Laravel and wants to level up their development skills by building real life project

What you'll learn:

  • Build real world Vue js & Laravel applications
  • Build RESTful API
  • Build Single Page Application (SPA) from scratch
  • Deploy Laravel application both in Heroku and Digital Ocean Virtual Private Server
  • Understand how Vue js works and how it interacts with Laravel Backend API
  • Use Laravel Mix for asset compilation

Who teaches Laravel and Vue.js - Fullstack Web Development (2019)? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Laravel and Vue.js - Fullstack Web Development (2019)?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1Welcome to the course 05:45
2Installing Local Development on Windows 15:19
3Installing Local Development on Mac 15:57
4Intro to Vue.js 07:13
5Setup Vue.js locally 05:31
6List Rendering - Part 1 of 3 03:55
7List Rendering - Part 2 of 3 05:01
8List Rendering - Part 3 of 3 04:59
9Conditional Rendering - Part 1 of 3 04:41
10Conditional Rendering - Part 2 of 3 04:23
11Conditional Rendering - Part 3 of 3 03:57
12Event Handling - Part 1 of 4 04:12
13Event Handling - Part 2 of 4 02:49
14Event Handling - Part 3 of 4 04:09
15Event Handling - Part 4 of 4 04:49
16Class Binding - Part 1 of 2 04:12
17Class Binding - Part 2 of 2 08:29
18Style Binding - Part 1 of 2 03:11
19Style Binding - Part 2 of 2 06:24
20Computed Property - Part 1 of 3 03:01
21Computed Property - Part 2 of 3 06:32
22Computed Property - Part 3 of 3 13:15
23Project Overview 01:15
24Creating basic sorting functionality 07:36
25Styling the sortable columns 05:31
26Refactoring 04:54
27Implementing sortable column to product name & category 06:27
28Fixing sortable column indicator issue 03:14
29Adding basic searching functionality 06:09
30Realtime searching 09:27
31Another approach in presenting search results 08:44
32Adding Pagination 11:06
33Adding Form Modal 08:38
34Getting list of categories 05:01
35Updating existing data 13:42
36Deleting data 02:44
37Routing 08:06
38Request & Response 05:13
39Views 09:17
40Working with Artisan CLI & Tinker 06:59
41Setting up our Database connection 03:57
42Database Migration 10:05
43Working with Foreign key column 13:01
44Populating database table with Seeder 10:22
45Working with Faker Library 05:52
46Eloquent 14:29
47Eloquent Relationship 08:39
48Eloquent Relationship - Inserting Related Models 05:42
49Model Factories 10:44
50API Resources 10:41
51Controllers 14:30
52Validation 08:09
53Project Setup 12:35
54Designing Question Schema - Part 1 of 2 08:34
55Designing Question Schema - Part 2 of 2 08:28
56Generating Fake data via Model Factories - Part 1 of 2 09:52
57Generating Fake data via Model Factories - Part 2 of 2 09:05
58Displaying all questions 15:47
59Adding Author info and Question creation date on Question item - Part 1 of 2 10:32
60Adding Author info and Question creation date on Question item - Part 2 of 2 09:14
61Adding votes, answers and views counter on Question item - Part 1 of 2 12:40
62Adding votes, answers and views counter on Question item - Part 2 of 2 12:15
63Buiding Question Form - Part 1 of 2 12:53
64Buiding Question Form - Part 2 of 2 06:19
65Validating and Saving the Question - Part 1 of 2 10:55
66Validating and Saving the Question - Part 2 of 2 12:02
67Updating The Question - Part 1 of 2 09:45
68Updating The Question - Part 2 of 2 09:50
69Deleting The Question 09:39
70Showing The Question detail 13:20
71Authorizing The Question - Using Gates 12:38
72Authorizing The Question - Using Policies 15:52
73Designing Answer Schema 15:20
74Generating Fake Answers - Part 1 of 2 09:24
75Generating Fake Answers - Part 2 of 2 08:26
76Displaying answers for question 17:55
77Adding Vote Controls on Question and Answer - Part 1 of 3 08:10
78Adding Vote Controls on Question and Answer - Part 2 of 3 11:58
79Adding Vote Controls on Question and Answer - Part 3 of 3 13:41
80Saving The Answer - Part 1 of 3 04:11
81Saving The Answer - Part 2 of 3 10:32
82Saving The Answer - Part 3 of 3 05:56
83Updating The Answer - Part 1 of 2 10:42
84Updating The Answer - Part 2 of 2 05:01
85Deleting The Answer - Part 1 of 3 04:12
86Deleting The Answer - Part 2 of 3 09:27
87Deleting The Answer - Part 3 of 3 09:36
88Accepting the answer as best answer - Part 1 of 2 12:03
89Accepting the answer as best answer - Part 2 of 2 08:24
90Favoriting The Question - Part 1 of 4 10:56
91Favoriting The Question - Part 2 of 4 10:47
92Favoriting The Question - Part 3 of 4 10:48
93Favoriting The Question - Part 4 of 4 10:45
94Voting The Question & Answer - Part 1 of 6 09:41
95Voting The Question & Answer - Part 2 of 6 10:53
96Voting The Question & Answer - Part 3 of 6 08:07
97Voting The Question & Answer - Part 4 of 6 06:45
98Voting The Question & Answer - Part 5 of 6 10:20
99Voting The Question & Answer - Part 6 of 6 12:44
100Refactoring The Models 09:58
101Refactoring The Views - Part 1 of 2 06:30
102Refactoring The Views - Part 2 of 2 14:47
103Preventing The Application from XSS Attack - Part 1 of 2 13:41
104Preventing The Application from XSS Attack - Part 2 of 2 10:31
105Miscellaneous 13:37
106Tidying up our views 12:20
107Creating our first Vue.js Component - Part 1 of 2 (Building The Component) 14:05
108Creating our first Vue.js Component - Part 2 of 2 (Using The Component) 13:21
109Creating Vue Answer Component - Part 1 of 5 (Using Vue.js Inline Template) 05:12
110Creating Vue Answer Component - Part 2 of 5 (Ajaxifying The Edit button) 07:25
111Creating Vue Answer Component - Part 3 of 5 (Build Answer Inline Form) 16:58
112Creating Vue Answer Component - Part 4 of 5 (Undoing changes) 06:41
113Creating Vue Answer Component - Part 5 of 5 (Validation) 08:20
114Ajaxifying the Delete answer button 06:37
115Beautifying The Flash & Confirm messages 10:34
116Creating Favorite Component - Part 1 of 3 (From button to Vue.js Component) 07:47
117Creating Favorite Component - Part 2 of 3 (Event Handler) 09:57
118Creating Favorite Component - Part 3 of 3 (Authenticating the button) 08:24
119Creating Accept Answer Component - Part 1 of 2 (from button into Vue component) 10:32
120Creating Accept Answer Component - Part 2 of 2 (event handler) 09:06
121Rewriting The Authorization Logic - Part 1 of 2 (Core authorization) 08:33
122Rewriting The Authorization Logic - Part 2 of 2 (Refactoring) 06:48
123Creating Vote Component - Part 1 of 3 (From blade to Vue Component) 13:24
124Creating Vote Component - Part 2 of 3 (Event Handling) 08:52
125Creating Vote Component - Part 3 of 3 (Fixing issues) 07:39
126Creating Vue Answers Component 12:48
127Building Load more answers Feature - Part 1 of 2 11:09
128Building Load more answers Feature - Part 2 of 2 08:57
129Implementing Vue.js Custom Events 09:12
130Implementing Global Event Bus 09:02
131Creating New Answer Component - Part 1 of 2 (From blade to Vue.js component) 07:56
132Creating New Answer Component - Part 2 of 2 (Event Handling) 12:38
133Creating Question Component - Part 1 of 3 (from blade to vue.js component) 06:41
134Creating Question Component - Part 2 of 3 (Build inline Form) 17:25
135Creating Question Component - Part 3 of 3 (Misc) 11:16
136Working With Vue.js Mixins 17:19
137Section Intro 01:51
138Composing Editor Component 13:36
139Enable Markdown Preview 05:44
140Autosizing The Editor 07:38
141Syntax Highlight Integration 07:34
142Fixing Syntax Highlight issue on the first load 04:00
143Fixing Syntax Highlight issue when cancel editing 10:14
144Creating Highlight Mixin 07:16
145Integrating Markdown Editor in Answer Component 12:11
146Integrating Markdown Editor in New Answer Component 05:45
147Fixing Syntax Highlight issue after new answer added 06:35
148Fixing Syntax Highlight in Answers Component 05:31
149Installing Laravel Passport 06:39
150Requesting a Passport Token 12:31
151Creating API Endpoint for displaying all questions 06:37
152Transforming Data using Eloquent API Resources 08:12
153Creating Answer Endpoints 13:43
154Current User's Posts Endpoint 17:52
155Updating npm packages 00:00
156Getting started with SPA - Setting up Backend Route Fallback 03:35
157Getting started with SPA - Installing and configuring Vue Router 13:56
158Getting started with SPA - Using Vue router RouterLink component 09:02
159Getting started with SPA - Vue Router Navigation Guards 05:59
160Getting started with SPA - Handling 404 error page 06:35
161The QuestionsPage Component - Setting up API baseURL 05:09
162The QuestionsPage Component - Building User Interface 13:08
163The QuestionsPage Component - Consuming API Endpoint 02:30
164The QuestionsPage Component - Fixing Authorization issue 02:33
165Creating Question Form Component - From Blade file to Vue.js component 13:18
166Creating Question Form Component - Handling Form Data 10:56
167The Question Page Component - Showing question details 09:43
168The Question Page Component - Displaying related answers 06:27
169Displaying current user's post - Building User Interface 10:52
170Displaying current user's post - Consuming Backend API 10:17
171Polishing up our app - Adding Transition effect 03:40
172Polishing up our app - Adding AJAX Spinner on All questions page 10:03
173Polishing up our app - Using Axios interceptor to control the Spinner globally 08:35
174Introduction 03:17
175Upgrading to Laravel 5.7 - Update Dependencies & Core Application 23:32
176Upgrading to Laravel 5.7 - Syncing Application's structure 15:53
177Upgrading to Laravel 5.7 - Testing 13:33
178Upgrading to Laravel 5.8 - Update Dependencies & Core Application 12:52
179Upgrading to Laravel 5.8 - Syncing Application's structure 16:26
180Upgrading to Laravel 5.8 - Testing 06:43
181Upgrading to Laravel 6.0 12:07
182Introducing Heroku 03:05
183Creating Heroku App 04:39
184Creating a Database 02:56
185Setting Heroku Config Variables 06:50
186Fixing Insecure Assets Error 05:35

What courses are similar to Laravel and Vue.js - Fullstack Web Development (2019)?

More courses by Udemy

Frequently asked questions

What prerequisites are needed before taking this course?
Before enrolling, it's beneficial to have basic knowledge of web development concepts and familiarity with HTML, CSS, and JavaScript. Understanding of PHP will also help, as the course covers Laravel, a PHP framework. No prior experience with Vue.js or Laravel is strictly required, but having some background can make the learning process smoother.
What projects will I build during the course?
Throughout the course, students will engage in various projects that integrate Laravel and Vue.js. These include creating sorting and searching functionalities, adding pagination, and developing a basic full-stack web application. Students will also work on designing schemas, generating fake data with Model Factories, and implementing CRUD operations.
Who is the target audience for this course?
This course is designed for web developers who want to learn full-stack development using Laravel and Vue.js. It is suitable for those looking to enhance their skills in building responsive web applications and for developers seeking to integrate advanced JavaScript frameworks with PHP-based backend systems.
How does the depth of this course compare to others?
The course provides a thorough exploration of both Laravel and Vue.js, covering basic to advanced features of Laravel, such as Eloquent relationships and API resources, as well as Vue.js fundamentals like list rendering and event handling. It is extensive with 186 lessons, offering a comprehensive full-stack development experience compared to shorter or more narrowly focused courses.
Which specific tools or platforms are covered in the course?
Students will work with Laravel, Vue.js, Bootstrap 4, and Fontawesome 5. The course also includes practical exercises with Laravel Mix for compiling Sass and JavaScript, and tools like Artisan CLI, Tinker, and Faker Library for managing and seeding databases.
What topics are not covered in this course?
The course does not cover advanced topics like server deployment, Docker, or scaling web applications. It focuses mainly on the development aspects of Laravel and Vue.js, with less emphasis on production-level considerations or other frontend frameworks beyond Vue.js.
How much time should I expect to commit to complete the course?
With 186 lessons, the course offers an extensive curriculum. While the exact runtime is not specified, students should expect to commit several weeks if studying part-time, allowing time for both watching lessons and completing practical exercises. The pace can vary based on individual familiarity with the technologies used.