Что нового?

Рекомендуем: 🚀Pirate Crypto Community


Блог Путь веб-разработчика

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Привет. Меня зовут Павел и у меня есть мечта – стать профессиональным веб-разработчиком! Здесь я буду честно описывать каждый свой шаг на пути к цели. Буду рад поддержке!

Группа ВК: Великий путь веб-разработчика
 





pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Кто я такой и зачем мне это? // ВПВ 0
Первый пост будет как первый блин. Но с чего-то же нужно начинать? Поэтому начну я с рассказа о себе и о том, зачем завел этот никомуненужный блог.

Меня зовут Павел. Я родился в 1994 году и прожил до 18 лет в маленьком поселке. В школе я учился хорошо, поэтому после экзаменов легко поступил в Питер, а именно в Университет ИТМО. Направление выбрал рандомное: что-то между инженером, химиком и экологом.

Почему именно Питер, ИТМО и инженер-химик-эколог? Трудно сказать — так совпали карты. Одно знаю точно: после школы я не знал, кем хочу стать.

Проучился целых 6 лет, включая магистратуру. До сих пор не понимаю, зачем я так долго мучился, если уже на 2 курсе осознал, что работать по специальности мне вряд ли доведется. Честно говоря, и не хотелось.

За это время кем я только не работал: курьером, оператором колл-центра, работником торгового зала, грузчиком и даже поваром в KFC. Везде я чувствовал себя не в своей тарелке и скорее ждал окончания рабочего дня. Но, черт побери, я и тогда не понимал, что меня влечет. Это пугало.

Но однажды я наткнулся на уроки вёрстки и понеслось… Абра-кадабра, трах-тибидох. Шутка. Моя любовь к сайтостроению проснулась гораздо раньше.

Первый сайт я создал в 16. Он был на конструкторе. Мне понравилось, и я создал ещё и ещё. В веб-разработке я ничего не смыслил, но этого и не требовалось. Когда узнал, что на сайтах можно заработать, я обрадовался. Сайты-то у меня были, а посетителей нет… как и ожидаемого заработка. Доход 2 рубля в день меня не устроил, поэтому сайты я забросил, а хобби забыл.

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

Я продолжил создавать сайты на самые разные темы. Акцент делал только на контент и продвижение, поэтому я стал неплохо разбираться в SEO. Но верстать я так и не научился, не говоря уже о PHP. Тем не менее сайты мне приносили около 20 тыс. в месяц.

Вдруг я осознал, что не расту как профессионал. Если в один момент все мои сайты забанят, то я останусь ни с чем. Мне хотелось иметь подушку безопасности, чтобы я в случае чего мог устроиться на работу в офлайне. Единственный верный для меня вариант — профессия веб-разработчика.

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

Кто-то сказал: «Если хочешь найти своё призвание, просто сядь и подумай, чем бы ты хотел заниматься». Я хочу заниматься сайтами, а значит это мое призвание. Мне не жалко на это времени и я голоден до новых знаний.

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

А начну я свой долгий путь с того, что так долго откладывал — с верстки. Надеюсь вы со мной. Если да, то встречаемся у следующего поста!
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Интерактивные онлайн-курсы HTML Academy // ВПВ 1
Первое, что должен уметь веб-разработчик — это верстать. Это нужно для того, чтобы перевести дизайн-макет сайта в код. Я своё обучение верстке начал с интерактивных курсов HTML Academy. Ссылка: Интерактивные онлайн-курсы HTML Academy.

На их прохождение у меня ушёл 1 месяц, притом тратил я на них 2-3 часа в день. Некоторые курсы проходил заново, чтобы лучше усвоить материал. За этот месяц я основательно изучил HTML, CSS и на базовом уровне JS. Плюсом было то, что это не голая теория. Каждый урок сопровождался практикой.

Я писал, что уже создавал сайты. У 3 из 5 приходилось изменять готовый шаблон под себя: цвет фона, размер шрифта, отступы и т.п. Поэтому с HTML и CSS я стал обращаться не «Ваше высочество», а просто на «Вы». Тем не менее я дико боялся увидеть в коде такое, как ::after, :last-child, :trasition-duration. Я не понимал, что они означают, как и многие другие вещи. Почему-то я и не гуглил из значение. Поэтому верстку я боялся.

Когда я прошёл последний курс под названием «Великий Кексби», где с нуля сверстал веб-страничку, я просто охренел. «Это магия» — подумал я, ведь разрозненные знания сложилась в цельную и понятную картину. Курсы закрыли все мои пробелы, а то что уже знал — с удовольствием повторил.

Теперь меня ждал профессиональный онлайн-курс HTML и СSS, уровень 1. О нём в следующий пост.
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Профессиональный HTML и CSS, уровень 1 // ПВ 2
После интерактивных курсов я искал в сети слитый интенсив HTML Academy 2018 года. Ищущий да найдет!

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

Так как 14 500 у меня не было, я изучал слитый материал. Я посмотрел курс дважды: первый раз — поверхностно, второй раз — основательно. Я повторял все, что делал лектор, повторял его код. Через неделю я завершил изучение курса.

