Стать фронт-енд-разработчиком
Начальные условия
Я мама 3-х детей в затяжном декрете. Мне 33.
Чем бы я могла заниматься, чтоб в дальнейшем этим можно было и заработать?
Я выбрала 3 варианта из чего мне можно выбрать (на основании того, что я уже умею и хотела бы научиться): векторная графика, веб-дизайн, веб-разработка.
Прошла начальные бесплатные курсы по веб-дизайну. Поняла, что меня не прет. Порисовала вектор, акварелью. Воображение у меня очень не очень. И непонятно как его прокачивать. Воображение требуется и в рисунке. Попробовала фронтенд - пока нравится. И решила остановится на этом.
Проанализировав. почему меня занятул кодинг, я поняла, что это возвращает в некотором смысле меня в детство. Позднее детство и юношество. И вот почему:
1) В 8-классе я поступила в физмат школу, и закончила его почти отлично (все 5-ки по точным предметам, 4-ки по предметам гуманитарным). Любила матанализ и физику.
2) В университете я была в олимпиадной команде по электронике и радиотехническим цепям. Выиграла по электронике 3-е место в городской олимпиаде, и 2-место по радиотехническим цепям во Всероссийской олимпиаде.
....
Ну а потом случилась женитьба и затяжной декрет. Нет, я ни о чем не сожалею. У меня трое чудесных умных (не только по моему мнению) детей, своя усадьба, машина. Замужем я тоже счастлива, потому что мой муж настолько чудесный человек, что зарабатывает столько, что я сейчас могу заниматься чем хочу. И тратить на обучение некоторое время моей жизни.
Criterio del fin
Заработала первые 50 тыс. руб навыками HTML, CSS, JavaScript
Recursos personales
intermediate english, физмат-школа, радиотехнический университет, свободное время 2 часа/день, наличие семьи, дома, машины, отсутствие кредитов.
Lo ecológico del objetivo
Мне нравится:
решать задачи - технические, практические, с заковырками, щекочущими мозг;
автоматизировать процессы, чтоб меньше тратить время на рутину.
Также хочу жить с семьей и работать в свободном графике, получая удовольствие и от работы, и от общения с родными.
-
FreeCodeCamp. Javascript Algorithms And Data Structures Certification. Получу сертификат
Basic JavaScriptES6Regular ExpressionsDebuggingBasic Data StructuresBasic Algorithm ScriptingObject Oriented ProgrammingFunctional ProgrammingIntermediate Algorithm ScriptingJavaScript Algorithms and Data Structures Projects
-
Научить пользоваться GitHub-ом.
- Пройти уроки на https://githowto.com
1 - 10 уроки 8 июня10 - 25 уроки 9 июня25 - 40 уроки 10 июня40 - 51 уроки 11 июня
- Поиграться на https://learngitbranching.js.org/?demo
ВведениеЕдем дальшеПеремещаем труды туда-сюдаСборная солянкаПродвинутый уровеньPush & Pull - удалённые репозитории в Git!Через origin – к звёздам. Продвинутое использование Git Remotes
Написать конспект по пройденной теме (статья, гайд, блог-запись) 11-12 июня 2019
-
HTML, CSS. Responsive Web Design от https://freecodecamp.org
Basic HTML and HTML5Basic CSSApplied Visual DesignApplied AccessibilityResponsive Web Design PrinciplesCSS FlexboxCSS GridResponsive Web Design Projects:
Build a Tribute PageBuild a Survey FormBuild a Product Landing PageBuild a Technical Documentation PageBuild a Personal Portfolio Webpage
-
Сделать свой сайт-портфолио
-
Изучить Mozilla WebDev. Нужен ли он?
-
Установить SubLime или PhpStorm. Выбрать, что лучше. Усвоить горячие клавиши/быстрые вставки (ЕMMET?)
-
Пройти курс от HTMLACADEMY "Профессиональный HTML и CSS, уровень 1"
Лекция 1: ВводныйУрок 2. Инструменты разработчика Chrome DevToolsУрок 3. Как сделать репозиторий из любого проектаУрок 4. Как установить Git и работать в консолиУрок 5. Откуда берутся конфликты и что с ними делатьУрок 6. Что делать, если всё пошло не такУрок 7. Лекция 2: РазметкаУрок 8. Разметка каталога проекта «Барбершоп»Урок 9.Разметка карточки товара проекта «Барбершоп»Урок 10. Лекция 3: Фотошоп для верстальщикаУрок 11. Экспорт графики из ФотошопаУрок 12. Лекция 4: ДоступностьУрок 13. Доступная разметка страниц проекта "Барбершоп"Урок 14. Лекция 5: CSSУрок 15. Базовая стилизация карточки товара проекта «Барбершоп»Урок 16. Базовая стилизация карточки товара проекта «Барбершоп»Урок 17. Лекция 6: СеткиУрок 18. Сетки карточки товара проекта «Барбершоп»Урок 19. Сетки страницы каталога проекта «Барбершоп»Урок 20. Декоративные элементыУрок 21. Оформление контентаУрок 22. Введение в JavaScriptУрок 23. Лучшие практикиУрок 24. Как не потеряться на рынке трудаУрок 25. Инструменты разработчикаУрок 26. Использование Emmet
-
Сверстать barbershop
-
Сверстать gllacy
-
Front End Libraries Certification
BootstrapjQuerySass
-
Бесплатные интерактивные курсы от HTMLAcademy
-
Начальный уровень Знакомство с HTML и CSS
-
Начальный уровень Основы HTML
-
Начальный уровень Основы CSS
-
Начальный уровень Основы JavaScript
-
Начальный уровень Основы SVG
-
Средний уровень Построение сеток
-
Средний уровень Декоративные эффекты
-
Средний уровень Оформление текста
-
Средний уровень Мастерские
-
-
Курс по JavaScript на Sololearn
пока отдыхаю от компьютера или не имею доступа к нему, на планшете в приложении
-
Введение
-
Основные понятия
-
Условия и циклы
-
Функции
-
Объекты
-
Предопределенные объекты
-
DOM и события
-
ESMAScripe 6
-
-
Язык программирования JavaScript. Часть 2 на learn.javascript.ru. Браузер: документ, события, интерфейсы
Браузерное окружение, спецификацииDOM-деревоНавигация по DOM-элементамПоиск: getElement*, querySelector*Свойства узлов: тип, тег и содержимоеАтрибуты и свойстваИзменение документаСтили и классыРазмеры и прокрутка элементовРазмеры и прокрутка окнаКоординаты(реши задачи)
Введение в браузерные события (реши задачи)Всплытие и погружениеДелегирование событийДействия браузера по умолчаниюГенерация пользовательских событий
Основы событий мышиДвижение мыши: mouseover/out, mouseenter/leaveDrag'n'Drop с событиями мышиКлавиатура: keydown и keyupПрокрутка
Свойства и методы формыФокусировка: focus/blurСобытия: change, input, cut, copy, pasteОтправка формы: событие и метод submit
-
Решить все задачи для закрепления JS
-
http://www.codewars.com/kata/opposite-number
-
http://www.codewars.com/kata/basic-mathematical-operations
-
http://www.codewars.com/kata/printing-array-elements-with-comma-delimiters
-
http://www.codewars.com/kata/transportation-on-vacation
-
http://www.codewars.com/kata/get-the-middle-character
-
http://www.codewars.com/kata/partition-on
-
http://www.codewars.com/kata/word-count
-
http://www.codewars.com/kata/remove-first-and-last-character-part-two
-
http://www.codewars.com/kata/implement-a-filter-function
-
http://www.codewars.com/kata/prefill-an-array
-
http://www.codewars.com/kata/cross-product-of-vectors
-
http://www.codewars.com/kata/sequence-generator-1
-
https://www.codewars.com/kata/base-conversion/
-
http://www.codewars.com/kata/closures-and-scopes
-
http://www.codewars.com/kata/a-function-within-a-function
-
http://www.codewars.com/kata/can-you-keep-a-secret
-
http://www.codewars.com/kata/using-closures-to-share-class-state
-
http://www.codewars.com/kata/a-chain-adding-function
-
http://www.codewars.com/kata/function-cache
-
http://www.codewars.com/kata/function-composition
-
http://www.codewars.com/kata/function-composition-1
-
http://www.codewars.com/kata/stringing-me-along
-
http://www.codewars.com/kata/i-spy
-
http://www.codewars.com/kata/calculating-with-functions
-
http://www.codewars.com/kata/santaclausable-interface
-
http://www.codewars.com/kata/new-with-apply
-
http://www.codewars.com/kata/extract-nested-object-reference
-
http://www.codewars.com/kata/array-helpers
-
http://www.codewars.com/kata/replicate-new
-
http://www.codewars.com/kata/sum-of-digits-slash-digital-root/
-
http://www.codewars.com/kata/fun-with-es6-classes-number-2-animals-and-inheritance
-
http://www.codewars.com/kata/fun-with-es6-classes-number-3-cuboids-cubes-and-getters
-
http://www.codewars.com/kata/lazy-evaluation
-
http://www.codewars.com/kata/tail-recursion-with-trampoline
-
http://www.codewars.com/kata/functional-sql
-
http://www.codewars.com/kata/can-you-get-the-loop
-
-
Язык программирования JavaScript. Часть 1 на learn.javascript.ru
ВведениеВведение в JavaScriptСправочники и спецификацииРедакторы кодаКонсоль разработчика
Привет, мир!Структура кодаСтрогий режим — "use strict"ПеременныеТипы данныхПреобразование типовОператорыОператоры сравненияВзаимодействие: alert, prompt, confirmУсловные операторы: if, '?'Логические операторыЦиклы while и forКонструкция "switch"ФункцииFunction Expression и функции-стрелкиОсобенности JavaScript
Отладка в браузере ChromeСоветы по стилю кодаКомментарииНиндзя-кодАвтоматическое тестирование c использованием фреймворка MochaПолифилы
ОбъектыСборка мусораТип данных SymbolМетоды объекта, "this"Преобразование объектов в примитивыКонструкторы, создание объектов через "new"
Методы у примитивовЧислаСтрокиМассивыМетоды массивовПеребираемые объектыMap и SetWeakMap и WeakSetObject.keys, values, entriesДеструктурирующее присваиваниеДата и времяФормат JSON, метод toJSONПродвинутая работа с функциями
Остаточные параметры и оператор расширенияЗамыканиеУстаревшее ключевое слово "var"Глобальный объектОбъект функции, NFEСинтаксис "new Function"Планирование: setTimeout and setIntervalДекораторы и переадресация вызова, сall/applyПривязка контекста к функцииПовторяем стрелочные функции
Свойства объекта, их конфигурацияПрототипы, наследованиеПрототипное наследованиеF.prototypeВстроенные прототипыМетоды прототипов, объекты без свойства __proto__
Класс: базовый синтаксисНаследование классовСтатические свойства и методыПриватные и защищённые методы и свойстваРасширение встроенных классовПроверка класса: "instanceof"Примеси
Обработка ошибокВведение: колбэкиПромисыЦепочка промисовПромисы: обработка ошибокPromise APIПромисификацияМикрозадачиAsync/await
-
Задача Morse-decoder
-
Задача brackets
-
Задача zeros
-
Задача expression-calculator
-
Задача multiply
-
Задача tic-tac-toe
-
Задача guession-game
-
Задача finite-state-machine
-
Задача double-linked-list
-
Задача js-edu
-
Задача priority-queue
-
Задача tic-tac-toe
-
Язык программирования JavaScript. Часть 3 на learn.javascript.ru
FetchFormDataFetch: ход загрузкиFetch: прерывание запросаFetch: запросы на другие сайтыFetch APIОбъекты URLXMLHttpRequestВозобновляемая загрузка файловДлинные опросыWebSocketServer Sent Events
Введение: шаблоны и флагиСимвольные классыЮникод: флаг "u" и класс \p{...}Якоря: начало строки ^ и конец $Многострочный режим якорей ^ $, флаг "m"Граница слова: \bЭкранирование, специальные символыНаборы и диапазоны [...]Квантификаторы +, *, ? и {n}Жадные и ленивые квантификаторыСкобочные группыОбратные ссылки в шаблоне: \N и \k<имя>Альтернация (или) |Опережающие и ретроспективные проверкиКатастрофический возвратПоиск на заданной позиции, флаг "y"Методы RegExp и String
С орбитальной высотыПользовательские элементы (Custom Elements)Shadow DOMЭлемент "template"Слоты теневого DOM, композицияНастройка стилей теневого DOMТеневой DOM и события
CSS для JavaScript-разработчикаО чём пойдёт речьЕдиницы измерения: px, em, rem и другиеВсе значения свойства displayСвойство floatСвойство positionЦентрирование горизонтальное и вертикальноеСвойства font-size и line-heightСвойство white-spaceСвойство outlineСвойство box-sizingСвойство marginЛишнее место под IMGСвойство overflowОсобенности свойства height в %Знаете ли вы селекторы?CSS-спрайтыПравила форматирования CSS
-
React from Bob Ziroll [https://scrimba.com/g/glearnreact]
01. Course Introduction & Learning Philosophy02. What we'll be building03. OUT NOW: The React Bootcamp04. Why use React05. ReactDOM & JSX06. ReactDOM & JSX Practice07. React Functional Components08. React Functional Components Practice09. OUT NOW: The React Bootcamp10. Move Components into Separate Files11. React Parent/Child Components12. React Parent/Child Component Practice13. React Todo App - Phase14. Styling React with CSS Classes15. Some Caveats16. JSX to JavaScript and Back17. React Inline Styles with the Style Property18. React Todo App - Phase 219. React Props Part 1: Understanding the Concept20. React Props Part 2: Reusable Components21. React Props22. React Props and Styling Practice23. Mapping Components in React24. Mapping Components Practice25. React Todo App: Phase 326. Class-based Components27. Class-based Components Practice28. React State29. React State Practice30. React State Practice31. React Todo App: Phase32. Handling Events in React33. React Todo App: Phase 534. React setState: Changing the State35. React Todo App: Phase 636. React Todo App: Phase 6.137. React Lifecycle Methods Part 138. React Lifecycle Methods Part 239. Lifecycle Methods Part 3 - componentDidUpdate40. React Conditional Render41. React Conditional Render Part 242. React Conditional Render Practice43. React Todo App: Phase 744. Fetching data from an API with React45. React Forms Part 146. React Form Part 247. React Form Practice48. React Container & Component Architecture49. React Meme Generator Capstone Project50. Writing Modern React Apps51. Hooks Intro1:4452. useState() Part 1 - Creating State7:1853. useState() Part 2 - Changing State7:4554. useEffect() Part 18:0155. useEffect() Part 210:1656. React Project Ideas for Practicing0:4357. Conclusion - React Tutorial -
Задания в школе RSSchool 2019Q3 2-stage
-
codewars
-
codejam-image-api
-
codejam-palette
-
portfolio
-
repair-design-project
-
theyallow
-
codejam-virtual-keyboard
-
fancy-weather
-
CoreJS 100 задача
-
Interview-coreJS https://github.com/rolling-scopes-school/tasks/blob/master/tasks/interview-corejs.md
-
piskel animation
-
-
React+Redux from RSSchool mentor https://www.youtube.com/playlist?list=PLNkWIWHIRwME_Gv2vlWAR6TfeSXylYfw4
React & Redux #0 Введение в курс (Introduction)React & Redux #1 Плагины и окружение (Plugins & Environment)React & Redux #2 Компоненты (Components)React & Redux #3 Локальный стейт (State)React & Redux #4 Пропсы и их валидация (Props & PropTypes. Part I)React & Redux #5 Пропсы и их валидация (Props & PropTypes. Part II)React & Redux #6 События (Handling Events)React & Redux #7 Условный рендеринг (Conditional Rendering)React & Redux #8 Списки и ключи (Lists & keys)React & Redux #9 Фрагменты и стили (Fragments & CSS)React & Redux #10 Формы (Forms)React & Redux #11 Методы жизненного цикла (Lifecycle methods)React & Redux #12 Ссылки (Refs)React & Redux #13 Компоненты высшего порядка (High Order Components)React & Redux #14 Порталы (Portals)React & Redux #15 Контекст (Context)React & Redux #16 Работа с реальным API (React: work with API. Part I)React & Redux #17 Работа с реальным API (React: work with API. Part II)React & Redux #18 Роутер (React router. Part I)React & Redux #19 Роутер (React router. Part II)React & Redux #20 Введение в Редакс (Redux Introduction)React & Redux #21 Приложение и Редакс модули (Application & Redux - modules)React & Redux #22 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part I)React & Redux #23 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part II)React & Redux #24 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part III)React & Redux #25 Анимации (React Animations) -
Сверстать себе портфолио на react.
1. нарисовать, хотя бы на бумажке, расположение компонентов2. сделать SPA -
[Юрий Бура] React + Redux - Профессиональная Разработка (2019)
очень хвалят
-
1. Введение
-
2. ECMAScript 2019
-
3. Основы React
-
4. Состояние компонентов и обработка событий
-
5. Заканчиваем Todo App
-
6. Работа с сервером
-
7. Жизненный цикл компонентов
-
8. Паттерны React
-
9. React Hooks
-
10. React Router
-
11. Redux
-
12. Разработка Redux приложения
-
13. Сборка React приложений - Babel
-
14. Сборка React приложений - WebPack
-
-
Gatsby https://www.gatsbyjs.org/tutorial/
Introduction0. Set Up Your Development Environment1. Get to Know Gatsby Building Blocks2. Introduction to Styling in Gatsby3. Creating Nested Layout Components4. Data in Gatsby5. Source Plugins and Rendering Queried Data6. Transformer Plugins7. Programmatically Create Pages from Data8. Preparing a Site to Go Live
-
Просмотреть видео-урок https://www.youtube.com/watch?v=8t0vNu2fCCM
-
Typescript
-
RSSchool react-2020-Q1 Задания
-
Songbird https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird.md
-
Culture portal https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codejam-culture-portal.md
-
DataGrid https://github.com/cardamo/tasks/blob/patch-1/tasks/datagrid.md
-
-
Material-UI
для задания школы RSSchool
Использована в https://belarus-writers.netlify.com/
-
NodeJS from RSSchool 2020Q1
-
Task 1. Caesar cipher CLI tool
-
Task 2. Express REST service
-
Task 3. Logging & Error Handling
-
Task 4. Database MongoDB
-
Task 5 Authentication and JWT
-
-
React. официальная документация
Основные понятия1. Привет, мир2. Знакомство с JSX3. Рендеринг элементов4. Компоненты и пропсы5. Состояние и жизненный цикл6. Обработка событий7. Условный рендеринг8. Списки и ключи9. Формы10. Подъём состояния11. Композиция против наследования12. Философия React
Продвинутые темы
Доступность контентаРазделение кодаКонтекстПредохранителиПеренаправление рефовФрагментыКомпоненты высшего порядкаВзаимодействие со сторонними библиотекамиJSX в деталяхОптимизация производительностиПорталыAPI для компонента ProfilerReact без ES6React без JSXСогласованиеРефы и DOMРендер-пропсыСтатическая типизацияСтрогий режимПроверка типов с помощью PropTypesНеуправляемые компонентыВеб-компоненты
FAQ -
Angular. Oficial documentation. Getting started
-
Setup
-
Angular concepts
-
Angular Glossary
-
Try it
-
Tutorial: Tour of Heroes
-
-
FreeCodeCamp. Front End Libraries Certification. Получу сертификат
BootstrapjQuerySassReactReduxReact and Redux
- 11070
- 12 mayo 2019, 15:50
¡No omita entradas nuevas!
Suscríbase al objetivo y siga su logro