An open API service indexing awesome lists of open source software.

https://github.com/mzur/webdev

A series of practical lessons for web application development with Laravel and Vue.js
https://github.com/mzur/webdev

laravel lessons teaching vuejs web-development

Last synced: 2 months ago
JSON representation

A series of practical lessons for web application development with Laravel and Vue.js

Awesome Lists containing this project

README

          

# Web Application Development

This is a series of practical lessons for web application development. The goal of this series is to get you started with web application development using the PHP and JavaScript languages and the [Laravel](https://laravel.com/) and [Vue.js](https://vuejs.org/) application frameworks. If you are looking for a more general and in-depth introduction to web application development, take a look at [the MDN learning area](https://developer.mozilla.org/en-US/docs/Learn).

Please work through the lessons in order, as each lesson builds upon the previous lessons. At the end you will build a basic web application with user accounts, persistent storage in a database and an interactive user interface for basic image annotation.

## Preparation

All instructions are written to be performed on a Linux command line (e.g. Ubuntu). They should also work fine on a Mac. If you use Windows, you could try to use the [WSL](https://docs.microsoft.com/en-us/windows/wsl/install).

The practical lessons require PHP >=8.1 as well as the Composer and NPM package managers installed on your system. To install them on Ubuntu 24.04, run:

```
sudo apt update
sudo apt install --no-install-recommends php-cli php-xml php-mbstring php-curl php-sqlite3 composer npm unzip
```

## Lessons

- [**Lesson 0:** Web Application Fundamentals](lesson-0)

- [**Lesson 1:** Static Files](lesson-1)

- [**Lesson 2:** A Server-Side Application with PHP](lesson-2)

- [**Lesson 3:** A Client-Side Application with JavaScript](lesson-3)

- [**Lesson 4:** CSS (interlude)](lesson-4)

- [**Lesson 5:** A Full Laravel Application](lesson-5)

- [**Lesson 6:** A Basic Image Annotation Tool](lesson-6)

## License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.