Frontend developer - course 47,600 rub. from Loft School, training 3 months, Date November 28, 2023.

Vue.js Advanced Web Development

Week 1 - Workflow

— We meet the mentor and the group.
— Using webpack assembly, we create the selected layout for the final project.
— We post the result on Github and submit it to the mentor for verification.

Course opening
1. How the training goes (01:09:37)

Vue. Key Features
1. Theory (04:49)
2. Hello World (06:20)
3. Event Handling (02:38)

4. Handling multiple events (01:19)
5. Dynamic values ​​(01:30)
6. Introduction to Directives (05:40)
7. Abbreviated directives (00:37)
8. Methods with parameters (01:36)
9. Event modifiers (08:52)
10. Computed Properties (10:50)
11. Watchers (06:02)
12. Working with classes (03:37)
13. Working with CSS Properties (02:49)
14. Accessing DOM elements (03:50)
15. Conditional rendering (04:46)
16. Rendering lists (05:12)
17. Creating a Component (04:16)
18. Local components (02:44)
19. Data reactivity (04:35)
20. Component properties (03:52)
21. Slots (04:37)
22. Slots with scope (04:52)
23. Custom Events (04:27)
24. Teleports (02:53)

Vue. Single-file components
1. Installing the project. VUE-CLI (09:22)
2. Single file component (03:18)
3. Working with styles (07:02)
4. Passing attributes and handlers (02:53)
5. Individual files (01:26)
6. Validation of component properties (07:35)
7. Validation of user events (02:01)
8. Two-way data communication (04:11)
9. Custom v-model (05:51)
10. Lifecycle Hooks (07:08)
11. Impurities (04:40)

NPM
1. What is npm? (05:50)
2. Installing and updating npm (02:33)
3. Help with npm (01:28)
4. Finding and installing packages (04:24)
5. Package dependencies (02:09)
6. Manifest file package.json (03:02)
7. Removing and updating packages (03:02)
8. dependencies and devDependencies (01:51)
9. Webpack and npx (04:04)
10. npm scripts (04:02)
11. npm, git and github (02:40)

Yarn
1. Yarn (07:07)

Webpack. Basics
1. Theory (01:09)
2. Minimal config and launch (04:41)
3. File naming (02:34)
4. Loaders (04:28)
5. Dev-server (02:43)
6. Plugins (02:34)
7. Search for modules (03:18)
8. Sorsmaps (03:17)
9. Dev et al (02:42)
10. Types of modules (03:00)
11. Minimal assembly (05:30)

ESLint. Configuration overview
1. Introduction (01:26)
2. Installation and launch (03:10)
3. Bug fixes (02:04)
4. Configuration (05:21)
5. Output Format (00:52)

Figma for layout designer
1. Figma. Interface (04:37)
2. Figma. Project organization (01:32)

Flexbox
1. Introduction (00:45)
2. Flex container (01:43)
3. Major Axis Alignment (01:37)
4. Cross axis alignment (01:50)
5. Aligning a Single Element (01:09)
6. Flex element - container (00:53)
7. Axes direction (03:18)
8. Multiline container (02:54)
9. Aligning multiline content (01:25)
10. Proportions (02:46)
11. Compression proportions (01:24)
12. Basic size (04:02)
13. Order of elements (02:40)

GIT
1. Introduction (07:03)
2. Getting started with Git (03:01)
3. Creating a new repository (01:09)
4. Adding files to the Git index (watch area) (06:49)
5. Creating a commit (07:17)
6. Commit navigation. Cancel changes (12:10)
7. Typical Git cycle (03:34)
8. Branching in Git (11:27)
9. Conflicts when merging branches (06:06)
10. Temporary (without commit) saving data (05:25)
11. Working with remote repositories (20:04)
12. Using GitHub Pages to Host Projects (04:31)

Vue. Workshop #1
1. Start of the project (05:24)
2. Header Component (04:13)
3. Icon Component (05:06)
4. Displaying a list of components (02:56)
5. Toggle component (03:19)

Week 2 - Vue.js

— We make the layout adaptive.
— We will implement the “Skills” block in Vue.js.
— We will implement the “My Projects” block in Vue.js.
— We implement the “Slider for reviews” block using the Vue.js plugin.

Storybook
1. Installation (01:56) 
2. First story (04:35)
3. Connecting a component (01:24)
4. Config expansion (04:26)
5. General styles (02:08)
6. Story for the component (05:23)
7. CDD (04:16)
8. Creating a component (02:28)
9. Applying a component (02:29)
10. Event logging (03:29)
11. Backgrounds addon (01:41)
12. Addon Knobs (02:28)
13. Addon Source (02:17)
14. Conclusion (01:11)

JavaScript - ES6
1. String interpolation (07:39)
2. Simplifying method descriptions (13:35)
3. Defaults (30:08)
4. Destructuring Assignment: Objects (07:30)
5. New features and old browsers (13:07)

