Найти в Дзене

Как учиться верстке бесплатно. Пошаговый план

Как учить верстку, если денег на прохождение курсов нет, но освоить веб-разработку хочется. Я собрал для вас подборку видео курсов с канала Glo Academy. По ним вы можете учиться бесплатно. Для начинающих Тем, кто совсем ещё «зеленый» и не знаком ни с одним языком разработки, советую просмотреть плейлист «HTML для самых маленьких». Название четко соответствует содержанию. Разбираем язык HTML с самых основ и простым язком. Ссылка на плейлист: https://www.youtube.com/watch?v=bfXUhBB_9b0&list=PL3LQJkGQtzc7aWRyr-GaxyO_dwj5inJ1t Рабочие инструменты Писать код можно в любом текстовом редакторе. Например, Sublime Text: https://www.youtube.com/watch?v=5OEG27i-0Sg&list=PL3LQJkGQtzc7QodorFRj7f5Yu2bfg5R0o Современный редактор VS Code и обзор на него https://youtu.be/paA-leudslo Помните, что это всего лишь инструмент и какой выбрать — дело вкуса. Смотрите, выбирайте и переходите к изучению других материалов. Не зависайте долго на этом этапе. Курс веб-разработчик Для тех, кто хочет пройтись по всем
Оглавление

Как учить верстку, если денег на прохождение курсов нет, но освоить веб-разработку хочется. Я собрал для вас подборку видео курсов с канала Glo Academy. По ним вы можете учиться бесплатно.

Разработка сайтов — прибыльное занятие. А ещё это самый простой вход в IT
Разработка сайтов — прибыльное занятие. А ещё это самый простой вход в IT

Для начинающих

Тем, кто совсем ещё «зеленый» и не знаком ни с одним языком разработки, советую просмотреть плейлист «HTML для самых маленьких». Название четко соответствует содержанию. Разбираем язык HTML с самых основ и простым язком.

Ссылка на плейлист: https://www.youtube.com/watch?v=bfXUhBB_9b0&list=PL3LQJkGQtzc7aWRyr-GaxyO_dwj5inJ1t

Рабочие инструменты

Писать код можно в любом текстовом редакторе. Например, Sublime Text: https://www.youtube.com/watch?v=5OEG27i-0Sg&list=PL3LQJkGQtzc7QodorFRj7f5Yu2bfg5R0o

Современный редактор VS Code и обзор на него https://youtu.be/paA-leudslo

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

Курс веб-разработчик

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

Ссылка на плейлист: https://www.youtube.com/watch?v=n9kx5Vk0jgc&list=PL3LQJkGQtzc5G7wIQfVqBMEprmTKZIaXf

Тут первое видео из плейлиста. Всего уроков 30. Переходите на Youtube

Марафоны верстки

Чтобы посмотреть на реальную практику и закрепить все навыки, смотрите плейлисты под названием «Марафон верстки». Предупреждаю, там очень много материала и это работа, за которую получали деньги от реальных заказчиков. Где-то вырываются слова-паразиты, где-то очень медленно и не гладко разбираются с какой-то ошибкой. В этих видео минимум монтажа, только практика, только хардкор.

Ссылка на марафоны:

Первые три марафона, каждый по 5-7 часов https://www.youtube.com/watch?v=rNd9symkiIk&list=PL3LQJkGQtzc4noPx1YWTT67qtEcUYqjLj

Выживет сильнейший. Материал не новый, но полезный.

Делаем сайт по Аудиоквестам: https://www.youtube.com/watch?v=1nuiTzGxOlA&list=PL3LQJkGQtzc7iPpB5E9yLUPku4H-cGzvX

Верстка и посадка на Wordpress сайта инвестиционной компании, используем Avocode, Bootstrap, Flexbox и препроцессор SASS: https://www.youtube.com/watch?v=geMw1lxQeSM&list=PL3LQJkGQtzc5nqQ4G_QI-GfXA3Oklt9Z2

Делаем одностраничный сайт на чистом FlexBox без сетки бутстрапа: https://www.youtube.com/watch?v=mC8JW_aG2EM&list=PL3LQJkGQtzc4gsrFkm4MjWhTXhopsMgpv

FlexBox для начинающих

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

