Основы и перспективы HTML и CSS

Знать и понимать теги необходимо не только для создания сайтов. Эти навыки крайне важны для маркетологов, арбитражников, контент-менеджеров и редакторов, которые вплотную сталкиваются с разметкой и оформлением текста.

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

Огромным плюсом профессии является возможность работы с любого места, где есть компьютер и интернет (необязательно переезжать в Москву или Санкт-Петербург).

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

С чего начать обучение языку гипертекстовой разметки

Стоит еще раз упомянуть, что язык действительно прост, он может послужить вхождением в программирование и веб-разработку на JavaScript, PHP, Python и др.

Есть два способа получить опыт:

1. Самостоятельный поиск информации. Долго и нерезультативно.

2. Обучение на онлайн-курсах. Быстро и эффективно.

Лучшие онлайн-курсы по HTML и CSS

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

Мой топ:

1. Место. GeekBrains.
2. Место. LoftSchool.
3. Место. HTML-academy.

GeekBrains

Курс для детей от 11 до 17 лет

Цена. 15 000 руб.

Продолжительность. 1 месяц (8 уроков).

Кому подходит. Для начинающих.

Формат. Онлайн.

Практика. Присутствует.

Документы. Сертификат об окончании обучения.

Бонусы. Дополнительные методички и материалы.

Процесс

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

На занятиях верстается профессиональный макет, который можно использовать в портфолио.

Программа

Состоит из 8 уроков:

1. Семантические элементы. Знакомство с плагинами, настройка редактора, примеры тегов.
2. Позиционирование элементов. Верстка, CSS генераторы.
3. Формы. Добавление на страницу, проверка на ошибки, технология БЭМ.
4. Параметры. Использование SVG, градиенты, спрайты и эффекты.
5. Работа с текстом. Шрифты, несколько колонок, оформлением, отступы, основы Canvas, рамки.
6. Эффекты перехода и трансформации. Повороты при наведении, анимация.
7. Адаптивная верстка. Дизайн, синтаксис, примеры.
8. Углубленное изучение. CSS3, SAAS, Flexbox.

Навыки

Вы научитесь:

• создавать сайты (на основе HTML5, CSS3);
• применять текстовые эффекты;
• использовать встроенные возможности браузера и нестандартные шрифты;
• воспроизводить аудио и видео на веб-страницах;
• многое другое.

LoftSchool

Цена. 2 тарифа: 1 666 руб/мес — базовый и 2 166 руб/мес — уютный. Рассрочка на год.

Продолжительность. 5 недель.

Кому подходит. Для тех кто с нуля.

Формат. Онлайн-курс.

Практика. Более 100 часов

Документы. Сертификат с уникальным ID.

Карьера. Портфолио (многостраничный сайт).

Трудоустройство. Оказывается содействие.

Бонусы. Дополнительная работа с наставником. Неограниченный доступ к ресурсам.

Процесс

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

Каждый понедельник выдается ДЗ, на выполнение которого отводится 1 неделя. Проверка и обратная связь по каждому фрагменту. При пропуске занятия можно посмотреть урок в записи.

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

1 раз в неделю проводится групповой разбор «полетов».

Программа

Разделена на 5 недель:

1. Открытие курса. Редактор. Интернет. GitHub. HTML. БЭМ.
2. Figma. CSS. Шрифты. Блочная модель. Стилизация проекта.
3. Flexbox. Построение лейаута. БЭМ-нейминг.
4. Анимация. CSS. Реализация.
5. Защита своего проекта.

Навыки

Вы научитесь и поймете:

• как устроен интернет (что такое: http, ip, dns, хостинг, домен, сервер и многое другое);
• верстать сайты любой сложности (применяя Flexbox и BEM-naming);
• кроссбраузной верстке (сайт будет отлично выглядеть во всех браузерах);
• работе с макетами (инструменты Figma);
• workflow (среда разработки: VS Code, Emmet, FTP-клиент).

HTML academy

У Академии есть программы для чайников и продвинутых

Цена. 16 400 и 26 400 рублей (зависит от тарифа). Рассрочка на полгода по 2 730 руб/мес.

Продолжительность. 2 месяца.

Для кого. Новичков.

Формат. Онлайн.

Практика. Большое количество.

Документы. Сертификат.

Бонусы. Наставник.

Процесс

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

Между стартом и финалом пройдет 9 недель. За это время случится много интересного, а именно: выбор наставника и проекта, участие в живых лайвах, подготовка и защита своего веб-ресурса.

По понедельникам и четвергам (с 19:00 по 21:00 по Москве) проходят лайвы (записи сохраняются).

Закрепление материала осуществляется на практике и ДЗ. После выполнение каждого задания, наставник его проверяет и дает рекомендации по улучшению кода.

Обучение подходит работающим людям, достаточно уделять внимание 2 часа в день.

Программа

Поделена на 11 блоков:

