HTML5 і CSS3 Базовий

На цьому курсі Ви познайомитеся з новими можливостями HTML5 та CSS3, зрозумієте, чим вони відрізняються від старіших версій. Вивчите нові технології, які дозволять вам розміщувати музику, відео, а також визначати місцезнаходження користувача. Після курсу Ви не тільки зможете вдосконалити свій сайт, але й покращити його візуальну частину, додавши анімацію, тривимірні ефекти за допомогою стилів CSS.

На цьому курсі ви познайомитеся з новими можливостями HTML5 і CSS3, зрозумієте, чим вони відрізняються від старіших версій. Вивчіть нові технології, які дозволять вам розміщувати музику, відео, а також визначати місцезнаходження користувача. Після вивчення курсу ви також зможете удосконалювати візуальну частину свого сайту шляхом додавання анімації, тривимірних ефектів та адаптивності за допомогою стилів CSS.

На веб-сайтах часто розміщуються відеоматеріали, а на деяких веб-сайтах потрібні інструменти для відтворення звукових файлів. У HTML5 з'являється ряд елементів, за допомогою яких спрощується створення мультимедійних сторінок за допомогою аудіо або відео. Для цього уроку Вам знадобляться базові знання JavaScript для того, щоб контролювати відтворення мультимедійного контенту на HTML5 сторінці. Також Ви дізнаєтесь, як можна кодувати звук та відео різними кодеками для підтримки відтворення у різних браузерах. У другій частині уроку будуть розглянуті нові елементи форм, які дозволяють спростити створення сторінок реєстрації, авторизації та інших елементів взаємодії з користувачем.

Мікродані – це новий підхід до створення додаткової описової інформації для HTML документа. За допомогою мікроданих ми можемо в HTML сторінці, крім самої структури документа, зберегти спеціальну інформацію, яка буде корисна пошуковим системам та іншим програмам, що аналізують документи. У цьому уроці Ви дізнаєтесь, як використовувати мікродані та словники мікроданих у HTML5. Друга частина уроку буде присвячена геолокації. Ви навчитеся створювати програми, які зможуть отримати координати користувача та визначити його поточне положення. Ви дізнаєтесь, як можна комбінувати Geolocation API та Google карти.

Один з найпопулярніших і найвідоміших елементів HTML5 – це canvas. З використанням canvas вже написано багато бізнес-додатків і браузерних ігор. За допомогою canvas та JavaScript коду frontend розробник тепер може генерувати графіку на стороні клієнта. Canvas складний і дуже потужний елемент HTML5, на цьому уроці Ви побачите приклади роботи з графікою на стороні клієнта, навчитеся створювати анімацію і різні ефекти.

На цьому уроці Ви дізнаєтеся про нові функції HTML5 для зберігання даних у браузері клієнта. Ви дізнаєтеся, що таке localStorage та sessionStorage. Побачте основні відмінності веб-сховищ від cookie-файлів. Цей урок також буде корисним для тих, хто хоче навчитися створювати сценарії JavaScript, що виконують складні обчислення. Друга частина уроку присвячена специфікації Web Worker. Ви навчитеся використовувати багатопоточне програмування JavaScript. Третя частина уроку буде присвячена створенню автономних програм, які можуть працювати без доступу до Інтернету. HTML5 Offline Application – це новий механізм, який дозволяє створити програми, близькі до звичайних настільних програм. І на цьому уроці Ви дізнаєтесь, як це робити.

Будь-який FrontEnd розробник знає, що таке CSS, але не кожен вміє користуватись можливостями, які з'явилися у CSS3 – новій версії формальної мови визначення стилю документа. За допомогою декількох інструкцій тепер можна робити складні графічні ефекти, які раніше займали багато часу. На цьому уроці Ви дізнаєтеся про стан специфікації CSS3 і про те, в яких браузерах підтримується CSS3. Також ви дізнаєтеся про те, які нові селекторні функції були введені в CSS3, які зміни торкнулися властивостей, за допомогою яких задаються кольори, фонові зображення та рамки елементів.

Використання дизайнерських шрифтів у веб-додатках завжди було проблемою, тому що шрифт для коректної роботи сторінки повинен був бути встановлений на комп'ютері відвідувача сайту. Тепер, використовуючи веб-шрифти, ми можемо використовувати будь-який шрифт у документі, не побоюючись того, що текст буде не красиво відображатися в браузерах користувачів. Також на цьому уроці Ви навчитеся оформляти текстові блоки – встановлювати тінь для тексту, розбивати текст на кілька колонок та генерувати текст за допомогою CSS правил та псевдо елементів.

Псевдокласи – елементи CSS правил, за допомогою яких можна визначити оформлення елементів, які змінили свій стан через дії користувача чи інші причини. Наприклад, за допомогою псевдокласів ми можемо визначити стиль елемента, який буде застосований тільки в тому випадку, якщо користувач навів курсор на елемент. У CSS3 з'явилося багато псевдокласів, які дозволяють легко оформляти документ. На цьому уроці ви дізнаєтеся про всі псевдокласи, описані в новій специфікації, а також дізнаєтеся, як можна створювати градієнти в CSS і як змусити старі браузери відображати ефекти CSS.

Анімація - одне із завдань, які зазвичай вирішуються за допомогою JavaScript бібліотек. На цьому уроці будуть розглянуті властивості, які дозволяють без застосування додаткового коду за допомогою лише одного CSS створити анімаційні ефекти. На цьому уроці будуть розглянуті два можливі способи анімації – через властивість transition та через властивість animation. Також Ви дізнаєтесь про те, як працюють трансформації в CSS. Ви навчитеся використовувати трансформації translate, rotate, scale, skew і навіть трансформувати об'єкти у тривимірному просторі, створюючи цікаві ефекти для сторінок.

Синтаксис CSS має багато недоліків – розробник не може створювати змінні, створювати блоки стилів та повторно їх використовувати як звичайні функції, використовувати арифметичні операції у стилях. Усі перелічені вище недоліки можна прибрати, застосувавши бібліотеку LESS для додавання до CSS додаткової динаміки. На цьому уроці Ви дізнаєтесь, як підключити LESS та вивчіть основні можливості цієї бібліотеки. На другій частині уроку буде розглянуто поняття адаптивного дизайну на прикладі невеликої веб-сторінки, яка буде адаптуватися під розміри браузера для того, щоб коректно відображатись на будь-якому пристрої – персональному комп'ютері, планшеті чи мобільному телефоні.