Вот что я открыл для себя, помимо тотального повторения HTML и СSS:

  1. Гитхаб. Раньше я его избегал, но здесь познакомился с ним лично. Теперь все работы скидываю туда.
  2. Порядок вёрстки. Сначала создаём HTML-разметку всей страницы, а лишь потом переходим к написанию стилей.
  3. Семантическая верстка. Используем все теги HTML5 по их прямому назначению.
  4. Фотошоп. Узнал все тонкостям работы с макетом: нарезка и экспорт графики, расчёт отступов.
  5. W3C-валидатор. Проверка кода на ошибки.
  6. Контентные и фоновые изображения. Подробнее: htmlacademy.ru/blog/153-content-or-decor-img.
  7. Понятные имена классов. Подробнее: github.com/yoksel/common-words.
  8. Стайлгайд. Пишем код по единообразно. Подробнее: codeguide.academy/html-css.html.
  9. Доступность. Делаем интефейс доступным для навигации с клавиатуры и для людей с ограниченными способностями.
  10. Кроссбраузерность. Используем normalize.css и autoprefixer.
  11. Шрифты. Способы подключения сторонних шрифтов.
  12. JavaScript. Оживление элементов сайта, использую основы программирования.
Итог. Курс научил меня верстать. Причем не просто верстать, чтобы было похоже на макет. Моя верстка стала чистой и правильной, кроссбраузерной и доступной. Также её было легко поддерживать.

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

Следующий мой пост — это отчет о сверстанных макетах с этого интенсива.
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Merkury - презентация забугорного сервиса. Это первый макет, который я сверстал после прохождения интенсива. Первая кровь, так сказать. Я нашёл его на просторах интернета.

Ссылка на исходники: pavellbor/Merkury
Ссылка на сайт: Merkury
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Nerds - сайт веб-студии. Третий макет из интенсива. Теперь он красуется у меня в портфолио.

Ссылка на исходники: pavellbor/Nerds
Ссылка на главную: Главная - Nerds
Ссылка на каталог: Каталог - Nerds
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Sedona - туристический сайт. Четвёртый макет из интенсива. Мне кажется, или он действительно хорошо вписывается в моё портфолио?

Ссылка на исходники: pavellbor/Sedona
Ссылка на главную: Главная - Sedona
Ссылка на каталог: Каталог - Sedona
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Technomart - интернет-магазин строительных материалов и инструментов для ремонтов. Последний макет, который предоставляет интенсив. Это уже 6 работа в моём портфолио.

Ссылка на исходники: pavellbor/Technomart
Ссылка на главную: Главная - Техномарт
Ссылка на каталог: Главная - Техномарт
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Я сверстал все макеты интенсивного онлайн-курса "Профессиональный HTML и CSS, уровень 1". Пришло время повышать ставки и становиться профессиональным верстальщиком. Поэтому я прошёл интенсивный онлайн-курс "Профессиональный HTML и CSS, уровень 2".

Это было круто. Теперь я научился верстать кроссбраузерно и адаптивно. Также узнал и внедрил методологию БЕМ, препроцессор LESS, сборщик Gulp, ретинизацию графики, прогрессивную улучшение и ещё много всего полезного.

Итог. Получил знания, чтобы стать профессиональным верстальщиком. Теперь нужно набивать руку.
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Barbershop - сайт барбершопа "Бородинский". Это моя первая адаптивная вёрстка. Верстал неделю, попутно пересматривая интенсив, чтобы ничего не упустить. Осталось ещё 4 макета и перехожу к основательному изучению JavaScript.

Стек: HTML5, CSS3, JavaScript, Adaptive layout, БЭМ, Flexbox, Accessibility, Less, Gulp, SVG, Retina, Pixel-perfect, Progressive Enhancement.

Ссылка на исходники: pavellbor/Barbershop-adaptive
Ссылка на главную: Главная – Барбершоп «Бородинский»
Ссылка на форму: Записаться – Барбершоп «Бородинский»
Ссылка на портфолио: Записаться – Барбершоп «Бородинский»
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Cat Energy - интернет магазин питания для котов. Вторая адаптивная вёрстка. Было непросто, особенно со слайдером на главной. Верстал неделю, но опыт ничем не заменишь. Осталось два макета.

Стек: HTML5, CSS3, JavaScript, Adaptive layout, БЭМ, Flexbox, Accessibility, Sass, Gulp, SVG, Retina, Pixel-perfect, Progressive Enhancement.

Ссылка на исходники: pavellbor/cat-energy
Ссылка на главную: Главная – Cat Energy
Ссылка на форму: Главная – Cat Energy
Ссылка на каталог: Главная – Cat Energy

Мой блог в ВК: Путь веб-разработчика
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Макет: Mishka - интернет-магазин вязанных товаров. Третья адаптивная вёрстка. Так как верстаю бесплатно (для себя), верстка потихоньку переходит в рутину. Раньше такого не замечал. Ну ладно, остался последний макет!

Стек: HTML5, CSS3, JavaScript, Adaptive layout, БЭМ, Flexbox, Accessibility, Sass, Gulp, SVG, Retina, Pixel-perfect, Progressive Enhancement.

Ссылка на исходники: pavellbor/Mishka
Ссылка на главную: Главная – Mishka
Ссылка на форму: Вязание на заказ – Mishka
Ссылка на каталог: Каталог – Mishka

Мой блог в ВК: Путь веб-разработчика
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
40
Друзья, 3 июня я ухожу в армию. Забрать меня хотели ещё пол-года назад, но из-за лазерной коррекции зрения мне дали отсрочку. Теперь отсрочка вышла.

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

Но что меня действительно напрягает, это страх забыть. Забыть всё то, чему научился за последние 5 месяцев, а именно верстке (со всеми её вытекающими) и слепой печати. Боюсь, что после армии придётся начинать сначала.

Поэтому я не стал рвать жопу и довёрстывать этот последний макет. Хотя, если выложиться по максимуму, это сделать реально. Просто эти 2 дня я хочу провести со своей семьей и ни о чем не париться. Вот так.

До свидания, друзья! Ни пуха ни пера!
 

Сверху