professional-programming/training/front-end
2020-11-10 15:00:08 +01:00
..
examples Add hoising example 2020-07-24 14:06:54 +02:00
img Improve course 2020-07-24 18:03:15 +02:00
01-modern-javascript.md Improve front-end training 2020-10-06 11:26:09 +02:00
02-react.md Improve front-end course 2020-10-25 21:41:51 +01:00
03-typescript.md Improve front-end training 2020-10-06 11:26:09 +02:00
04-the-browser.md Improve front-end training 2020-07-27 12:43:02 +02:00
05-css-html-restart.md Improve front-end training 2020-07-27 12:43:02 +02:00
06-front-end-development-practices.md Add front-end dev practices 2020-11-10 15:00:08 +01:00
README.md Improve front-end training 2020-07-27 12:43:02 +02:00

Table of Contents

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 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

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

Inspiration