Web розробник. Верстка та програмування для сайтів

Верстка сайту. 1-й семестр.

Базові поняття

• Загальні поняття - що таке браузер, призначення HTML і CSS.
• Який редактор вибрати для роботи.
• Структура HTML-документа.
• Поняття тега.
• Кодування документа.
• Робота з хостингом (переносимо сайт на хостинг).
• Підбір доменного імені, пов'язуємо доменне ім'я з сайтом.

HTML

• Форматування заголовків і абзаців.
• Призначення заголовків.
• Базові теги форматування тексту.
• Посилання, посилання-закладки, посилання-зображення.
• Додавання зображень на сторінку, зміна параметрів зображення.
• Списки.
• Просте меню. Випадаюче меню.
• Таблиці. Складні таблиці, вкладені таблиці.
• Додавання на сторінку елементів форм.
• Роздільники, спецсимволи.
• Розміщення на сайті відео і аудіо, блоку "поділитися в соціальних мережах".
• Вставка на сайт іконки-фавікон.
• Основи пошукової оптимізації (SEO).

CSS

• Для чого потрібні стилі на сторінці.
• Способи підключення CSS.
• Поняття селектора.
• Робота з текстом - завдання шрифту (системні, зовнішні, гугл-шрифти), накреслення, розміру. Оформлення тексту - підкреслення, новий рядок, висота рядка, міжсимвольний інтервал, зміна регістру.
• Одиниці виміру.
• Способи задання кольору.
• Оформлення списків.
• Робота з фоном елементів і сторінки.
• Пожвавлення посилань. Псевдоселектори посилань. CSS-спрайт.
• Знайомство з класами і ідентифікаторами.
• Властивості блоків - розміри, відступи, рамки.
• Позиціонування елементів.
• Знайомство з властивістю float. CSS3: прозорість, тіні, заокруглення, трансформації і плавні переходи, анімація.

Верстка

• Верстка жорсткого дизайну.
• Верстка гумового дизайну.

Основи Photoshop для верстальника

• Знайомство з редактором, настройка його під себе.
• Основні елементи інтерфейсу.
• Де в макеті знайти інформацію для верстки.
• Нарізаємо зображення з макета.
• Параметри тексту.

Програмування для сайту. 2-й семестр.

Введення в JavaScript, основні відомості, синтаксис

• Що таке JavaScript.
• Що ми можемо зробити з його допомогою.
• Як додати JavaScript на сторінку.
• Поняття змінних і робота з ними.
• Поняття масивів, види масивів.
• Поняття алгоритму, умови, циклу.
• Робота з рядками.
• Робота з функціями.
• Як отримати доступ до елементів сторінки.
• Зміна елементів сторінки за допомогою JavaScrip.t

jQuery - найпопулярніший фреймворк

• Підключення jQuery.
• Основи jQuery, структура коду.
• Ефекти плавності і анімація для елементів на сторінці.
• Робимо елементи сторінки інтерактивними, пожвавлюємо їх.
• Форми. Обробляємо дані введені в поля. Підготовка форми зворотного зв'язку для відправки на сервер (на пошту використовуючи шаблон PHP).
• Робимо форму прорахунку і обробки введеної інформації.
• Знайомство з технологією AJAX (обмін даними браузера з web-сервером без перезавантаження сторінки).
• Drag-and-drop - перетягування елементів сторінки і реакція сторінки на це.

Підсумок: По закінченню курсу у кожного студента буде кілька сайтів з інтерактивними елементами.