Size: a a a

Step by Step for Web

2018 May 05
Step by Step for Web
Привет, дорогой друг. Я слоупочный работяга с завода, который решил изменить свою жизнь и вкатиться в IT, веб разработку и frontend в частности. Дмитрий. 29 лет.

На данный момент драгоценное время трачу на работе и имею посредственную зарплату.
К тому же влез в долги.
Итог - сплошные проблемы.

Всю жизнь прожигал как-то и не думал о будущем особо. Зависал в соцсетях, youtube, играл до посинения. Так Айти сфера прошла мимо меня. Хотя она всегда привлекала.

И фактически я ничего толком не умею. Что то читал, с чем то знаком. Но это все не серьёзно.

Собственно зачем я начал этот блог?

- Чтобы писать сюда о том что я учу, что делаю.

- Так же блог поможет развить дисциплину и бороться с ленью

- Поможет найти новые знакомства и сотрудничество

- Для развития писательских способностей. Для разработчика важно хорошо выражать свои мысли

Цели общие:
- Работать веб разработчиком на upWork
- Получать удовольствие от своей работы

Проблемы, борьба с самим собой и развитие. Все это будет на канале в реальном времени.
Начинаю свой путь к успеху от лодыря и слесаря на заводе до успешного веб разработчика.

Вперёд!
Шаг за шагом!
Step by Step for Web!

🤔👍
источник
2018 May 07
Step by Step for Web
Cегодня поговорим про ресурсы и материалы, которые я буду использовать в ближайшее время для изучения.

-----------------------------

По многочисленным советам и анализу выбрал хороший сайт для обучения

https://www.freecodecamp.org

Разработчики этого сайта дают отличную возможность изучать современные технологии в режиме интерактивных заданий. После заданий можно получить сертификат.

Для начала освою блок FrontEnd Development.
Он включает HTML5, CSS, Bootstrap, jQuery, JavaScript, Алгоритмы. Также несколько практических работ.

Еще мне очень понравилось компьюнити, большой форум, чат, где можно задать вопрос и пообщаться со всем миром. Да именно так, сайт на английском языке.
Поэтому тусовка международная. Но это даже очень интересно и полезно.

И самое главное тут можно найти opensource проект и поучастовать в нем. Так же есть возможность сделать работу для какой-нибудь некоммерческой организации.
Это будет отличный опыт и возможность поработаь на портфолио

И еще один сайт с занимательными задачами для освоения верстки это:

https://htmlacademy.ru/

Там есть бесплатные блоки и блоки за подписку. Я возьму подписку на пару месяцев

Видео курсы:
- Web разработчик от Артема Исламова
- Базовый интенсив от HTML Academy

Книги:
- "Изучаем программирование на JavaScript" Эрик Фримен, Элизабет Робсон
- http://learn.javascript.ru/ - это сайт с информацией о JS от Ильи Кантора

Материалов по изучению накопил очень много. Но не все сразу. Шаг за шагом на пути во фронтенд

========================
Про важность английского языка, напишу в следующих постах. А так же как я вырабатывал привычку.
источник
2018 May 09
Step by Step for Web
Всем добра и позитива сегодня.
Пробежимся по намеченному плану. Что изучал:

=======================
1) freecodecamp

 Остановился на блоке HTML5 and CSS
Основы основ, довольно таки скучно пока. Но пробежать по всем пунктам нужно

2) htmlacademy курсы

Пока ничего не выполнял

3) Курс Веб-разработчик

Проработал 10 уроков.

Проработанные темы:
- Инструментарий
(Sublime Text, плагины)

- Прототипирование сайтов (ninjamock.com, conceptdraw.com, mockflow.com, gomockingbird.com, mockupbuilder.com )

- Работа с Photoshop (нарезка графики и создание экшенов для быстрой работы)

- Настройка автообновления браузера с помощью browsersync

- Текст, изображения, ссылки (основы html)

- bootstrap 3, сетка, организация колоночной верстки

