25 Жовтень 2015
Рубрика: уроки

Уроки по вёрстке сайтов: начало работы

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

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

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

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

С каждым днём желающих стать программистом всё больше, но далеко немногие учатся до конца и в результате получают место программиста-джуниора (от “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, другие смартфоны, большие и маленькие экраны

В итоге

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

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

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

Тепер я хочу бачити коментарі 16