Adapt academy for front end

The goal of the academy is to teach students how to write their first (or second, third, etc..) single page application using proper practices available. It is meant to teach students how to write code efficiently, how to use various tools to achieve desired goals.

This is main repository for Adapt academy for front end. Here you will find resources for lessons (quiz, boilerplates and so on).

Repository contains:

├── final
├── lesson1
│   ├── html-common.html
│   └── html1.html
├── lesson2
│   └── html-common.html
└── README.md

In final directory you will found React boilerplate for final task that you will accomplish after course end.

In lesson folders you will find resources for lessons.

Course

• Lesson 1: Intro.

1. What is Front-end development.

2. HTML - basics, semantics, purpose.

3. CSS - selectors, colors, positions, borders, box model, transform, states.

4. Practical exercise.

• Lesson 2: Advanced CSS.

1. Transitions - Animations.

2. CSS - BEM, SMACSS, ATOMIC CSS, OOCSS.

3. Responsive web design.

4. CSS preprocessors

5. Flex, grid

6. Practical exercise

• Lesson 3: Javascript (1).

1. Introduction (What is javascript? Ways to execute Javacript code).

2. Document object model (DOM api common methods)

3. Variables, operators, data types and structures

4. Program control flow (if ... else, switch, falsy values)

5. Data structures (array, object)

6. Loops and iteratios (for, while, For ... in, For .. of)

7. Functions.

8. JSON format. API interaction.

9. AJAX. XMLHttpRequest and Fetch.

10. Javascript Frameworks

11. Practical exercise.

• Lesson 4: Javascript (2).

1. ES7 (arrow function, bind, spread operator, class, const, let keywords; new collections - Map, Set, WeakMap, WeakSet).

2. Traversing through collection (map, forEach, filter, find).

3. Promises, async functions, generators

4. Practical exercise.

• Lesson 5: Making things click together - real life project development.

1. Code standarts - linters, readable code.

2. Project structure, clean code.

3. Tooling - npm, yarn, webpack, git and etc.

4. Practical exercise

• Lesson 6: React - introduction.

1. Introduction - what is it, differences from others, philosophy, simple examples.

2. JSX as XHTML and JS mix for faster components creation.

3. React components types (stateful, stateless, controlled and etc.) and when use them

4. Practical exercise

• Lesson 7: React - data flow and lifecycle.

1. How data works in React?

2. React life cycles (component mount, unmount, render and etc.).

3. Practical exercise.

• Lesson 8: React - integration with third party libraries.

1. React and third party libraries (redux, react-router, redux-api-middleware and etc.).

2. React and Redux.

3. Routing in react.

4. Make API request in React.

5. Practical exercise.

• Lesson 9: React - advanced.

1. React enhancement with redux middlewares.

2. Patterns in React (high order component, render prop, compound components and etc.)

3. Practical exercise

• Final task

1. Boilerplate for final task can be found in https://github.com/adaptdk/Adapt-Academy-Frontend-2019-task . Look at slides in repository in final directory. More details will be explained in one of the lessons after some introduction to ReactJS.
2. Demo of completed solution can be accessed by entering url https://adaptdk.github.io/Adapt-Academy-Frontend-2019-solution/

Tools used and learned

• Nodejs 8 (latest LTS) https://nodejs.org/en/download/;

• Yarn https://yarnpkg.com/en/docs/install;

• Webpack;

• nvm (node version manager);

• Chrome dev tools;

• Visual Studio code (free open source editor, but you can pick any other);

• GIT;

Final words

May the force be with you :)