- позиционирование, отступы, шрифты

4) Курс Базовый интенсив HTMLAcademy

Пока не начинал

5) learn.javascript.ru

Пока не начинал

6) JS из серии Head First

Пока не начинал
источник
2018 May 13
Step by Step for Web
Привет, дорогой друг! 😊🤚

Расскажу о проблемах последних двух дней.

Начал разбираться с инструментарием фррнтендера.

node.js, npm, gulp

Собственно столкнулся с проблемой установки, обновления определённых версий node, npm, gulp.

Гугл выдавал статьи с командами для консоли, но в ответ моя консоль общалась со мной только варнингами.

Неприятный момент, когда настроился на работу, а инструменты отказываются правильно работать.😫

Но какое необычайное чувство удовлетворения и гордости ощущаешь, когда проблема решена 🤩

Так же настроил сервер
browsersync для автоперезагрузки страниц в браузере, при изменении исходников.

Это здорово!😍

Борюсь с пристумами лени. И отвлекающими факторами.

Когда случается сложная задача, где надо хорошо подумать и разобраться, мозг всячески пытается отлынивать, сохранить свою энергию.

Что ж. Продолжаем осваивать технологии. Шаг за шагом. Step by Step for Web
источник
2018 May 17
Step by Step for Web
Привет, дорогой друг!

🍅🍅🍅🍅🍅🍅🍅🍅🍅

Сегодня поговорим об усталости и организации своего времени.

⏰⏰⏰⏰⏰⏰⏰⏰⏰

Проблема, с которой я столкнулся в начале недели - это дикое желание поспать.

Заниматься очень тяжело и почти невозможно. Просто хочется завалиться в кровать и всё тут.

После работы просто отсыпался или просто лежал в полудреме. Не подходил к компьютеру, ничего не делал.

Почему я не высыпаюсь?

Потому что много отвлекаюсь во время обучения. Это приводит к увеличению затраченного времени на задачи и засиживанию до глубокой ночи. А утром рано на работу. Так накапливается усталость.

Для организации эффективного обучения я должен придерживаться высокой концентрации внимания и с выстраиванием приоритетов задач.

Для концентрации внимания решил использовать метод Pomodoro!

Что это за метод такой?

Это метод тайм менеджмента. То есть эффективное управление своим временем.

Отрезки времени, на которые делится работа, условно называются помидорами. Один «помидор» длится 30 минут: 25 минут работы и 5 минут отдыха.

Перед запуском таймера составляем список задач. Ставим таймер на 25 минут. И начинаем работать.

Звонок таймера означает, что нужно 5 минут отдохнуть. То есть совсем ничего не делать.

После отдыха снова заводим таймер. И так по кругу, пока задача не будет решена.

Так после 4 помидоров нужно делать большой перерыв.

Я буду экспериментировать с длительность помидоров. Но сегодня попробую с классического варианта 30 минут.

Важно в течении помидора не отвлекаться ни на что, максимально быть погруженным в задачу.

Так что работу можно считать в попугаях🐥, точнее в помидорах 🍅.
источник
2018 May 22
Step by Step for Web
Сегодня мне посоветовали создать чатик для обсуждения вопросов по веб разработке и проблемам, с которыми приходится сталкиваться

Прошу присоединяться

@sbsforweb_chat
источник
Step by Step for Web
Что меня мотивирует и к чему я хочу стремиться?

Меня интересует международная биржа фриланса upWork.

И вот полезный материал для старта на этом сайте

Придётся изрядно попотеть, чтобы обзавестись хорошими скиллами и выйти на хороший уровень.

Но не будем торопиться.
Шаг за шагом, последовательно все получится.

И да. Нужен английский. Расскажу про языки позже

https://odeskconf.github.io/guide/
источник
2018 May 25
Step by Step for Web
Привет, дорогой друг!

Сегодня у нас девиз дня:

