Стать frontend-программистом и найти удаленную работу
Я IT-шник с профильным образованием, много знала и писала, но ушла в SAP ERP. Жизненные обстоятельства требуют работы удаленно или фриланс. Мой опыт в SAP не дает такой возможности, а работать хочется. Решила снова уйти в программирование, но технологии убежали далеко вперед, теперь все заново. Было принято решение изучить (вспомнить) frontend-разработку, найти работу и постепенно уйти в backend.
На самом деле верстка не так мне интересна, но влиться после большого перерыва с ней будет легче.
Так что эта цель посвящена изучению HTML5, CSS3, JS и сопутствующим технологиям. Из практики - реализовать несколько сайтов для портфолио.
1. Изучение верстки.
2. Изучение Git
2. Практика верстки.
3. Изучение и практика JavaScript.
Goal Accomplishment Criteria
Изучила все , что необходимо и устроилась на работу удаленно
Personal resources
Знания и навыки, время есть, но ограничено пока
Goal ecological compatibility
Я хочу быть занята, иметь свои деньги, достижение зависит от меня. Уделяя даже пару часов, я буду двигаться дальше.
-
Изучить Git (систему контроля версий).
Цель - уверенное владение Git.
-
Курс на https://githowto.com/ru
-
Индексация
-
Коммиты
-
Мерж веток
-
Просмотр изменений между коммитами или между ветками
-
Разрешение конфликтов
-
Клонирование репозиториев
-
Подключение нескольких удалённых репозиториев
-
-
Изучение HTML/CSS
Цель этапа - уверенные знания вёрстки с HTML и CSS.
-
Курс HTML на https://ru.code-basics.com/
-
Основы современной вёрстки https://ru.hexlet.io/courses/layout-designer-basics/
-
Курс RS-school 2020-2021 пройден
-
Книга «HTML и CSS. Разработка и дизайн веб-сайтов» Джон Дакетт
-
Книга «Новая большая книга CSS» Дэвид Макфарланд
-
https://developer.mozilla.org/ru/docs/Web/HTML
-
-
Практика верстки
Сверстать много макетов.
На данный момент сверстала парочку по видео, свой сайтик - резюме для RSS.
-
Сверстать WEBDEV для RSS и пройти кросс-чек
-
Вёрстка проект Shelter для rss
-
Моментум для rss-вёрстка
-
Верстка макета к English for kids RSS
-
Верстка Пятнашек RSS
-
Сайт для брата - сверстать по приличному дизайну , выкупить домен и найти недорогой хостинг
-
-
Изучение JavaScript и практика
Уверенные знания самого языка JavaScript
-
https://ru.code-basics.com/languages/javascript
-
Каты из RSS: https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codewars-stage-1.md
-
Calculator для RSscool - понять,изменить,пройти кросс-чек
-
Алгоритмические задачи для rss
-
Виртуальная клавиатура для rss
-
Несколько отдельных задач - тасков для rss
-
Игра пятнашки RSS
-
Пройти этап 1 курса RSS
-
Алгоритмические задачи этап 2 для RSS
-
English For Kids для RSS
-
Covid - task Rss
-
Пройти этап 2курса RSS
-
доделать DOM к Shelter
-
«JavaScript. Сильные стороны.» Д.Крокфорд
-
«Секреты JavaScript ниндзя» Дж.Резиг, Беэр Бибо
-
«JavaScript. Подробное руководство» Д.Флэнаган
-
Watch and Code
-
-
Практика JS
Тут конкретное задание:
Задание заключается в написании плагина для jQuery
- Базовые навыки проектирования (ООП, вариации MVC-архитектуры, разделение ответственности).
- Навыки по созданию удобных библиотек с удобным API (интерфейсом использования для других разработчиков).
- Навыки разделения конфигурирования и бизнес-логики.
- Умение документировать свой продукт (описывать заложенную архитектуру, визуализировать её через UML-диаграммы).
- Навыки автоматического unit-тестирования (включая TDD).
-
HTML, CSS. Responsive Web Design от https://freecodecamp.org
-
Basic HTML and HTML5
-
Basic CSS
-
Applied Visual Design
-
Applied Accessibility
-
Responsive Web Design Principles
-
CSS Flexbox
-
CSS Grid
-
Build a Tribute Page
-
Build a Survey Form
-
Build a Product Landing Page
-
Build a Technical Documentation Page
-
Build a Personal Portfolio Webpage
-
-
Front End Development Libraries freecodecamp
-
Bootstrap
-
jQuery
-
Sass
-
-
Язык программирования JavaScript. Часть 1 на learn.javascript.ru
-
Введение
-
Основы JavaScript
-
Качество кода
-
Объекты: основы
-
Типы данных
-
Продвинутая работа с функциями
-
Свойства объекта, их конфигурация
-
Прототипы, наследование
-
Классы
-
Обработка ошибок
-
Промисы, async/await
-
Генераторы, продвинутая итерация
-
Модули
-
Разное
-
-
Язык программирования JavaScript. Часть 2 на learn.javascript.ru
-
Документ
-
Введение в события
-
Интерфейсные события
-
Формы, элементы управления
-
Загрузка документа и ресурсов
-
Разное
-
-
learn.javascript.ru ЧАСТЬ 3 Тематические разделы
-
Фреймы и окна
-
Бинарные данные и файлы
-
Сетевые запросы
-
Хранение данных в браузере
-
Анимация
-
Веб-компоненты
-
Регулярные выражения
-
CSS для JavaScript-разработчика
-
-
React
Распишу подробнее позже
-
NODE.JS от RSSchool
в мае 2021 года
-
Последний этап в MetaLAMP-обучении
Общий проект на REACT, код-ревью и собеседование. Обещают сразу взять на работу. Пока поставлю на эту компанию.
-
Рефакторинг,код-ревью,собеседования
Сюда попадут собеседования. Итог-найти работу.
-
Пройти собеседование с ментором на курсе от RSS
-
Итоговое техническое собеседование на курсе от RSS
-
Собеседование в MetaLamp
-
-
METALAMP :Задание Практика верстки
Требования к верстке:
- Вся вёрстка должна быть выложена на Github в ваш публичный репозиторий, результатом задачи будет как раз этот репозиторий. Под каждый проект создаём новый репозиторий. Присылать ссылку на него необязательно, это можно будет сделать только в пятом задании в личные сообщения организатору.
- Ссылку на Github Pages добавить в Readme проекта, чтобы мы при проверке могли быстро перейти к самой вёрстке.
- С начала работы коммиты в репозиторий делать как можно чаще, минимум раз в день, когда было что-то сделано, а лучше чаще (для каждого нового блока). Не надо копить многодневную работу и сваливать это одним коммитом, для таких вещей лучше использовать ветки. Не бойтесь незаконченные изменения коммитить, в этом нет ничего страшного.
- Все коммиты должны иметь осмысленные названия.
- Ориентироваться на последние версии Chrome и Firefox. На Safari и старые IE можно забить для этих заданий Все отступы и размеры элементов должны быть соблюдены, для этого во время работы используйте расширениеPerfectPixel.
- Аналог PerfectPixel (для Firefox) - Pixel Perfect Pro для Firefox
- Все шрифты должны быть подключены и сгенерированы в форматах .ttf, .woff, .svg
- Количество картинок должно быть минимальным: если элемент состоит из текста, он должен быть текстовым, если элемент — это просто круг, сделать его чистым css, без картинок. Да(здесь примеры чем responsive отличается от adaptive и liquid). Можно максимальной ширину сделать 1920, а минимальной 320
- Не использовать фреймворки для создания раскладки страницы, такие как, например, bootstrap. Это, с одной стороны, важно для нашего понимания того, что вы владеете техниками создания раскладки страницы, а с другой, будет полезно вам, так как поможет углубить ваши знания в html и css, и, также, научит решать боевые задачи связанные с созданием раскладки.
- Компонентность. В стандартах будет требоваться использование БЭМ
- Использовать в макетах препроцессоры по максимуму. Вам в любом случае надо будет это сделать для соблюдения предыдущего требования про компонентность, импорты и вставки компонентов друг в друга вы на сыром HTML не сделаете
- Небольшие расхождения в PerfectPixel допускаются в местах, где есть неточности в макете (пример: разная ширина у одинаковых блоков).
- Макет был подобран так, чтобы вы явно почувствовали типичную проблему верстки — когда есть несколько (от 3-х до 100) страниц верстки, в которых используются часто похожие (совсем похожие или с небольшими отличиями) блоки.
- UI-Kit — это единый макет дизайна и единая страница верстки, с которой берут типовые блоки и используют в конечных страницах. На страницах UI-Kit responsive не требуется.
- В этом задании вам нужно сверстать все элементы из макета, разбив на компоненты. То есть прямо по макету накидать на одной странице все компоненты.
-
UI-KIT 1
-
UI-KIT 2
-
UI-KIT 3
-
UI-KIT 4
-
Сам сайт
-
Стажировка
Прохожу стажировку успешно и получаю работу!
-
Месяц 1 стажировки.
-
Месяц 2 стажировки
-
Месяц 3 стажировки - практика на реальном проекте
-
Месяц 4 стажировки - практика на реальном проекте
-
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
