Self taught Greek software engineer here, professionally working on software. I know you want to focus on the front-end but I disagree. A student needs to see how and why things are connected. This is what I suggest:
### Section 1
#Theory
How do the computers communicate (aka how does the internet works). Explain how your ethernet port connects to a server's ethernet port.
- Basic TCP/IP (OSI Model, Internet Routing, IP)
- Internet Infrastructure (routers, server component, virtual machines, cloud)
- Basic HTTP ( request-response, GET, POST, headers, cookies etc)
#Workshop
-Based on Wireshark sniffing. Also tools like traceroute.
### Section 2
#Theory
Programming Languages and Infrastructure.
- Based on the request-response cycle explain the basic components of a server (HTTP, programming language, database)
- why we need a programming language.
- Differentiate back-end from front-end and explain its usage (Server, DOM)
#Workshop
- Setup a development stack using Ansible or Puppet (to save time or do a LAMP stack installation)
- Use requests.py or guzzle to send and receive some http (check it with wireshark)
### Section 3
Back-end and frameworks
# Theory
- Why we need back-end frameworks
- What are the most important components of a back-end framework
- Pick a simple framework and explain its architecture
- Show some examples
- Briefly talk about security
# Workshop
- Flask-SQL Alchemy or Silex-Doctrine based project. No js used, no Node.JS imho.
### Section 4
Basic front-end and frameworks (no asynchronous staff, no SPA frameworks)
# Theory
- Why javascript
- Explain what the DOM is and why we care
- HTML VS DOM
- CSS
# Workshop
- Basic styling HTML+CSS
- Manipulate the DOM using developer tolls
- Jquery changing the DOM (based on the Flask project)
PHP "was" a great motivation for someone starting out. It is far more understandable for non technical people and gets results witch fuel your motivation further. The above qualities "were very important" in a time where self learning material were rare, incomplete and expensive. I remember myself as a self taught back in 2006 that PHP gave me inner strength. For me this is the reason for PHP being popular back then.
But now things have changed. Self learning materials (MOOCs etc) are everywhere and in great format (videos, classes etc), so it is far easier to grasp harder and more complicated therefore more sophisticated topics and tools and be productive to fuel your motivation. Also things have changed, people have realized that web is not all there is in programming due to the rise of higher added value programming activities such as games, mobile apps, data science etc. So for me this is the reason PHP is not so popular nowadays. Many other languages support the above in expense of being more complex (for example python or java) but self learning materials nowadays make this problem obsolete.
TL;DR: IMHO the "only pragmatic problem" with php, which is also its great strength, is that its domain is mainly the the web. So in order to reach other cs areas which are of higher added value nowadays (eg algorithms, data, mobile, you name it..) you must switch tools.
### Section 1
#Theory
How do the computers communicate (aka how does the internet works). Explain how your ethernet port connects to a server's ethernet port.
- Basic TCP/IP (OSI Model, Internet Routing, IP)
- Internet Infrastructure (routers, server component, virtual machines, cloud)
- Basic HTTP ( request-response, GET, POST, headers, cookies etc)
#Workshop
-Based on Wireshark sniffing. Also tools like traceroute.
### Section 2
#Theory
Programming Languages and Infrastructure.
- Based on the request-response cycle explain the basic components of a server (HTTP, programming language, database)
- why we need a programming language.
- Differentiate back-end from front-end and explain its usage (Server, DOM)
#Workshop
- Setup a development stack using Ansible or Puppet (to save time or do a LAMP stack installation)
- Use requests.py or guzzle to send and receive some http (check it with wireshark)
### Section 3
Back-end and frameworks
# Theory
- Why we need back-end frameworks
- What are the most important components of a back-end framework
- Pick a simple framework and explain its architecture
- Show some examples
- Briefly talk about security
# Workshop
- Flask-SQL Alchemy or Silex-Doctrine based project. No js used, no Node.JS imho.
### Section 4
Basic front-end and frameworks (no asynchronous staff, no SPA frameworks)
# Theory
- Why javascript
- Explain what the DOM is and why we care
- HTML VS DOM
- CSS
# Workshop
- Basic styling HTML+CSS
- Manipulate the DOM using developer tolls
- Jquery changing the DOM (based on the Flask project)
### Section 5
REST and Asynchonous and beyond
# Theory
- What is REST and why we need it
- Why frameworks like angular.js exist