"Если вы ничего не хотите менять, значит вас всё устраивает в вашей жизни!"

Почему люди годами ноют и жалуются, что у них маленькая зарплата, начальник - козёл, тяжело на работе и так далее?
Это происходит регулярно.
Но мало кто из этих людей действует, меняет свою жизнь.

Почему? Да потому что и так всё нормально.

Но что если нас не устраивает текущее положение дел и мы готовы все менять?

У нас в голове должна быть формула успеха. Которая представляет собой замкнутую цепочку.

Намерение - Потенциал - Действие - Результат

Есть намерение что-то поменять, чего-то достичь, чему-то научиться. Которое переходит в потенциал.

Это такая энергия, напряжение, степень мощности. На сколько нам сильно нам это надо.

Далее мы действуем. А действие неизбежно приходит к результату.

Давайте действовать и менять себя, друзья!

Давайте прививать себе полезные привычки и избавляться от вредных!

Шаг за шагом на пути к своей цели 💪🙂👍
источник
2018 June 01
Step by Step for Web
Всем добра и позитива, друзья 😊

Расскажу на каком этапе сейчас я нахожусь.

========================
ЧТО ОСВОИЛ (FrontEnd):
========================
На freecodecamp.com
Я прошёл блок по:

- HTML5 & CSS
- Bootstrap
- jQuery

Подобрался к заданиям по созданию простого сайта и портфолио.

Это два проекта, с помощью которых можно закрепить полученные знания. По заданию делается это все в codepen. Это песочница для кода, если кто не знает.

Далее идёт блок JavaScript и алгоритмы. Начну параллельно с заданием по сайтам.

Также подключил к изучению сайт с задачами на js. Но прошёл не так много:

http://theory.phphtml.net/tasks/javascript

По книге "Изучаем JavaScript":

- Добрался до 113 страницы. Разработка прототипа морского боя

========================
ПЕРСПЕКТИВЫ ИЗУЧЕНИЯ:
========================

Для себя отметил так же пару целей. Одна из них имеет высокий приоритет. Которую почему-то все время откладываю:

- Разработка расширений для браузера. Chrome Extensions
Так как есть возможность получить работу

Второе направление - это разработка ботов. Перспективное направление. Но даже не знаю как все это совместить.

=====================
ЧТО ОСВОИЛ (другое):
=====================
Освоился в настройке РСЯ(рекламная сеть яндекса). Прошёл курс. Это полезный навык. В дальнейшем расскажу подробнее.

И подружился с такой интересной темой, как криптовалюты. И есть желание взглянуть под капот blockchain

-------------------------------

Столько много всего в голове. Пожалуй не все сразу. Есть небольшие движения с подработкой. Но об этом расскажу позже
источник
2018 June 09
Step by Step for Web
Привет, друзья.

На носу длинные выходные и есть время поразмыслить о проделанной работе.

=======================
Сегодня поговорим о том, как я нашёл подработку
=======================

Я специально не ищу вакансии, резюме не отправляю пока. Но когда в ВК, чатах телеграма вижу от знакомых сообщения, что нужен разработчик или нужен сайт, я не могу пройти мимо.

Обязательно интересуюсь, узнаю подробности.

И в очередной раз вижу пост в ВК. Нужен администратор сайта.

Я связался с человеком, предварительно загуглив, что обязан выполнять администратор.

Нет, я конечно примерно знал, но все мелочи должны быть учтены.

По факту ничего сложного. Если коротко, то наполнение контентом, подготовка фотографий и тому подобные вещи.

Набрался смелости и написал. Написал немного нестандартно, как мне показалось.

И это сработало. Дал свой номер. Поговирили по телефону. Это важно для заказчика. Общение голосом повышает доверие.

Каков итог:

Там интернет магазин на движке CS-Cart. Наполнение контентом, картинки на мне. От написания текстов я отказался.

Также есть работа по моему профилю:

- поправить верстку

Далее ждал небольшой сюрприз:

