У мене давно з’явилася ідея створення курсу верстки для початківців. Якщо бути більш точним, то курс вже готовий: я писав його рік тому англійською мовою й викладав студентам (про це розповім іншим разом). З того часу багато хто з знайомих хотіли поміняти сферу діяльності й піти в програмування.
Причини прості:
- за програмування зазвичай платять в євро або доларах;
- зарплати одні з найвищих в сфері законної найманої праці;
- поріг входження відносно невисокий.
Щодня кількість охочих стати програмістами стає все більше, але далеко не всі вчаться до кінця і в результаті отримують місце програміста-джуніора (від «junior» -—молодший).
Існує безліч курсів і книг з програмування різними мовами. 2001 року, коли я тільки починав вивчати верстку й взагалі теорію створення сайтів, я й подумати не міг, що десь можуть бути безкоштовні уроки, курси, приклади для розробників будь-якого рівня. У мене, не пам’ятаю вже звідки, була книга з PHP, а все інше доводилося шукати в блогах і на форумах. У більшості випадків — англомовних.
Сьогодні ситуація з одного боку спростилася: в мережі повно безкоштовних або недорогих курсів та тренінгів для програмістів. Про якість судити не буду, але кількість дозволяє вибирати. З іншого боку, зараз кожні пару років з’являється стільки фреймворків і бібліотек, скільки з’явилялось за всі 90-ті й початок 2000-х років. Один тільки JavaScript з непопулярної скриптової мови з появою jQuery й інших потужних фреймворків кардинально поміняв всю суть фронтенд-програмування.
Раніше JS (а іноді DHTML) в 90% випадків використовувався для дурних анімацій, меню, що виїжджають, та інших так потрібних людям з повільним інтернетом функцій. Зараз браузерне програмування дозволяє створювати веб-додатки, які роблять чудеса, працюючи разом із серверним API.
Тепер про професію: 10 років тому верстальник був чорноробочим. Все програмування відбувалося виключно на стороні сервера, а наша з вами задача зазвичай зводилася б до того, щоб верстка була максимально схожою на макет. Хороший верстальник верстав «піксель в піксель», але далі все одно віддавав роботу програмістам. З тих пір багато чого змінилося, тепер є посада фронтенд-розробника, і його завдання зазвичай не менш важливі, ніж серверного програміста.
У цьому курсі ми не будемо вдаватися в складності програмування. Наша мета — навчитися верстати макети й створювати нескладні сайти. На основі цих базових знань ви зможете визначити, чи цікаво вам займатися такими завданнями і, якщо так, то вибрати спеціалізацію і продовжувати навчання. Якщо немає — читати про Whatsapp і Viber, попиваючи сік у себе в кварталі.
Так що якщо ви розробник-початківець — ласкаво просимо до навчання. Якщо у вас за плечима є досвід розробки сайтів, приєднуйтесь до мене: пропонуйте свої ідеї, створюйте уроки і приймайте участь в навчанні новачків.
Зміст курсу
Уроки будуть додаватися сюди поступово, поки я коротко викладу тут саму програму.
HTML
Ми почнемо з найпростішого — основ мови HTML:
- що таке HTML, навіщо він потрібен і де використовується
- як він змінювався за час існування
- що таке Doctype
- основні теги та їхні атрибути
- мета-теги (метадані) і мета-тег viewport
- заголовки H1-H6
- як браузер обробляє 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 часов в день, но новичку сложно это сделать, особенно в одиночку, ещё я советую учить английский, ибо там зарплаты совсем другие…
Ждем!! Очень хочется хороший и толковый курс, где бы разъяснялись все тонкости.
Уже 2 месяца с мелкими перерывами изучаю html и css , сейчас начал JavaScript, но делаю это на англ. язычных ресурсах. С радостью буду следить за тем что вы делаете и советовать друзьям-товарищам, но при условии что вы будете пунктуальны и не занудны в своих уроках. Надеюсь научусь чему-то новому. Удачи в проекте.
@Александр, это же УРОКИ. Конечно, я буду занудным!
@Назар Токарь, Главное в занудстве, не достичь мастерства Евгения Попова)).
@Александр, а кто это?
Отличное заявление. Буду следить за статьями.
С нетерпением ждем-с :)
Спасибо, Назар!
Не забывайте комментировать :)
С интересом послежу:)
Что же, ждём первого урока :)
а просто ссылку дать нельзя на скачивание курса!??
@Максим, нет. Во всяком случае, пока нет :)