1. НTML
2. CSS
3. JavaScript
4. Bootstrap
5. PHP
6. Бази даних
7. висновки

WEB-програмування включає в себе досить багато мов і технологій. Але, щоб не заплутатися у всьому цьому різноманітті, уявляю схему типового web-додатки:

Як видно зі схеми, є кілька блоків: це верстка, серверне програмування і бази даних.
Web-програмісту, по-хорошому, потрібно вміти розбиратися в цьому хоча б поверхово. Навіть вузькоспеціалізованого верстальщику знадобилися б знання в області баз даних, тому що тоді йому буде зрозуміліше, звідки беруться дані для відтворення його красивою сторінки. А без знань основ серверного програмування він не зможе створити в повній мірі інтерактивну сторінку, яка використовує технологію ajax (спілкування з сервером, без необхідності перезапуску сторінки). На практиці буває неможливо передбачити, з чим доведеться працювати. Наприклад, кілька тижнів поспіль можуть потрапляти завдання тільки на верстку, або з'явиться дуже важливий проект зі складною серверної частиною. Тому вміти робити більше, "ніж треба", корисно і для роботи відділу в цілому і для кожного програміста особисто, тому що підвищує персональну конкурентоспроможність. Якщо є бажання розвиватися в програмуванні і ти зовсім новачок, то найпростіше почати з верстки. Верстка - це створення зовнішнього вигляду web-додатки. Те, що ви зараз читаєте - теж прив'язано кимось з використанням наступних технологій.

НTML