Вместо обычного хостинга выделенный сервер на Debian.
И все нужно настраивать руками.

Вобщем хочу принести максимальную пользу клиенту. Это моя репутация как никак.

Сразу в боевых условиях буду прокачивать знания Linux, верстки, настройки crm системы и системы сквозной аналитики. Да. Там это тоже нужно.
------------------------------

Ещё очень сложно обозначать цену на первых порах. Я решил идти от почасовки. Обозначил рейт в 200 руб/час.

Пока по правкам я обозначил 5000 руб.
Предоплату в 2000 рублей уже получил на карту. Это очень мотивирующий и радостный момент.

========================

Начало положено. Но теперь время на освоение фронтенда нужно делить с этим проектом.

Пока мне это не очень удавалось всю эту неделю. На выходных подумаю как организовать обучение продуктивней.

Спасибо отдельное ребятам из чатика Рахима за поддержку и ему самому)

Также заходите в чатик @sbsforweb_chat
источник
2018 June 21
Step by Step for Web
Привет, друзья.

В прошлых постах я обещал рассказать про английский. И это тема сегодняшнего поста

=======================

Никому не секрет, что английский один из важнейших аспектов в развитии разработчика. Это нужно признать как факт.

Постараюсь погрузиться в прошлое и рассказать как я к этому шел.

Не помню точно, что меня тогда замотивировало и о чем я думал.

Просто решил начать. С абсолютного нуля. Вообще ничего не знал кроме: "Ok" и "No". Хаха. Так как изучал Немецкий.

К этому вопросу подошёл основательно.

Первое как я считал, это необходимость выработки привычки.

Второе, это материалы.

По первому пункту решил приучать себя к языку ежедневно в течении 30 дней.
У человека за это время вырабатывается привычка. Если я делал перерыв, то есть пропускал хотя бы день, то начинал отсчет сначала.

Все это записывал. Вел дневник. Первая запись датирована:

 19 мая 2015 года
 в 15:28

И 30-ый день настал:

 31 июля 2015 года.

То есть около двух с половиной месяцев мне понадобилось, чтобы отбить эти 30 дней. Да было не привычно и тяжело, делал перерывы и начинал заново, когда возвращался.

Вы не поверите, но к концу эксперимента меня тянуло заниматься. Это было подобно зависимости.

Моя первая цель была достигнута.

И далее ежедневно, без усилия изучал язык до апреля 2016. Это почти год ежедневных занятий.

После я не так строго следил за дисциплиной. Делал короткие перерывы.

========================
      Какие материалы
          использовал?
========================

Долго не раздумывал. Решил идти по школьной программе.
Скачал учебники:

"Happy English"
M. Kaufman, K. Kaufman
со 2 по 11 класс.

И терпеливо вникал в каждую запятую. Поначалу было чертовски глупо и забавно. Какие то динозаврики из страны DoDidDone и все в таком духе. Но я ни о чем не думал, просто фигачил тему за темой. Слово за словом.

Также к этим учебникам шли аудио материалы с произношением звуков и всего такого базового.

Это очень мне помогло с алфавитом, с произношением буквосочетаний.

Отмечу ещё одну штуку, специально я никогда не учил слова. Когда встречал незнакомое слово, смотрел в словаре, выписывал и продолжал дальше. Постепенно эти слова сами собой откладывались в памяти.

К концу 2015 года мне кто то подсказал уроки по грамматике Ирины Шипиловой на youtube.

Скажу сразу она мне не понравилась. Но подача материала мне показалась толковой.

Я посмотрел около 200 её уроков по грамматике.
Так более или менее разобрался с грамматикой.

Весной 2016 года мне попался курс доктора Пимслера. Это уроки разговорного английского по особой методике.

Очень зашли. Значительно продвинулся в языке наложив на знания грамматики, слов ещё и разговорные навыки.

Там было три уровня по 30 уроков на каждом уровне. Всего 90 уроков. Каждый урок длился 30 минут.

