ESILV courses on Web Application Architecture(s)

Table of Contents

• 🎯 Objective
• 🎣 Methodology
  • 📖 Must Read
  • 🍿 Must Watch
  • 👩 Just tell me what to do
• 🛣️ Courses
  • 🏁 Course 1 - Javascript World Domination
    • 📖 Must read
      • About Internet and Web Application
      • About Javascript
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 🍭 Course 2 - Suit up your apps
    • 📖 Must read
      • About HTML/CSS
      • About Web Design: visions, basic architecture and trending
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 🏄‍♀️ Course 3 - Node.js, Master of Universe
    • 📖 Must read
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 🖥️ Course 4 - React
    • 📖 Must read
      • The battle of frameworks
      • About React
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 🛠️ Course 5 - Toolbox and Productivity
    • 📖 Must read
      • About productivity and methodology
      • About tools and setup
      • About Git and source code management
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 🤺 Course 6 - 3 Musketeers: RDD, CDD and TDD
    • 📖 Must read
      • About Readme-Driven Development
      • About Comment-Driven Development
      • About Test-Driven Development
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 📡 Course 7 - API-ness
    • 📖 Must read
      • About Data and IA
    • About RESTful and GraphQL API
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • 📱 Course 8 - Make the Web accessible
    • 📖 Must read
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do
  • ⭕ Course 9 - EcmaScript 2015 (ES6): the circle is now complete
    • 📖 Must read
    • 🍿 Must watch
    • 👩‍💻 Just tell me what to do ... for the next days, weeks, months ... even years
• 📅 Schedule for live workshops
• Licence

Be able to start an online business with a web application.

Before each workshop, I share some collection of useful links to deep diving on the current subject split in 3 parts. I try to limit to 14 hours of work by week (2h by day, Monday to Sunday).

• 📖 Must Read
• 🍿 Must Watch
• 👩 Just tell me what to do
• the 🚀 link. If you have just 30 minutes in your student busy life: Read the 🚀 link

Useful links to read as blog post or github link.

At least 1 talk or podcast link could help you to learn in a passive context (commuting for instance) or when you do something else (workout).

To be ready the workshop day, links to tutorials, exercises to do...

• 20 things I learned about browsers and the web
• How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)
• How the Web Works Part II: Client-Server Model & the Structure of a Web Application

• 🚀 JavaScript For Cats - An introduction for new programmers
• An introduction to Object-Oriented Programming in JavaScript
• A re-introduction to JavaScript

• How the Internet Works in 5 Minutes
• What the... JavaScript?

1. Create a github account
2. Be sure to understand source code management with git. If not, read git - the simple guide My advice is to learn first git concepts then to master the command line. The command line is not related to an OS (unlike built-in GUI desktop tools)
3. Be ready with your Code Editor
4. Be ready with your browser developer tools. For instance: Chrome, Firefox, Edge or Safari.

• Basic web pages: A friendly tutorial for making (really) simple web pages
• 🚀 Hello CSS: A friendly tutorial for crafting slightly prettier websites
• Principles of writing consistent: CSS code guide

• Everything you need to know about Design Systems
• 8 innovative web design trends for 2020

• How Airbnb designs for trust

Follow the guide to create card with Bootstrap 4:

• Bootstrap 4 Cards Tutorial

• 🚀 Introduction to Node.js / A beginners guide to Node.js and NPM
• Introduction to Express

• What is Node.js?

1. Install Node (Latest LTS Version) without sudo. My advice is to use nvm, an awesome cross platform node installer.
2. Be sure that you can install node packages with npm without to be sudo
3. Complete all steps of Learn You The Node.js For Much Win! tutorial

• The Top JavaScript Frameworks For Front-End Development in 2020
• JavaScript Trends in 2020

• 🚀 A Complete Beginner's Guide to React
• Top 10 Tips & Tricks Every React.js Beginner Should Know

• React Today and Tomorrow and 90% Cleaner React With Hooks

Follow the tutorial to build an interactive tic-tac-toe game in React

1. Tutorial: Intro To React By Facebook

• 🚀 Manifesto for Software Crafmanship
• The developer’s workflow in practice  -  how we built our MVP in 30 days
• 101 Tips For Being A Great Programmer (& Human)

• My Mac Setup by Nick Taylor
• My Linux Development Environment by Bruno Paz
• My Terminal Setup: iTerm2 + Zsh by Ali Spittel
• A curated list of awesome tools, resources and workflow tips making an awesome development environment
• How To Write A Kick-Ass Technical Resume

• Conversational Git

• Tools for the Modern Web Developer

1. List your top 5 tasks you do the most every day on your device.
2. Find a way (scripts, aliases, bash... ) to help you to be more efficient with these tasks.

• Readme Driven Development
• Write your Readme first
• Art of README: Things I've learned about writing good READMEs.
• A curated list of awesome READMEs

• On the merits of comment-driven development
• Comment-driven development or comment programming
• Why writing comments is hard

• 5 Questions Every Unit Test Must Answer
• TDD Changed My Life
• 🚀 An Overview of JavaScript Testing in 2019

• Learn to write tests in node.js with Jest

Write the tests for these 3 exercises:

• 00 - Setup Jest
• 10 - Lookup
• 11 - Pure Function

• Seven Critical Predictions for Big Data in 2020
• What Chicken Nuggets Taught Me About Using Data to Design

• 🚀 A brief history of Web APIs
• RESTful API Designing guidelines — The best practices
• 10 Best Practices for Writing Node.js REST APIs
• What is GraphQL and how to use it

• REST Tutorial - How to Design a Good RESTful API

Follow and complete this blog post:

• Developing A RESTful API With Node.js And MongoDB Atlas

• Fix 85% of your Web Accessibility issues in 5 easy steps
• Why It's Important For Web Developers To Focus On Web Accessibility
• Digital guide to low tech

• Pragmatic Accessibility: A How-To Guide for Teams (Google I/O '17)

Follow and complete this blog post tutorial:

• Web Accessibility For Beginners

• ECMAScript 6

• Douglas Crockford. The Better Parts. JS Fest 2018

Before to deep dive into the Javascript Ecosystem, build a strong language understanding foundation. If you are ready to learn, the following links in this post How to Learn ES6 are a goood start.

For the new decade, take a look at some trends data with Top JavaScript Frameworks and Topics to Learn in 2020 and the New Decade

Then you can follow these awesome paths to become a Web developer: Community driven roadmaps

Example of schedule for live workshops based on 9 days sessions.

Uncopyrighted