Ссылка на плейлист с теорией и практикой: https://www.youtube.com/watch?v=zFIltkLv5eI&list=PL3LQJkGQtzc4cCGLkwm1CmVahUtBkmJx9

CSS фичи для тех, кто в теме

Когда всё, что касается новичков пройдено и хочется чего-то необычного для своего сайта — велкам в плейлист CSS-фичи, где рассказывают и показывают прикольные эффекты и фишки, написанные на чистом CSS. На данный момент, там 18 фич.

Ссылка на плейлист: https://www.youtube.com/watch?v=Kdal-3AfeRc&list=PL3LQJkGQtzc56HquxrkwPdQt9Q1wHm21P

JavaScript

Всегда наступает момент, когда просто HTML и CSS недостаточно, надо переходить к джаваскрипт. Для этого у нас есть отдельный плейлист, который записал Иван Петриченко. Там основы основ, которые важно понимать, чтобы работать с JS.

Вот он: https://www.youtube.com/watch?v=sBjI_T0N8GA&list=PL3LQJkGQtzc5q9qetrSMWuF9-3LMaU_bW

jQuery для новичков

Сразу после нативного JS можно изучить простую библиотеку jQuery — это самая популярная библиотека, на которой написано огромное количество сайтов. Чтобы их поддерживать, нужно знать, как писать скрипты с её помощь. Плюс на jQuery написано офигеть как много плагинов, которые упрощают создание сайтов.

Короткий плейлист с основами работы с jQuery. Вот ссылка: https://www.youtube.com/watch?v=E8i9_8wPnKg&list=PL3LQJkGQtzc5MFh51ACgwl8HXL3Hrqh5-

4 видеоурока по jQuery

JavaScript-фичи

Ну и для закрепления JS, можно поделать всякие финты для сайтов: https://www.youtube.com/watch?v=VrayPysaeGY&list=PL3LQJkGQtzc5C8GXGf_Pit4DdDzkk6t25

GitHub

Помимо самих языков разметки, важно уметь работать с контролем версий. Почему именно так, объясняют в самих видео. Ходят слухи, что в этом плейлисте самое понятное объяснение гита и сути его работы. Посмотрите сами: https://www.youtube.com/watch?v=Rke_Z1-nvUM&list=PL3LQJkGQtzc5rDeb7FjACNb6sOW300yA0

Курс по Wordpress

Когда уже готовы перейти с верстки на работу с движками, можете пройти курс по Wordpress. Он называется «Wordpress для верстальщика», раньше он был платным, сейчас его выложили в открытый доступ. Схема такая же, как с курсом «Веб-разработчик. 10 поток».

Ссылка на плейлист с курсом: https://www.youtube.com/watch?v=7NNtOXgNPBM&list=PL3LQJkGQtzc6Nwz67GGrMdqxim1c0H5DC

Фриланс-биржи

Если поняли, что готовы к работе, вот обзоры на популярные фриланс-биржи, где можно найти первые заказы: https://www.youtube.com/watch?v=IaTHUqZNJXw&list=PL3LQJkGQtzc4CtJxusmAZpfBE8e5mkEJO

Бэкенд

Есть простой плейлист по PHP, его тоже можно посмотреть, чтобы понять, как работает этот язык и как собрать с его помощью сайт.

Ссылка на плейлист: https://www.youtube.com/watch?v=VOq_D8wWlRk&list=PL3LQJkGQtzc6mnBlbr2J59VQ-aKIkarYw

Прочие полезности

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

Это плейлист с крутыми инструментами для работы верстальщика: https://www.youtube.com/watch?v=-yZfdyPMzCE&list=PL3LQJkGQtzc61PCUJlqhcbeTkPECfgr5E

О фрилансе и работе в целом: https://www.youtube.com/watch?v=JA5BL58IP2Y&list=PL3LQJkGQtzc7whnPXHolCz2euhVsinP5W

Ответы на вопросы подписчиков: https://www.youtube.com/watch?v=0AZ0KnOKSvY&list=PL3LQJkGQtzc5Vn4FsgVlVPhcCKUMgDshi

Полезные инструменты для работы: https://www.youtube.com/watch?v=Q-AGMmVstIA&list=PL3LQJkGQtzc5cnoKwbzAcEch3L0bdBovG

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

Успехов.