Один урок прорабатывал два раза в день.

Итого на этот курс у меня ушло около 4 месяцев.

Осенью 2016 года наткнулся на курс Дмитрия Петрова "Английский за 16 часов".

И это была бомба. Я просто был в восторге. Очень рекомендую всем изучающим. Многие вещи даются под другим углом и в разы эффективней.

К концу 2016 началу 2017 годов я начал читать книги. Брал самые простые, адаптированные книги. Постепенно шёл от нулевого уровня дальше.

Около 15 книжек прочитал.

Осенью 2017 года произошёл новый переломный момент. Обнаружил канал AJ Hoge. Это американский учитель английского языка, блогер. И я впервые начал смотреть и понимать видео без субтитров. Это было волшебное чувство.

С осени 2017 и до сегодняшнего дня смотрю youtube по фану. Естественно на английском, без сабов.

Смотрю все подряд. Видео о грамматике, тонкостях языка, идиомах, культуре, жизни, путешествиях, еде, видео о фронтенде, разработке и все такое прочее.

Самый главный совет изучающим, как можно скорее перейти на этот уровень. Отказаться от русскоязычного контента.

Немного вернусь к 2016 году. Пока я осваивал грамматику и штудировал школьную программу, стал зависать на сайтах языкового обмена. Их было много, но расскажу о самых полезных для меня:

Первым сайтом был

interpals.net - это соц сеть, где можно найти
источник
Step by Step for Web
с кем попрактиковать язык. Там я знакомился с людьми из разных уголков мира. Я почувствовал насколько это здорово. Нашёл кучу носителей, с которыми я общаюсь до сих пор.

italki.com - это уже нечто большее. Тут можно найти учителя за деньги. Но также есть бесплатный раздел языкого обмена.

tandem - мобильное приложение. Где ещё проще найти собеседника.

Все эти сайты помогли найти друзей, с кем могу без проблем поболтать как голосом, так и в мессенжерах.

=========================
       Итоги 3 лет занятий
=========================

- Читаю статьи и документации на английском.
- Общаюсь с носителями.
- Смотрю видео без субтитров.

Мои скиллы далеки от идеала. Есть ещё над чем работать. Очень много чего нужно улучшать. И я продолжаю расти над собой в этом направлении.

Самое главное, что я прочувствовал в полной мере как это круто, уметь общаться на другом языке. Получать информацию  от первоисточника и быть открытым к новому.

Познакомился и с другими языками. Да, я тот ещё извращенец:

- португальский
- итальянский
- испанский
- польский
- китайский
- ...

Но это уже другая история)

=======================

Шаг за шагом на пути к совершенству.
Step by Step - это мой девиз!
Это наш девиз!

=======================
источник
2018 June 27
Step by Step for Web
Привет, друзья!😄

Сегодня для себя открыл

https://repl.it

Это мгновенная среда программирования для вашего любимого языка, как пишут на сайте.

Иногда не хватает таких инструментов, чтобы быстро набросать код прямо в браузере. Берите на заметку

=======================

Над чем зависаю последнее время?

Так прохожу блок js на:
https://freecodecamp.org

И читаю про ES6 на
https://learn.javascript.ru

Также решаю задачки на:
http://theory.phphtml.net/tasks/javascript

Ух, много всего. Похоже это надолго) Увидимся в следующих постах ✋😎

=======================
Большое спасибо новым подписчикам. Это здорово мотивирует
источник
2018 July 03
Step by Step for Web
Привет, друзья!

Сегодня поговорим о дисциплине и инструментах

=======================

Все просто. Когда нет четкого плана по шагам, можно потерятся в большом объеме информации.

Вот поймал себя на мысли, что нужно внедрять инструменты-помощники для своей эффективности.

Для этого отлично подойдет
удобный инструмент для постановки целей и их выполнения. А также для вырабатывания привычек и самодисциплины.

https://smartprogress.do/?ac=1013

