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

Причины просты:

  • за программирование обычно платят в евро или долларах;
  • зарплаты одни из самых высоких в сфере законного наёмного труда;
  • порог вхождения относительно невысок.

С каждым днём желающих стать программистом всё больше, но далеко немногие учатся до конца и в результате получают место программиста-джуниора (от “junior” — младший). Большинство сдаётся и возвращается к начальной точке поиска работы, не связанной c IT.

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

Сегодня ситуация с одной стороны упростилась: в сети полно бесплатных или недорогих курсов и тренингов для программистов. О качестве судить не буду, но количество позволяет выбирать. С другой стороны, сейчас каждые пару лет появляется столько фреймворков и библиотек, сколько появлялось за все 90-е и начало 2000-х годов. Один только JavaScript из малоиспользуемого скриптового языка с появлением jQuery и других мощных фреймворков кардинально поменял всю суть фронтенд-программирования.

Раньше JS (а иногда DHTML) в 90% случаев использовался для глупых анимаций, выезжающих меню и остальных необходимых для людей с медленным интернетом функций. Сейчас браузерное программирование позволяет создавать веб-приложения, которые делают чудеса, работая только с серверным API.

Теперь о профессии: 10 лет назад верстальщик был чернорабочим. Всё программирование происходило исключительно на стороне сервера, а наша с вами задача обычно сводилась бы к тому, чтобы вёрстка была максимально похожей на макет. Хороший верстальщик верстал “пиксель в пиксель”, но дальше всё равно отдавал работу программистам. С тех пор многое поменялось, теперь есть должность фронтенд-разработчика, и его задачи обычно не менее важны, чем серверного программиста.

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

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

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

Содержание курса

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

HTML

Мы начнём с самого простого — основ языка HTML:

Формы, таблицы, списки

  • элементы форм
  • валидация форм
  • кнопки, текстовые поля
  • типы списков
  • создание таблиц

CSS

  • что такое CSS, как его подключить
  • синтаксис и правила написания
  • селекторы
  • комментарии в стилях
  • группировка селекторов

Стили в HTML

  • цвет фона и фоновые изображения
  • наложение элементов
  • медиафайлы на странице: видео и аудио
  • flash-элементы (здесь будет минутка ненависти)

CSS3 и HTML5

  • что такое CSS3 и HTML5
  • селекторы, новые теги
  • анимация: плавная смена параметров
  • текстовые эффекты
  • градиенты, фоны и границы
  • полупрозрачность с RGBA
  • блочная вёрстка (и почему нужно забыть о табличной вёрстке)
  • 2D/3D-трансформации
  • псевдо-классы и псевдо-элементы

Вёрстка макетов

  • вёрстка разных типов страниц
  • отзывчивая и фиксированная вёрстка
  • позиционирование элементов
  • горизонтальная, вертикальная прокрутка
  • header, footer, section и другие части блочной вёрстки
  • навигационная панель, меню

Шрифты и иконки

  • стандартные и нестандартные шрифты
  • использование своих шрифтов
  • иконочные шрифты
  • спрайты

Другое

  • селекторы по атрибутам
  • трансформации элементов
  • media-запросы
  • отзывчивые видео и изображения
  • вёрстка под устройства: iPhone, iPad, другие смартфоны, большие и маленькие экраны

В итоге

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

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

Всем спасибо за внимание и до встреч в эфире.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Зберегти в Pocket
    Надіслати в Telegram
    Надіслати у WhatsApp

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    16 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

    Ещё отмечу что без Jquery (JS) тут очень сложно и ещё на фрилансе много заданий типа "сверстайте мне сайт на водпресс" т.е нужно знать как минимум HTML,CSS, и какой нибудь бутстрап для адаптивной верстки и желательно конечно знать как натягивать макеты и JS что бы делать всякие всплывающие менюшки и вообще понимать что там в скриптах, что они делают, ибо с JS придется работать, конечно если нужен какой нибудь слайдер или плавное появление блоков при скроллинге - для всего этого уже есть готовые jquery плагины.

    Автор

    @Пако, у меня есть уроки по бутстрапу, в добрый путь :)

    Супер спс, я уже верстаю, и заработал первую денюшку, но на фрилансе очень сложно, за то от компаний за месяц 3 заявки пришло :) и я успел даже поработать в команде, с программами контроля версий, на сайте где выдаются задания и т.д, но это не для меня... я хочу быть свободным, работать по 4-5 часов в день, но новичку сложно это сделать, особенно в одиночку, ещё я советую учить английский, ибо там зарплаты совсем другие...

    Ждем!! Очень хочется хороший и толковый курс, где бы разъяснялись все тонкости.

    Александр

    Уже 2 месяца с мелкими перерывами изучаю html и css , сейчас начал JavaScript, но делаю это на англ. язычных ресурсах. С радостью буду следить за тем что вы делаете и советовать друзьям-товарищам, но при условии что вы будете пунктуальны и не занудны в своих уроках. Надеюсь научусь чему-то новому. Удачи в проекте.

    Автор
    Назар Токар

    @Александр, это же УРОКИ. Конечно, я буду занудным!

    Александр

    @Назар Токарь, Главное в занудстве, не достичь мастерства Евгения Попова)).

    Автор
    Назар Токар

    @Александр, а кто это?

    Отличное заявление. Буду следить за статьями.

    С нетерпением ждем-с :)

    Спасибо, Назар!

    Автор
    Назар Токар

    Не забывайте комментировать :)

    С интересом послежу:)

    Что же, ждём первого урока :)

    а просто ссылку дать нельзя на скачивание курса!??

    Автор
    Назар Токар

    @Максим, нет. Во всяком случае, пока нет :)