Навигатор по каналу.
Приветствую всех, кто читает этот канал. Решил для Вашего удобства создать небольшой путеводитель по каналу. Периодически буду добавлять информацию в данное сообщение.
О канале
План обучения на 2019г
Инструкция, как я учусь
Изучение HTML
Изучение CSS (Анализ после прохождения тут👈)
Изучение JavaScript:
- этап 3.1. (Анализ тут и финальный тут👈)
- этап 3.2. - DOM
- этап 3.3. - практика
Изучение React
- этап 4.1 - теория+практика
- этап 4.1.1. - промежуточный этап
Собеседование
- результаты
✅Мой дипломный проект
Полезные материалы из канала:
Сборник задач
Учим английский
Чат канала
PSD Шаблоны
Так же вы можете найти интересующую информацию по следующим хештегам:
#html, #css, #js
#собеседование - тут все понятно
#диплом - подробно о моей практике
#план - планирование и самоконтроль
#lifehack #лайфхак, #soft, #book
#задача - тесты, задачи
#ts #react #vue #angular #node #linux #юмор - 😅
Приветствую всех, кто читает этот канал. Решил для Вашего удобства создать небольшой путеводитель по каналу. Периодически буду добавлять информацию в данное сообщение.
О канале
План обучения на 2019г
Инструкция, как я учусь
Изучение HTML
Изучение CSS (Анализ после прохождения тут👈)
Изучение JavaScript:
- этап 3.1. (Анализ тут и финальный тут👈)
- этап 3.2. - DOM
- этап 3.3. - практика
Изучение React
- этап 4.1 - теория+практика
- этап 4.1.1. - промежуточный этап
Собеседование
- результаты
✅Мой дипломный проект
Полезные материалы из канала:
Сборник задач
Учим английский
Чат канала
PSD Шаблоны
Так же вы можете найти интересующую информацию по следующим хештегам:
#html, #css, #js
#собеседование - тут все понятно
#диплом - подробно о моей практике
#план - планирование и самоконтроль
#lifehack #лайфхак, #soft, #book
#задача - тесты, задачи
#ts #react #vue #angular #node #linux #юмор - 😅
✅ Task1.
Провели первую видео-конференцию нашей маленькой команды через Skype.
Наставник создал репозиторий и подключил нас к нему.
📝 Моё домашнее з/д - создать форму входа/регистрации, чтобы можно было начинать наглядно работать с Firebase Realtime Database.
Там же мне нужно подключить эту базу к HTML.
🚀Поехали🚀
#диплом
Провели первую видео-конференцию нашей маленькой команды через Skype.
Наставник создал репозиторий и подключил нас к нему.
📝 Моё домашнее з/д - создать форму входа/регистрации, чтобы можно было начинать наглядно работать с Firebase Realtime Database.
Там же мне нужно подключить эту базу к HTML.
🚀Поехали🚀
#диплом
✅ Task2.
2.1. Создать в HTML простую форму входа/регистрации. Чтобы можно было работать с базой даных. Прикреплюя свой вариант для примера (я сейчас на Task5 и вижу - с формой можно было не заморачиваться, сделать просто 2 поля: login, password. Без оформления, "табов" и тд. Единственное - я создавал его отдельной страницей, а потом сделал модельным окном на index.html).
2.2. Так же, при входе в базе данных сооздается ветка "presence" и "users". Первая для статуса, вторая потом будет базой всех пользователей. Скрин примера прикрепляю
🚀Поехали🚀
#диплом
2.1. Создать в HTML простую форму входа/регистрации. Чтобы можно было работать с базой даных. Прикреплюя свой вариант для примера (я сейчас на Task5 и вижу - с формой можно было не заморачиваться, сделать просто 2 поля: login, password. Без оформления, "табов" и тд. Единственное - я создавал его отдельной страницей, а потом сделал модельным окном на index.html).
2.2. Так же, при входе в базе данных сооздается ветка "presence" и "users". Первая для статуса, вторая потом будет базой всех пользователей. Скрин примера прикрепляю
🚀Поехали🚀
#диплом
✅ Task3.
Теперь на нашу ветку /presence поставить "прослушку". Т.е. когда будет заходить (выходить) новый пользователь, мы выводим (пока в console.log) сообщение. В нем указываем имя этого пользователя и сообщение, что он зашёл в чат (или вышел).
🚀Поехали🚀
#диплом
Теперь на нашу ветку /presence поставить "прослушку". Т.е. когда будет заходить (выходить) новый пользователь, мы выводим (пока в console.log) сообщение. В нем указываем имя этого пользователя и сообщение, что он зашёл в чат (или вышел).
🚀Поехали🚀
#диплом
✅ Task4.
Необходимо создать UserCard - куда будут добавлять вошедшие в чат пользователи и удаляться вышедшие. Т.е. видим кто из пользователей онлайн.
З.Ы. Осталось несколько шагов до бета-версии моего чата!!
🚀Поехали🚀
#диплом
Необходимо создать UserCard - куда будут добавлять вошедшие в чат пользователи и удаляться вышедшие. Т.е. видим кто из пользователей онлайн.
З.Ы. Осталось несколько шагов до бета-версии моего чата!!
🚀Поехали🚀
#диплом
✅ Task5.
Осталось совсем немного, что бы базовый функционал чата заработал.
5.1. Создаём в базе новую ветку chats в которой будут храниться сообщения пользователей.
Структуру всех веток базы прикреплю к этому сообщению, что бы вам было наглядно.
5.2. Создаем в разметке работу с сообщениями. Добавляем нужные компоненты и "прикручиваем" функционал для добавления сообщений из базы в DOM компоненты.
При этом, сообщение сначала отправляется пользователем в RealTime DataBase, потом мы его отправляем в локальную базу и уже из нее рендерим в DOM.
После этого уже будет рабочий чат. Если будет время - попробую снять видео по этим 5 этапам или хотя бы показать результат и выложить код. Кому это интересно - ставим 👍
🚀Поехали🚀
#диплом
Осталось совсем немного, что бы базовый функционал чата заработал.
5.1. Создаём в базе новую ветку chats в которой будут храниться сообщения пользователей.
Структуру всех веток базы прикреплю к этому сообщению, что бы вам было наглядно.
5.2. Создаем в разметке работу с сообщениями. Добавляем нужные компоненты и "прикручиваем" функционал для добавления сообщений из базы в DOM компоненты.
При этом, сообщение сначала отправляется пользователем в RealTime DataBase, потом мы его отправляем в локальную базу и уже из нее рендерим в DOM.
После этого уже будет рабочий чат. Если будет время - попробую снять видео по этим 5 этапам или хотя бы показать результат и выложить код. Кому это интересно - ставим 👍
🚀Поехали🚀
#диплом
✅ Task6.
Создать функцию для регистрации новых пользователей.
Обязательно проверку на уникальность nickName(он же login). Для этого создаём локальную базу пользователей (берём ее из realtimeDatabase) и с ней сверяемся.
Подобную проверку прикрутить к нашей функции на обычный вход пользователей (там проверка соответствия логина и пароля.
🚀Поехали🚀
#диплом
Создать функцию для регистрации новых пользователей.
Обязательно проверку на уникальность nickName(он же login). Для этого создаём локальную базу пользователей (берём ее из realtimeDatabase) и с ней сверяемся.
Подобную проверку прикрутить к нашей функции на обычный вход пользователей (там проверка соответствия логина и пароля.
🚀Поехали🚀
#диплом
Всем привет! 🖖
Я никуда не пропал, просто вернувшись с отдыха никак не могу войти в нормальное русло 🤪 Итак, погнали дальше пилить дипломный проект - после которого я планирую начинать искать работу. Кстати, я почти закончил его - скоро приступлю к его исполнению на React.
✅ Task 6-7-8.
Создаем "прелоадер" - заставка, которая пропадает, когда загружен весь необходимый функционал для работы программы. Используем DOMContentLoaded.
Переделываем компонент "Контакты" - решил, что при входе пользователь должен видеть всех участников чата (берем из локальной базы), иначе будущие работодатели, при просмотре программы будут видеть пустой список пользователей.
В этом списке контактов сразу сделать отображение статуса пользователя - online или offline.
Прикрепляю скрин, как это у меня смотрится (красоту не наводил и пока не планирую даже, главное функционал).
🚀Поехали🚀
#диплом
Я никуда не пропал, просто вернувшись с отдыха никак не могу войти в нормальное русло 🤪 Итак, погнали дальше пилить дипломный проект - после которого я планирую начинать искать работу. Кстати, я почти закончил его - скоро приступлю к его исполнению на React.
✅ Task 6-7-8.
Создаем "прелоадер" - заставка, которая пропадает, когда загружен весь необходимый функционал для работы программы. Используем DOMContentLoaded.
Переделываем компонент "Контакты" - решил, что при входе пользователь должен видеть всех участников чата (берем из локальной базы), иначе будущие работодатели, при просмотре программы будут видеть пустой список пользователей.
В этом списке контактов сразу сделать отображение статуса пользователя - online или offline.
Прикрепляю скрин, как это у меня смотрится (красоту не наводил и пока не планирую даже, главное функционал).
🚀Поехали🚀
#диплом
Всем привет!
Как и обещал - выкладываю в канал первую серьезную программу, которую я написал сам! React messenger.
Как я уже говорил, цель этого проекта - при устройстве на работу показать работодателю, что я могу. Ведь, без опыта очень сложно устроиться, а когда у тебя есть проекты, которые можно показать - процесс трудоустройства пойдет полегче. Проект оказался не маленьким - около 100файлов!!! Версия на javascript была гораздо попроще)))
Не судите строго, дизайнер с меня совсем никакой, но задача была создать работающий в реальном времени чат. Базовая версия готова - дальше можно усложнять и развивать ее.
В ближайшие дни, я выложу в канале ссылку на код - любой может воспользоваться и написать себе подобное приложение, либо переделать мое!
зы Если найдете баги, либо просто хотите спросить или прокомментировать - пишите в наш чат. На дизайн не смотрим 🤪
ззы Ссылка будет работать только 30 дней - к сожалению, пока нет нормального хостинга
#react #js #диплом
Как и обещал - выкладываю в канал первую серьезную программу, которую я написал сам! React messenger.
Как я уже говорил, цель этого проекта - при устройстве на работу показать работодателю, что я могу. Ведь, без опыта очень сложно устроиться, а когда у тебя есть проекты, которые можно показать - процесс трудоустройства пойдет полегче. Проект оказался не маленьким - около 100файлов!!! Версия на javascript была гораздо попроще)))
Не судите строго, дизайнер с меня совсем никакой, но задача была создать работающий в реальном времени чат. Базовая версия готова - дальше можно усложнять и развивать ее.
В ближайшие дни, я выложу в канале ссылку на код - любой может воспользоваться и написать себе подобное приложение, либо переделать мое!
зы Если найдете баги, либо просто хотите спросить или прокомментировать - пишите в наш чат. На дизайн не смотрим 🤪
ззы Ссылка будет работать только 30 дней - к сожалению, пока нет нормального хостинга
#react #js #диплом
Всем привет!
Последние дни пишу редко, тк готовлюсь к собеседованиям. После того как я обновил дизайн чата и поправил мелкие ошибки, я опубликовал резюме.
Практика показала, что никому оно особо не нужно - видя что разработчик начинающий, присылают предложение пройти тестовое, а потом уже разговаривать (если повезет😅).
Тестовые задания далеко не самые простые, несколько я скидывал в наш чат.
Решил отложить подготовку к собеседованиям и сделать некоторые тестовые. Скажу честно - вакансия на джуна была только 1 в моем городе, поэтому я отправлял резюме на позиции мидлов.
Если вас интересуют тестовые и мои варианты решение (тех, что возьмусь делать), могу потом опубликовать.
Как немного освобожусь - напишу несколько больших статей: подготовка к собеседованию, правильное портфолио, резюме и тп. Есть много интересных мыслей и материалов.
#собеседование #диплом #план
Последние дни пишу редко, тк готовлюсь к собеседованиям. После того как я обновил дизайн чата и поправил мелкие ошибки, я опубликовал резюме.
Практика показала, что никому оно особо не нужно - видя что разработчик начинающий, присылают предложение пройти тестовое, а потом уже разговаривать (если повезет😅).
Тестовые задания далеко не самые простые, несколько я скидывал в наш чат.
Решил отложить подготовку к собеседованиям и сделать некоторые тестовые. Скажу честно - вакансия на джуна была только 1 в моем городе, поэтому я отправлял резюме на позиции мидлов.
Если вас интересуют тестовые и мои варианты решение (тех, что возьмусь делать), могу потом опубликовать.
Как немного освобожусь - напишу несколько больших статей: подготовка к собеседованию, правильное портфолио, резюме и тп. Есть много интересных мыслей и материалов.
#собеседование #диплом #план
Всем привет!!!
Как и обещал, выкладываю полный код моего первого крупного самостоятельного проекта на ReactJS - Kitty chat
Конечно, сейчас бы я уже многое там оптимизировал - но для первого проекта считаю круто вышло, как минимум, все работает 🤣
Единственное, позволю себе рекомендацию - не стоит делать для портфолио такие проекты, если вы только изучаете front-end. Он займет очень много времени, и сил. И не факт, что доведете до ума. Я бы рекомендовал сделать 5 - 10 небольших проектов.
Это даст больше опыта в различных направлениях, гарантирует, что вы доведете эти проекты до конца, а если и бросите - небольшая потеря времени.
Практика показала - никто особо не будет изучать такой проект в вашем резюме. Большее впечатление произведет список из 5 - 10 предложенных в портфолио работ. Тем более небольшие проекты проще "вылизать" чуть не до идеала!
Всем удачи, скоро напишу материал по подготовке к собеседованиям.
#js #диплом
Как и обещал, выкладываю полный код моего первого крупного самостоятельного проекта на ReactJS - Kitty chat
Конечно, сейчас бы я уже многое там оптимизировал - но для первого проекта считаю круто вышло, как минимум, все работает 🤣
Единственное, позволю себе рекомендацию - не стоит делать для портфолио такие проекты, если вы только изучаете front-end. Он займет очень много времени, и сил. И не факт, что доведете до ума. Я бы рекомендовал сделать 5 - 10 небольших проектов.
Это даст больше опыта в различных направлениях, гарантирует, что вы доведете эти проекты до конца, а если и бросите - небольшая потеря времени.
Практика показала - никто особо не будет изучать такой проект в вашем резюме. Большее впечатление произведет список из 5 - 10 предложенных в портфолио работ. Тем более небольшие проекты проще "вылизать" чуть не до идеала!
Всем удачи, скоро напишу материал по подготовке к собеседованиям.
#js #диплом