Я позже скину свой профиль. Для начала оформлю как следует.

Также я очень хочу попробовать сделать похожий проект. Ну то есть свой собственный аналог. Для практики это будет очень интересно. Например с помощью react.js.

Как вам такая идея?

Буду держать в курсе😎
источник
Step by Step for Web
источник
Step by Step for Web
Огонь песня про фронтенд ☝️ Поднимаем настроение😂
источник
2018 July 04
Step by Step for Web
Привет!😊

Стоит ли работать спустя рукава
и не пытаться стать экспертом в своём деле?

========================

На этой неделе плотно погружен в спецификации на

 https://www.w3.org/

Это сайт The World Wide Web Consorcium (W3C), это такое международное сообщество, которое совместными усилиями разрабатывает веб стандарты.

Верстать абсолютами и двигать пиксели конечно хорошо, но умение глубоко разбираться в вопросе отличает настоящего профессионала от дилетанта.

У кого возникали проблемы с семантическими тегами и споры с коллегами куда поместить тег section и зачем тут ставить article и все в таком духе?

А может кто-то болеет опасной болезнью "дивянкой обыкновенной"?

Оставим эти проблемы обычным смертным. Мы же эксперты и работаем с первоисточником.

Я в прошлых постах писал о важности английского для разработчика. Так вот в переводе информация приходит к нам с запозданием и нередко совсем устаревшая.

Так зачем использовать не актуальную информацию, если есть прекрасное место со всеми спеками:

https://www.w3.org/TR/

В частности рекомендации по HTML5
(От 17 декабря 2017)

https://www.w3.org/TR/html52/

Или рабочий драфт
(От 3 июля 2018)

https://www.w3.org/TR/html53/

Также можно заглянуть под капот. Там есть ссылки на гитхаб рабочей группы.

Все замечательно и подробно описано.
HTML5, CSS, SVG, WOFF, XML и не только.

Пользуемся, изучаем, развиваемся.
Шаг за шагом на пути к успеху!💪 😎
источник
2018 July 05
Step by Step for Web
Привет, друзья!

Сегодня поговорим о нетворкинге и как я могу помочь людям

=====================

Мы живём в обществе и нам свойственно объединяться в группки, заводить друзей, общаться, строить отношения, деловые, личные и прочее. Это естественная потребность.

Так вот нетворкинг — это социальная и профессиональная деятельность, направленная на то, чтобы с помощью круга друзей и знакомых максимально быстро и эффективно решать сложные жизненные задачи

Это значит смело сообщать о своих компетенциях и не стесняться просить помощи. Обязательно найдётся среди знакомых тот человек, который знает как решить вашу проблему.

Например, расскажу о себе:

Я веб разработчик.

- Делаю сайты,
- Помогаю с настройкой рекламы Яндекс Дирек, РСЯ, Google Adwords,
- Поддерживаю и наполняю контентом интернет магазины.
- Разрабатываю телеграм ботов.
(Это новое направление. Подробней расскажу в новых постах)

Если копнуть глубже, то я развиваюсь в:

- верстке (html5, css, sass, БЭМ, адаптив, gulp)
- FrontEnd (JavaScript, React.js)

У меня много друзей и знакомых которые, делают классный дизайн, пушут продающий текст и просто хорошие программисты.

Это мои компетенции, которые могут кому-то понадобиться.

Или вот так случается, что мне нужно построить дачу или получить визу в Канаду.

А неделю назад я познакомился с Иваном Ивановичем, у которого визовый центр.

А у него есть друг детства, отличный строитель со своей фирмой.

Ну вы поняли всю суть.

Интернет, социальные сети, мессенджеры дают отличную возможность знакомиться с замечательными людьми.

Не стесняйтесь, будьте открыты к новым знакомствам. Рассказывайте, чем можете помочь. Это же так здорово.
источник
2018 July 10
Step by Step for Web
источник
Step by Step for Web
Привет. Знаете что это?
источник