1. Старт. Знакомство с инструментами и процессами.
2. Разметка. Создание страниц, синтаксис HTML, спецификация.
3. Стилизация. Макет, структура блоков, наследование, каскад, шрифты.
4. Графика. Редактор, интерфейс Figma, форматы и оптимизация.
5. Гриды. Модульная система, специфика, блочная модель.
6. Флексы. Раскладка.
7. Декоративные элементы. Контентная и оформительская графика, визуальные правила, интерактивность.
8. Оформление. Практика верстки, типовые случаи переполнения.
9. Доступность и формы. Интерфейс, взаимодействие, паттерны, подписи, инструменты.
10. Анимация. JavaScript, интерактивные компоненты.
11. 4 недели для защиты проекта.

Узнать, как получить профессию web-разработчика можно тут

WebAcademy

Цена. Зависит от тарифа: 21 000 и 29 000 рублей. Оплата частями.

Продолжительность. 6 и 10 недель.

Для кого. С нуля.

Формат. Онлайн.

Практика. 32 задачи.

Документы. Электронный сертификат.

Трудоустройство. Оказывается.

Бонусы. 3 проекта в портфолио. На выбор интенсив в подарок. Возврат средств, если не подойдет курс.

Процесс

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

Чат для общения с другими участниками.

Все ДЗ проверяет наставник с обязательным код-ревью и комментарием.

Программа

Состоит из 165 видеоуроков и практических задач.

Учебный план состоит из 6 и 10 недель:

1. Основы HTML и CSS.
2. Блочная верстка.
3. Сайт.
4. Адаптивная верстка.
5. Мобильная версия.
6. Проект.
7. Кейс.
8. Коучинг по фрилансу и трудоустройству.
9. Контрольная встреча.

Навыки

Изучаемые технологии:

• HTML5, CSS3 – валидная верстка, адаптив, анимация;
• Photoshop – нарезка макетов;
• LESS – препроцессор;
• JavaScript, jQuery, PHP – основы;
• BEM;
• Bootstrap 4 – фреймворк;
• все необходимые программы.

Udemy

Автор: Сергей Никонов (основатель школы программирования FrudCode)

Цена. 1 790 рублей.

Продолжительность. 4,5 часа.

Для кого. Базовые знания работы с компьютером.

Формат. Интенсив (краткий).

Документы. Сертификат.

Бонусы. Гарантия возврата средств.

Программа

8 разделов и 31 лекция состоит из следующих материалов:

1. Установка программ.
2. Знакомство с HTML и CSS.
3. Каскадная таблица стилей.
4. Верстка.
5. Страница просмотров фильмов.
6. Списки.
7. Рейтинги.
8. Адаптация.

Навыки

Вы сможете:

• создавать верстку сайтов с помощью HTML и CSS;
• работать с программой Sublime Text и плагинами;
• писать адаптивную версию для мобильных устройств.

Плюсы и минусы обучения с нуля

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

Польза от образования за деньги:

1. Информация. На курсах только актуальный материал (дорожат репутацией). Пошаговое прохождение (от простого к сложному).
2. Преподаватели. Делятся своим опытом и рассказывают о подводных камнях.
3. Среда. Погружение в образовательный процесс, где такие же, как вы начинают свой путь. Полезные знакомства.
4. Документ об образовании. Выдается диплом или сертификат, который крайне важен на первых этапах.
5. Портфолио. По окончании учебы у вас будет что показать работодателю или заказчику.

Бесплатно:

1. Нет мотивации. Многие бросают при первых трудностях.
2. Нет документа. Нечего предъявить заказчикам.
3. Нет домашних заданий. Не закрепляются полученные знания на проектах.
4. Нет опыта. Его получите на своих шишках.
5. Информация. Разрозненность и неактуальность.

Рекомендация по выбору интерактивных курсов и школ программирования

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

• наличие образовательной лицензии (если это школа);
• отзывы (лучше, если это будет видеоформат);
• период существования курсов (сколько было потоков);
• узнать о учителях (найти их соцсети, спросить предыдущие места работы);
• посмотреть учебный план + уточнить расписание (решить подходит ли это вам).

Советы начинающим верстальщиками

Существует несколько фишек, благодаря которым ваша карьера пойдет вверх:

1. Еще на стадии обучения узнайте у преподавателя, на что сделать уклон (выяснить перспективное направление и акцентировать внимание на этом).
2. Находясь на курсах, используйте возможности по максимуму, выполненные ДЗ или стажировка — отличный вариант для старта (лучших сразу забирают).
3. После окончания учебы не останавливайтесь в своём профессиональном развитии (дополнительный язык Python, JavaScript или навыки дизайнера увеличит вашу ценность).
4. Подпишитесь и следите за «гуру».
5. Используйте портфолио (делайте разнообразные проекты).

Монетизация полученных знаний и становление карьеры

Направлений, в которых реально неплохо зарабатывать масса:

• для начала устроиться в веб-студию (получите уверенность и опыт в реальном бою, но в случае чего будет возможность обратиться за помощью);
• фриланс. Тут поле непаханое: стоит поделить на отечественный и зарубежный. Выполнять заказы можно как «под ключ», так и мелкие задачи;
• заняться и продвигать свои проекты (создание сайтов, будь то: лендинги, интернет-магазины).

В итоге имеем доступное образование и востребованную профессию не покидая дом. Совсем неважно, где вы территориально находитесь (в столице или Питере, Новосибирске или Екатеринбурге, Казани или Новгороде), и при этом получать московскую зарплату.

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

*действующие программы, скидки и акции уточняйте у менеджеров