Партнеры: Форум об анонимности и безопасности в сети. Всегда свежие списки прокси. | SMS активации, виртуальные номера |
Instaplus.me - лучший сервис для продвижения в Инстаграм. 5 дней бесплатно в Инстаплюс. |


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

pavellbor

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

Группа ВК: Для просмотра ссылки необходимо: Войти или Регистрация
 

pavellbor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

pavellbor

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

pavellbor

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

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

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

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

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

pavellbor

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

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

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

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

  1. Гитхаб. Раньше я его избегал, но здесь познакомился с ним лично. Теперь все работы скидываю туда.
  2. Порядок вёрстки. Сначала создаём HTML-разметку всей страницы, а лишь потом переходим к написанию стилей.
  3. Семантическая верстка. Используем все теги HTML5 по их прямому назначению.
  4. Фотошоп. Узнал все тонкостям работы с макетом: нарезка и экспорт графики, расчёт отступов.
  5. W3C-валидатор. Проверка кода на ошибки.
  6. Контентные и фоновые изображения. Подробнее: Для просмотра ссылки необходимо: Войти или Регистрация.
  7. Понятные имена классов. Подробнее: Для просмотра ссылки необходимо: Войти или Регистрация.
  8. Стайлгайд. Пишем код по единообразно. Подробнее: Для просмотра ссылки необходимо: Войти или Регистрация.
  9. Доступность. Делаем интефейс доступным для навигации с клавиатуры и для людей с ограниченными способностями.
  10. Кроссбраузерность. Используем normalize.css и autoprefixer.
  11. Шрифты. Способы подключения сторонних шрифтов.
  12. JavaScript. Оживление элементов сайта, использую основы программирования.
Итог. Курс научил меня верстать. Причем не просто верстать, чтобы было похоже на макет. Моя верстка стала чистой и правильной, кроссбраузерной и доступной. Также её было легко поддерживать.

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

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

pavellbor

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

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на сайт: Для просмотра ссылки необходимо: Войти или Регистрация
 
  • Мне нравится
Реакции: Bil

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
41
Реакции
120
Макет: Device - интернет-магазин гаджетов. Второй макет, который пополнил моё портфолио. Я взял его с интенсива.

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на каталог: Для просмотра ссылки необходимо: Войти или Регистрация
 

pavellbor

Пользователь
Регистрация
10 Янв 2017
Сообщения
41
Реакции
120
Макет: Gllacy - магазин мороженного. Второй макет из интенсива, который пополняет моё портфолио.

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на каталог: Для просмотра ссылки необходимо: Войти или Регистрация
 

pavellbor

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

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на каталог: Для просмотра ссылки необходимо: Войти или Регистрация
 

pavellbor

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

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на каталог: Для просмотра ссылки необходимо: Войти или Регистрация
 

Streichholz

Пользователь
Регистрация
12 Июн 2016
Сообщения
39
Реакции
40
Делай сайты адаптивными, просто в лоб сверстать сильно просто, а вот чтобы подстраивалась под все размеры уже немного сложнее
 

pavellbor

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

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на каталог: Для просмотра ссылки необходимо: Войти или Регистрация
 

pavellbor

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

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

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

pavellbor

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

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

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на форму: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на портфолио: Для просмотра ссылки необходимо: Войти или Регистрация
 

pavellbor

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

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

Ссылка на исходники: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на главную: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на форму: Для просмотра ссылки необходимо: Войти или Регистрация
Ссылка на каталог: Для просмотра ссылки необходимо: Войти или Регистрация

Мой блог в ВК: Для просмотра ссылки необходимо: Войти или Регистрация
 
Сверху