Asynchrony in JavaScript
1. Timers (23:44)
2. Loading pictures (22:21)
3. Promises (36:29)
4. AJAX (32:28)

Axios. Query Library
1. Introduction (02:23)
2. Sending a request (02:12)
3. Configuration overview (04:30)
4. Request body (01:43)
5. Default Settings (01:38)
6. Interceptors (02:11)
7. Services (02:33)
8. async-await (01:18)

Vue. Workshop #2
1. Preparation (02:39)
2. Connecting a component (02:16)
3. Control output (02:38)
4. Progress Component (05:09)
5. Request to the server (06:38)
6. Data output (05:55)

Week 3 - Native JavaScript

— We are creating the admin panel.
— We study Storybook and apply it in our project.
— We carry out the necessary processing (validation) of project forms.

VueRouter. Routing in the browser
1. Introduction (04:31)
2. Link building (02:41)
3. Software navigation (02:35)
4. Path parameters (04:42)
5. Parameters as properties (00:49)
6. Advanced options and 404 (03:29)
7. Nested routes (03:23)
8. Activity classes (02:37)
9. Various Router-Views (01:08)
10. Dynamic imports (02:00)
11. Beautiful URL (02:16)

Vuex. State Manager
1. Introduction (01:13)
2. Connection (02:30)
3. Action (02:27)
4. Mutations (02:16)
5. Getters (02:02)
6. Application in practice (08:07)
7. Assistant functions (02:59)
8. Modules (05:18)
9. Dynamic modules (01:38)
Question answer

Vue. Workshop #3
1. Layout (04:33)
2. Data output (02:42)
3. Preparing for Animation (02:14)
4. Button display (03:45)
5. Additional content loading (11:38)
6. Show slide after transition (02:17)

Week 4 - Vue.js, SPA

— We implement SPA in the admin panel.
— We study working with data through the application storage
— We use ajax to communicate with the api, set up client-server interactions.

Authorization. Tokens
1. Authorization types (04:20)
2. GitHub OAuth (01:42)
3. Creating a GitHub application (02:28)
4. Receiving a token (08:38)
5. Storing data in code (01:46)
6. Route protection (04:13)

Vue. Workshop #4
1. Preparation (01:33)
2. Creating an action (02:30)
3. Download Status (04:01)
4. Request (02:27)
5. Removing duplicates (03:29)
6. Route protection (03:23)
7. Logout (00:51)

Week 5 - Practice

— We display the saved data from the admin panel to the landing page.
— We test the components.
— Group work on a project with a mentor.

Vue.js. Composition API
1. Introduction (01:29)
2. General example (03:57)
3. Song function (01:51)
4. Reactive function (00:55)
5. toRef function (01:35)
6. toRefs function (00:58)
7. Computed properties (00:56)
8. watch function (01:41)
9. watchEffect function (03:14)
10. readonly function (00:40)
11. Test functions (02:30)
12. unref function (01:27)
13. Lifecycle Hooks (00:58)
14. Example. Project overview (00:53)
15. Example. Loading functionality (01:20)
16. Example. Categories (02:20)
17. Example. Initial filtering (02:46)
18. Example. Filter switching (02:11)
19. Example. Other filtering functions (02:03)
20. Example. Sorting method (03:05)
JS code testing
1. Introduction (16:05)
2. Jest (15:47)
3. The benefits of tests (09:01)
4. Coverage (10:02)

Vue.js. Component testing
1. Setting up packages (04:39)
2. Component wrapper (04:13)
3. What to test (02:48)
4. First test (05:25)
5. Checking the emission event (03:44)
6. Transferring properties (02:58)
7. Working with form elements (05:42)
8. General settings (01:15)
9. Moki (05:04)
10. Connecting libraries (02:32)
11. Action testing (03:26)
12. Testing the store (02:53)
13. Testing with pictures (03:08)

Testing. Moki
1. Creating a mockup (02:39)
2. Working with arguments (01:39)
3. Return value (02:57)
4. Modules (04:24)
5. Timers (02:05)

Vue. Workshop #5
1. Simple Component (03:03)
2. Component with store (05:21)
3. Testing. Preparation (03:20)
4. Testing. Toggler (02:38)
5. Testing. Issues (05:08)

Week 6 - Completing the project

— We are finalizing the project.
— We submit the project for review by mentors.
— Grading diplomas.

How to get a job in IT: tips and tricks
1. How to get a job in IT? Search, interview and probationary period (42:21)
2. How to find remote work and freelance orders? (20:12)
3. First job in IT - how to behave? Internships, official employment and work “for food” (14:11)
4. How to pass the probationary period? (27:10)
5. How to prepare for an interview at a FAANG company (08:52)
6. The process of loading a web page (25:19)
7. Programmer interview - everything you need to know (01:24:07)
8. Solving a problem from a programmer interview (19:36)
9. Frontend developer interview (01:37:17)

React.js Web Application Development

Week 1 - Introduction to React.js

— We get to know the course team and classmates.
— Learning JSX and Virtual DOM in React.
— We are considering the component approach and methods of data transfer.

