У мене давно з’явилася ідея створення курсу верстки для початківців. Якщо бути більш точним, то курс вже готовий: я писав його рік тому англійською мовою й викладав студентам (про це розповім іншим разом). З того часу багато хто з знайомих хотіли поміняти сферу діяльності й піти в програмування.

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

  • за програмування зазвичай платять в євро або доларах;
  • зарплати одні з найвищих в сфері законної найманої праці;
  • поріг входження відносно невисокий.

Щодня кількість охочих стати програмістами стає все більше, але далеко не всі вчаться до кінця і в результаті отримують місце програміста-джуніора (від «junior» -—молодший).

Більшість здається і повертається до початкової точки пошуку роботи, не пов’язаної з 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, інші смартфони, великі й маленькі екрани

В підсумку

Курс безкоштовний, ніяких грошей за нього я не беру. Якщо захочете віддячити за роботу, це можна зробити тут. Тривалість курсу я не встановлюю, уроки будуть з’являтися у міру того, коли у мене є вільний час на їх написання.

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

Дякую всім за увагу і до зустрічей в ефірі.

Коменти

Роман

Скажіть, а чи є у вас YouTube канал? Lуже хочеться якісного україномовного ІТ навчання. Щось на зразок Віртуальної Академії (youtube.com/c/VirtuAka на ютюбі. Але вони почали курс по JavaScript/CSS/HTML і зупинились на півдорозі.

Пако

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

Назар Токарь

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

Пако

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

student

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

Александр

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

Назар Токарь

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

Александр

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

Назар Токарь

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

serg

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

Алексей

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

Юрий

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

Назар Токарь

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

Денис

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

Иван

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

Максим

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

Назар Токарь

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