HTML - мова розмітки сторінки. Це власне каркас будь-якої сторінки (якщо ви натиснете в вашому браузері Ctrl + U, то ви побачите весь html код цієї статті. Ця мова розмітки лякає, але він дуже простий. Щоб його освоїти, досить пройти короткий інтерактивний самовчитель ( htmlbook.ru , htmlacademy.ru , w3schools.com ) Або щось аналогічне. Головне, що потрібно запам'ятати про html - це каркас сторінки, його не варто використовувати для додання зовнішнього вигляду (хоча так вийшло, що він це вміє робити).

CSS

Наступна технологія це CSS - каскадні таблиці стилів. Ось CSS якраз і займається наданням вашій сторінці гарного зовнішнього вигляду. З його допомогою можна розташовувати елементи, зафарбовувати фон, надавати тексту різний розмір і т.д. Структура css ще простіше, ніж html - він складається з селектор (для чого застосовується правило) і правил (власне саме оформлення). Наприклад, щоб зробити текст всіх абзаців тексту (а це html тег <p>) червоним, досить написати таке правило: p {color: red; }.

JavaScript

І остання технологія в верстці - це повноцінний клієнтський мову програмування - JavaScript. Сучасні тенденції web-розробки підштовхують до того, щоб використовувати його частіше, але ми поки зупинимося на його базовому використанні - надання інтерактивності сторінці. Якщо ви хочете, щоб блок розкривався при натисканні, або додавався після натискання кнопки "додати" - це все js. Найчастіше він відповідає за обробку якихось подій (натискання, наведення, ...) і запуск певних змін слідом за цим. Також важливу роль відіграє технологія ajax - яка дозволяє робити запити на сервер, без необхідності перезавантаження сторінки.

На рахунок CSS і JavaScript я б сказав так - прочитати про них потрібно, але не треба вдаватися в деталі. Справа в тому, що на чистому js і css доводиться писати не так часто. Для вирішення типових задач вже давно були придумані бібліотеки і фреймворки, які значно спрощують роботу.

Bootstrap

І перший фреймворк це Bootstrap. Він включає в себе css і js компоненти. Подивитися список всього, що в ньому є можна тут . Так, сторінки зверстані з його допомогою виглядають однаково, і на реальному сайті ви, швидше за все, будете його сильно допрацьовувати. Але є великий клас web-додатків, які використовуються всередині організацій, а значить зовнішній вигляд не є ключовим моментом. У них акцент робиться на функціоналі і зручність використання - а bootstrap-а для цього цілком достатньо. Крім того, вибираючи якусь готову красиву тему для сайту, ви з подивом виявите, що більшість хороших тим зроблені з використанням цього фреймворка. А значить bootstrap потрібно як мінімум знати і вміти ним користуватися.

На цьому етапі ви зможете зверстати сторінки з використанням bootstrap-а або розібратися в купленій красивою темі для сайту. Але це "мертві" сторінки, тому що вони не реалізують ніякого функціоналу.

PHP

Вся логіка програми, найчастіше, робиться на сервері. Для цього потрібно використовувати серверний мова програмування. Їх величезна кількість, але ми в своїй роботі використовуємо php. Якщо ви коли-небудь працювали з с / с ++ або подібними мовами - то освоїти php буде легко. Якщо ж ні - не турбуйтеся, він досить простий. Для роботи на базовому рівні досить знати синтаксис мови і мати загальні уявлення про об'єктно-орієнтованого програмування (ООП).
У синтаксис зазвичай включають роботу зі змінними, масивами, функціями, умовними операторами, циклами. А в області ООП треба знати що таке класи, об'єкти, поля і методи, модифікатори доступу (публічний, приватний, ...), успадкування і статичні поля і методи. Це може бути зайвим, але фреймворки, здебільшого, все об'єктно-орієнтовані. І якщо ви пропустите цей блок, то не зможете ними скористатися у своїй роботі. До речі майже всі, що потрібно знати з основ php можна побачити в цій шпаргалці .

Бази даних

Останній блок - це бази даних. Звичайно, web-додаток може бути написано і без їх використання, але саме БД дозволяє вирішувати деякі завдання вкрай швидко і ефективно. Так якщо у вас є список студентів, і вам треба вибрати всіх, хто народився до 2000 року, у кого день народження в лютому, хто вчиться на "4 і 5" з математики, відвідує гурток "Вишивання" і вільний після 6 вечора - їх всіх можна знайти за частки секунди, за умови, що ця інформація зберігається в базі даних. Щоб працювати з БД потрібно знати, що таке: база даних, таблиця, поля в таблиці, типи полів, що таке запис. Ну і кілька найбільш поширених запитів, які для простоти називають CRUD - C reate R ead U pdate D elete, тобто додавання записів в базу, пошук потрібних даних, зміна даних та видалення їх.

І після того, як ви вмієте верстати, розумієте як писати код на php і розумієте принципи роботи з базами даних - можете приступати до вивчення якого-небудь php фреймворка. Ми використовуємо Yii2 - який досить простий і функціональний. Він покриває майже весь круг вирішуваних нами завдань. Якщо не терпиться його побачити - то ось посилання на офіційну документацію, де про нього досить докладно написано. Більш детально про використання фреймворка в роботі я розповім як-небудь іншим разом, адже ця стаття для тих, хто тільки хоче вступити на шлях освоєння web-технологій.

висновки

Таким чином можна запропонувати наступний план освоєння професії:

1. HTML-самовчитель (основні теги і структура сторінки).
2. CSS + JS на базовому рівні (загальні моменти, не вдаючись у подробиці)
3. Bootstrap (css / js фреймворк, який досить простий і функціональний)
4. Основи PHP і об'єктно-орієнтованого програмування, на рівні шпаргалки.
5. Основні поняття баз даних.

Будь-який напрямок в web-розробці так чи інакше стосується всіх цих тем. Отримані знання не будуть зайвими. Крім того, освоївши все вищеперелічене (а це реально зробити за тиждень, приділяючи трохи часу кожен день), ви вже сміливо можете претендувати на посаду учня програміста в нашому відділі. Сподіваюся, вам стало зрозуміліше, що таке web-розробка і наскільки просто зробити перший крок до своєї мрії стати Програмістом.