Acquaintance
1. Course opening (05:41)

I React.js
1. What is React (07:05)
2. Virtual DOM (02:46)
3. JSX (06:10)
4. Rendering with conditions (05:11)
5. Working with lists (02:45)
6. Components (02:41)
7. Props (01:45)
8. State (06:45)
9. Events (02:26)
10. React Devtools (03:58)

II React.js
1. Lifecycle methods (05:19)
2. Components - functions (01:29)
3. Pure Component (02:54)
4. Synthetic Events (01:42)
5. Working with forms (02:51)
6. Error handling (01:39)

Analysis of tasks #1
1. Workshop #1 (30:36)

Week 2 - React.js patterns, testing

— We study components, elements and instances of the component class.
— We consider the Recompose library, high order components and Render Props patterns.
— We understand the advantages of tests, study Jest, Enzyme, Snapshots.

III React
1. Intro (01:43)
2. PropTypes (10:18)
3. Context (05:19)
4. Refs (05:18)
5. Portals (05:02)
6. Hooks (10:42)

IV React.js
1. High Order Components (HOCs) - Higher Order Components (10:33)
2. Ref-forwarding (HOCs) (04:31)
3. Render props pattern (05:25)
4. HOK Library Recompose (10:32)
5. Profiling (04:02)

Testing
1. Intro (05:06)
2. Test Runner (02:51)
3. Test DSL (08:41)
4. Enzyme (06:57)
5. Snapshots (03:09)
6. Testing sagas (05:01)
7. React Testing Library (06:32)

Analysis of tasks #2
1. Workshop #2 (27:54)

Week 3 - Redux, routing

— We study routing: Simple routing, routing with Switch, as well as nested routing.
— Getting acquainted with the Redux library: basic concepts and concepts of Store, Actions, Reducers, React-redux.
— Middleware is considered as a way to work with Sideeffect.

Routing in the browser
1. History API (02:48)
2. Simple routing (05:39)
3. Routing from Switch (04:16)
4. Nested routing (05:32)
5. Private route (04:39)

I Redux
1. Intro (04:07)
2. Store (05:03)
3. Actions (02:17)
4. Reducers (07:56)
5. React-redux (03:26)

II Redux
1. Intro (03:11)
2. CreateActions (redux-actions) (09:13)
3. Middleware (07:54)
4. Handle actions (05:52)
5. Selectors (06:17)
6. Reselect (04:49)
7. Ducks (06:56)

Analysis of tasks #3
1. Workshop #3 (39:13)

Week 4 - Redux-saga

— We are studying the Redux-saga library. Repeat generator* functions. Let's learn how to run them in parallel.
— Let's look at the Take method. Let's study select as a way to get data from the Store.
— We are looking at ways to style a React application. We study the libraries ClassNames, StyledComponents, BrowserList, MaterialUI.

I Redux-saga
1. Intro (00:57)
2. Overview (02:08)
3. Generators (04:11)
4. Adding sagas (02:07)
5. React on actions (03:53)
6. Feature launches (02:06)

II Redux-saga
1. Intro (00:27)
2. Performing effects in parallel (03:41)
3. Take effect (02:45)
4. Select effect (02:04)
5. Cancel effects (04:05)

Working with styles
1. Intro (01:34)
2. CRA Styles (05:21)
3. ClassNames (06:32)
4. StyledComponents (07:11)
5. BrowserList (01:37)
6. Material UI (08:13)

Analysis of tasks #4
1. Workshop #4 (09:55)

Week 5 – Forms, CI & DI & Client error handling

— We consider working with forms using the Formik, Redux Forms, React Final Form libraries.
— We are considering methods for ensuring the quality of production code. We analyze such tools as: Husky, TravisCI, HerokuNow.
— We are studying a set of useful libraries for development (Storybook, RamdaJS, Axios).
— We are considering TypeScript.

Working with Forms
1. Intro (05:07)
2. Formik (08:51)
3. Redux form (06:22)
4. React final form (06:36)

CI & DI & Client error handling
1. Intro (05:07)
2. Husky (02:32)
3. CI using TravisCI (03:32)
4. Deploy to heroku (04:57)
5. Rollbar (02:00)

A set of useful libraries for development
1. Storybook (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Typescript (09:31)

Analysis of tasks #5
1. Workshop #5 (13:17)

Week 6 - Project work

— We complete the application and send it for review.

How to get a job in IT: tips and tricks
1. How to get a job in IT? Search, interview and probationary period (42:21)
2. How to find remote work and freelance orders? (20:12)
3. First job in IT - how to behave? Internships, official employment and work “for food” (14:11)
4. How to pass the probationary period? (27:10)
5. How to prepare for an interview at a FAANG company (08:52)
6. The process of loading a web page (25:19)
7. Programmer interview - everything you need to know (01:24:07)
8. Solving a problem from a programmer interview (19:36)
9. Frontend developer interview (01:37:17)