{
    "componentChunkName": "component---src-templates-course-js",
    "path": "/course/front-end_2021/",
    "result": {"pageContext":{"Id":"front-end_2021","buttonCaption":"Переглянути детальніше","courseImageName":"img6","date":"2021-04-12T22:35:49+03:00","dateUndefined":false,"description":"3-місячний навчальний інтенсив присвячений веб-розробці та напрямку фронтенд використовуючи технології React. Протягом курсу ми розглянемо теоретичні та практичні аспекти - JavaScript, робота із DOM, React та Redux.","discount":"22%","id":"__Courses__front-end_2021","link":"front-end_2021","name":"Front-End","shortName":"Front-End","goLearnYourselfLink":"https://www.udemy.com/course/aaspring21-frontend-course/?referralCode=EEE2642758D683E7550E","location":["Незабаром набір"],"online":true,"orangeButton":true,"pricePerCourse":null,"pricePerMonth":null,"relevant":true,"tags":["React","Redux","webAPI"],"students":null,"freeAccessLink":"https://www.youtube.com/c/TernopilJS/playlists","learnOnYOurselfPrice":"34,99$","buyOnUdemyCaption":"Проходження курсу відбувається на платформі Udemy","buyOnUdemyCaption2":"Оплата та проходження курсу відбувається на платформі Udemy","lections":[{"link":"https://www.youtube.com/embed/EJS_FQnNRgY","header":"Заняття 2. Структура проекту / IDE / Пакети в Meteor","presentationLink":"http://slides.com/ternopiljs/deck-2","description":"TernopilJS - Заняття 2. Тема: \"Структура проекту / IDE / Пакети в Meteor\"."}],"startCourseDate":"","startCourseDateReference":"Дату початку буде оголошено після формування навчальної групи","duration":"12 тижнів","team":[{"header":"Ментор курсу","pic":"Roman_Savkiv","name":"Роман Савків","position":"Front-end розробник, team lead","linkedin":"https://www.linkedin.com/in/roman-tzukerman/","description":["Має 4+ років досвіду у веб-розробці, з них - 2 роки js/React.","Закінчив магістратуру ТНПУ по спеціальності вчителя інформатики.","Раніше - засновник та керівник веб-відділу креативної агенції Golden Ratio.","На протязі своєї кар‘єри інтерв’ював та був ментором для великої кількості початківців, що зараз успішно працюють та розвиваються всередині Apiko."]},{"header":"Ментор курсу","pic":"Roman_Tsvyk","name":"Роман Цвик","position":"Full Stack Developer","linkedin":"https://www.linkedin.com/in/roma-tsvyk","description":["Раніше уже виступав у якості викладача та спікера на курсах Apiko Intensive.","Уже майже 4 роки досвіду роботи, починав із веб-розробки (ReactJS), потім освоїв мобільну (React Native) та backend-технології (NodeJS, GraphQL). Останній рік уже працює у якості full stack розробник.","Закінчив ТНЕУ (теперішній ЗУНУ) по спеціальності економіка та управління, проте успішно перекваліфікувався у працівника ІТ-сфери."]},{"header":"Координатор курсу","pic":"Kristina_Trach","name":"Крістіна Трач","position":"Education manager","linkedin":"https://www.linkedin.com/in/kristina-trach-8118a4a0/","description":["Має більше 6 років досвіду у сфері IT: починала із роботи саппорт-менеджером, потім  перекваліфікувалась на позицію QA Engineer","Закінчила Тернопільський національний університет імені Івана Пулюя за спеціальністю \"Менеджмент інноваційної діяльності\""]}],"schedule":[{"header":"Module 1 Basic JS","weeksText":"4 weeks","lessons":"10 lessons","preparedBy":[{"name":"Вадим Воробель","img":"i1"},{"name":"Олег Мриглод","img":"i2"},{"name":"Роберт Скраль","img":"i3"},{"name":"Віталій Здрок","img":"i7"},{"name":"Роман Савків","img":"i6"},{"name":"Олександр Велещук","img":"i4"},{"name":"Петро Струтинський","img":"i5"}],"weeks":[{"header":"Week 1 JS language basics","lessons":[{"header":"Lesson 1 Introduction","list":["Include and run js on html page (video)","Hello world js program (video + repeat)","A brief history of js, specifications and implementations (video)"]},{"header":"Lesson 2 Syntax","list":["2 basic things in js: values(data) and variables (video)","Data types: primitive and complex (video)","Basic syntax: expression, declaration, assignment. What's the difference? (video)","JS operators (video)","Fulfil missing operators in equations and expressions (practice)"]},{"header":"Lesson 3 Objects","list":["Everything is an object. What is an object? Objects and arrays (video)","Arrays. Working with arrays. Core JS API to work with arrays (video)","Object API how to work with objects (video)","Practice with getting the information from objects, processing it, store into array and output to the console with labels (practice)"]}]},{"header":"Week 2 Functions and Classes","lessons":[{"header":"Lesson 4 Functions and its types. Scope and Context","list":["Functions in js. Types of functions, arrow functions (video)","Scope, Closure. What in fact your code would see? (video)","Context: this, bind, call and apply (video)","Create a very helpful function, use it couple of times (practice)"]},{"header":"Lesson 5 Composition","list":["Function as a value. Higher order functions. (video)","Curry functions. Partially applied functions. Composition (video)","Practice with creating HOF (higher order function) and composition (practice)"]},{"header":"Lesson 6 Inheritance","list":["Prototype inheritance. (video)","js Classes: prototype methods and <i>this</i> context (video)","Create some classes, inherit them from some parent class, inherit some methods from parent class, add some unique methods and fields, etc (practice)","Class properties (video)","TBA (practice)"]}]},{"header":"Week 3 Async js code","lessons":[{"header":"Lesson 7 Callbacks","list":["Difference between sync and async code (video)","Callbacks: timeout ,interval, etc (video) ","Make a clock/timeout timer (practice)","Overview of XMLHttpRequest (video)","Get and output data from API endpoint using XMLHttpRequest (practice)"]},{"header":"Lesson 8 Promises","list":["Promises, Promise chaining (video)","Fetch API. Request/Response, <i>fetch</i>. Getting data from API (video)","Get and output data from API endpoint using fetch (practice)"]},{"header":"Lesson 9 Async/await","list":["async / await notation (video)","async / await error handling, try catch operators (video)","JSON. What is JSON. Methods of processing JSON (video)","Get and output data from API endpoint using async/await with fetch (practice)"]}]},{"header":"Week 4 JS Modules. Module 1 exam","lessons":[{"header":"Lesson 10 JS Modules","list":["Non-ES module systems, ES Modules (video)","Import/Export (default, named, renaming), module object, HTML module (video)","Circular dependencies, dynamic module loading (video)","Create a module, analyse circular dependencies (practice)"]},{"header":"Module 1 exam","list":["Test exam (js basic syntax, object, classes, functions, events, async, js modules)","Mini-project: TBA","Q&A sessions with mentors"]}]}]},{"header":"Module 2 Web API","weeksText":"2 weeks","lessons":"4 lessons","preparedBy":null,"weeks":[{"header":"Week 5 DOM & Web Storage","lessons":[{"header":"Lesson 11 DOM. Part I","list":["What is DOM? <i>document</i> and <i>window</i> objects. (video)","Basic DOM data types: <i>Document, Node,</i> etc (video)","Basic DOM API get, add, remove, create nodes (video)","Create and insert some nodes into the document. Add ability to remove them on click event (practice)"]},{"header":"Lesson 12 DOM. Part II","list":["Read/write node attributes, working with classList (video)","<i>data</i>-attributes(video)","Events in js, basic DOM events, dispatching and listening to events. Bubbling and capturing (video)","Create switchable tabs element using DOM API, style it (practice)"]},{"header":"Lesson 13 Web Storage","list":["Storing data using Web Storage: local and session storage (video)","Implement todo list (or maybe something more interesting) using localStorage (practice)"]}]},{"header":"Week 6 Other API's. Module 2 exam","lessons":[{"header":"Lesson 14 Client routing. History API","list":["What is client routing? (video)","History API navigating through history (video)","Create slide presentation player that have history-driven navigation: next, prev, home, etc (practice)"]}]},{"header":"Module 2","lessons":[{"header":"Test exam (DOM, Web Storage, History)","list":null},{"header":"Q&A with mentors. Mini-project: TBA","list":null}]}]},{"header":"Module 3 React","weeksText":"4 weeks","lessons":"9 lessons","preparedBy":[{"name":"Роман Цвик","img":"i8"}],"weeks":[{"header":"Week 7 React Basics","lessons":[{"header":"Lesson 15 Introduction to React","list":["What is React? What problems does it solve? Concept of reactivity. Virtual DOM concept (video)","JSX or how to operate with markup within js (video)","React render: ReactDOM.render (video)","Create your first react app (practice)"]},{"header":"Lesson 16 Components","list":["Component props (video)","Advanced JSX mapping (video)","Basic React architecture: divide your UI into components. Dummy and smart components (video)","Create UI molecule (e.g. header) from a few atom components, pass props from parent, style it (practice)"]},{"header":"Lesson 17 Event Handlers","list":["Events in React. Adding handlers to your DOM (video)","Create basic onClick event handlers for your header menu (practice)"]}]},{"header":"Week 8 Advanced React. Part I","lessons":[{"header":"Lesson 18 Lifecycle","list":["Lifecycle methods in class components: mount, update, unmount (video)","Fetch data from server and output it in markup (+ smth on update and unmount methods) (practice)"]},{"header":"Lesson 19 State","list":["React components: Class and functional components. The main differences (video)","Component (local) state. Global state (video)","Context API (video)","Using state to create popups with fetched data. Passing state and lifting state (video)","Create stateful components composition. Pass state and lift state (practice)"]},{"header":"Lesson 20 Hooks","list":["Hooks: make functional components smart: useState, useEffect, useRef, etc (video)","Rewrite class component to functional using hooks (practice)","Create your own hook for data fetching (practice)"]}]},{"header":"Week 9 Advanced React. Part II","lessons":[{"header":"Lesson 21 React forms","list":["React forms. Controlled and uncontrolled forms (video)","Create sign up form from designs (practice)"]},{"header":"Lesson 22 Routing","list":["Routing. Server & client side routing (video)","Basic routing in react with <i>react-router</i> (video)","Type of routers: browser, hash, memory (video)","TBA (practice)"]},{"header":"Lesson 23 Server side","list":["SSR with React (video)","Portals (video)","TBA (practice)"]}]},{"header":"Week 10 Module 3 exam","lessons":[{"header":"Module 3","list":["Test exam DOM, Web Storage, History)","Q&A sessions with mentors. Mini-project: TBA"]}]}]},{"header":"Module 4 Redux","weeksText":"1 week","lessons":"3 lessons","preparedBy":null,"weeks":[{"header":"Week 11 Redux","lessons":[{"header":"Lesson 24 Introduction to Redux","list":["Global state management (video)","FLUX concept (dispatcher - action - reducer - store) (video)","Redux API (video)","Playing with already implemented redux store | TBA (practice)"]},{"header":"Lesson 25 Redux with React","list":["Setting-up Redux store (video)","Dispatching actions (video)","Reducing state (video)","Connecting store to components, stateToProps (video)","TBA (practice)"]},{"header":"Lesson 26 Middlewares","list":["How to write middlewares in React/Redux (video)","Sync and async middlewares (video)","Types of middlewares (MPI, filters, etc) (video)","TBA (practice)"]}]}]},{"header":"Module 5 Instruments","weeksText":"1 week","lessons":"3 lessons","preparedBy":null,"weeks":[{"header":"Week 12 Instruments","lessons":[{"header":"Lesson 27 git","list":["Pull request lifecycle concept (video)","Branching: CRUD, branching strategies (video)","Commit management: rebase, merge, cherry-pick (video)","Resolving conflicts (video)","TBA (practice)"]},{"header":"Lesson 28 Dev Tools","list":["Application, Networking, Console & Sources & debugging (video)","Performance. How to analyse performance of an app + Lighthouse (video)","Testing in responsive modes (devices) (video)","3rd party tools: Redux/react tools, etc (video)","TBA (practice)"]},{"header":"Lesson 29 Build systems","list":["Task runner (video)","Bundler (video)","Set up basic webpack (practice)"]}]}]},{"header":"TBA Module 6 Final project","weeksText":"4 weeks","lessons":null,"preparedBy":null,"weeks":[{"header":"Final project","lessons":[{"header":"Final project: TBA This project should include complex react app building from scratch using all delivered knowledges and practices. That project should include markup creation, proper styling using scss and well-structured js part of UI components and business logic files. This project should be rated based on summary of each part (rate markup, rate styles, rate react, etc)","list":null}]}]}],"questions":[{"header":"Питання","text":"<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p> <p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>"},{"header":"Як проходить онлайн навчання із ментором?","text":"<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p> <p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>"}],"featuresList":[{"text":"Незабаром набір у групу","color":"#111","icon":"location"},{"text":"12 тижнів тривалість","color":"#111","icon":"checkmark"},{"text":"72 навчальних відео","color":"#111","icon":"checkmark"}],"videos":72,"pracricalLessons":"32 практичних завдання","registerLink":"https://docs.google.com/forms/d/e/1FAIpQLScT75pU4_O4k3bS903SgfZaj5TIwYwVpHPOePLUTThy5YeKWg/viewform","registrationClosed":true,"registerLinkText":"Незабаром набір","priceString":"Незабаром набір","courseStatus":"Незабаром набір","startApplyDate":"незабаром","endCourseDate":"незабаром","secondInfoCardCourse":"img7"}},
    "staticQueryHashes": ["1476206626","1715933494","2288272459","2362788424","2704727204","580142899"]}