professional-programming/training/front-end/README.md

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents

- [Introduction to front-end programming for back-end developers](#introduction-to-front-end-programming-for-back-end-developers)
  - [Goal of this training](#goal-of-this-training)
  - [Prerequisites](#prerequisites)
  - [To do before the course](#to-do-before-the-course)
  - [Curriculum](#curriculum)
  - [Roadmap: to go further](#roadmap-to-go-further)
  - [Inspiration](#inspiration)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Introduction to front-end programming for back-end developers

## Goal of this training

This training was developed for back-end and infra developers. It is meant to be used as a support for an oral presentation.

I am not an expert in front-end development. This should only be considered an introduction.

## Prerequisites

Assumed knowledge:

- Basics about HTTP (cookies, protocol, HTTPS)
- Basics about browser (DOM, using the developer console)
- Basics about HTML and CSS (tags & attributes, how CSS work, CSS selectors, CSS styling)
- Basics about programming languages (conditionals, loops, variables, typing, tests)
- Basics about JavaScript (syntax, having written a few hundred lines of code)

## To do before the course

Read the [grab/front-end-guide](https://github.com/grab/front-end-guide) to get a 10,000 viewpoint about the road ahead. Evidently you don't need to check the details about each topic (that's what we'll do in this course), but obviously feel free to look up what seems interesting to you!

## Curriculum

Instead of going deep in topics, we try to go as fast as possible to front-end programming (i.e. React with TypeScript), and then we go back to address those more specific topics.

1. The language: writing modern Javascript
2. React
3. TypeScript
4. The browser
5. CSS/HTML restart
6. Front-end development practices

## Roadmap: to go further

![learning front-end roadmap](./img/learning-roadmap.png)

Image from https://github.com/kamranahmedse/developer-roadmap

## Inspiration

- [Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!](https://frontendmasters.com/books/front-end-handbook/2019/)
- [grab/front-end-guide: 📚 Study guide and introduction to the modern front end stack.](https://github.com/grab/front-end-guide)
Run pre-commit on all files 2020-07-21 09:37:15 +02:00			`<!-- START doctoc generated TOC please keep comment here to allow auto update -->`
			`<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->`
			`## Table of Contents`

Improve front-end training 2020-07-27 12:43:02 +02:00			`- [Introduction to front-end programming for back-end developers](#introduction-to-front-end-programming-for-back-end-developers)`
Run pre-commit on all files 2020-07-21 09:37:15 +02:00			`- [Goal of this training](#goal-of-this-training)`
			`- [Prerequisites](#prerequisites)`
			`- [To do before the course](#to-do-before-the-course)`
			`- [Curriculum](#curriculum)`
Improve front-end course 2020-07-23 11:01:29 +02:00			`- [Roadmap: to go further](#roadmap-to-go-further)`
Run pre-commit on all files 2020-07-21 09:37:15 +02:00			`- [Inspiration](#inspiration)`

			`<!-- END doctoc generated TOC please keep comment here to allow auto update -->`

Improve front-end training 2020-07-27 12:43:02 +02:00			`# Introduction to front-end programming for back-end developers`
Start adding front-end training 2020-07-20 17:49:56 +02:00
			`## Goal of this training`

Add README for training 2020-07-21 12:08:28 +02:00			`This training was developed for back-end and infra developers. It is meant to be used as a support for an oral presentation.`
Start adding front-end training 2020-07-20 17:49:56 +02:00
			`I am not an expert in front-end development. This should only be considered an introduction.`

			`## Prerequisites`

			`Assumed knowledge:`

Improve list of prerequisites 2020-07-22 09:47:58 +02:00			`- Basics about HTTP (cookies, protocol, HTTPS)`
			`- Basics about browser (DOM, using the developer console)`
			`- Basics about HTML and CSS (tags & attributes, how CSS work, CSS selectors, CSS styling)`
			`- Basics about programming languages (conditionals, loops, variables, typing, tests)`
			`- Basics about JavaScript (syntax, having written a few hundred lines of code)`
Start adding front-end training 2020-07-20 17:49:56 +02:00
			`## To do before the course`

			`Read the [grab/front-end-guide](https://github.com/grab/front-end-guide) to get a 10,000 viewpoint about the road ahead. Evidently you don't need to check the details about each topic (that's what we'll do in this course), but obviously feel free to look up what seems interesting to you!`

			`## Curriculum`

Improve front-end training 2020-07-27 12:43:02 +02:00			`Instead of going deep in topics, we try to go as fast as possible to front-end programming (i.e. React with TypeScript), and then we go back to address those more specific topics.`

Improve front-end course 2020-07-23 11:01:29 +02:00			`1. The language: writing modern Javascript`
Improve front-end training 2020-07-27 12:43:02 +02:00			`2. React`
Improve front-end course 2020-07-23 11:01:29 +02:00			`3. TypeScript`
Improve front-end training 2020-07-27 12:43:02 +02:00			`4. The browser`
Improve front-end course 2020-07-23 11:01:29 +02:00			`5. CSS/HTML restart`
			`6. Front-end development practices`

			`## Roadmap: to go further`

			`![learning front-end roadmap](./img/learning-roadmap.png)`

			`Image from https://github.com/kamranahmedse/developer-roadmap`
Start adding front-end training 2020-07-20 17:49:56 +02:00
			`## Inspiration`

			`- [Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!](https://frontendmasters.com/books/front-end-handbook/2019/)`
			`- [grab/front-end-guide: 📚 Study guide and introduction to the modern front end stack.](https://github.com/grab/front-end-guide)`