основи HTML та CSS
HTML і CSS-мови, за допомогою яких верстають сторінки в Інтернеті. Опанувати основи цих мов зовсім неважко-це перший крок до професії веб-розробника.
Курс "Основи HTML і CSS" дозволить оволодіти основами верстки веб-сторінок, познайомитися з принципами роботи внутрішніх механізмів браузера і способами розкладки елементів на сторінці. В рамках курсу розглядаються HTML і CSS, а також принципи написання валідного ефективного коду для роботи в браузерах. В результаті ви освоїте способи створення і верстки сторінок, які будуть оптимально працювати в незалежності від браузера і пристрою.
JavaScript
JavaScript-єдина мова програмування, яка підтримується всіма браузерами. Його знає будь-який веб-розробник. Якщо ви збираєтеся вивчати JavaScript, цей курс — чудовий початок.
Ви освоїте синтаксис JavaScript, його особливості і складні моменти. Окрему увагу в курсі ми приділили наступним темам: прототипи, конструктори, асинхронний код, Node.js і DOM.
основи HTML і CSS
Тиждень 1. Вступ до HTML
Перший тиждень курсу присвячений знайомству з HTML. Ви дізнаєтеся, звідки з'явилася ця мова розмітки, як вона розвивається сьогодні, з чого складаються HTML-елементи і як розмітити ними звичайний текст.
чого я навчуся?
- зрозуміти структуру тегу HTML та документа HTML.
- розбиратися в видах елементів.
- встановити атрибут кількома способами.
- працювати з коментарями в коді.
- розуміти, що таке HTML Entity.
- дізнаватися кореневі мета-елементи і способи їх використання.
- працювати з Open Graph і його тегами.
- групувати контент за допомогою елементів.
- створювати списки різних типів, декількох рівнів вкладеності.
- створювати таблиці різної складності.
- описувати різні види текстів різними видами тегів.
На другому тижні ми продовжимо вивчення HTML. Ви дізнаєтеся, що таке семантична розмітка і чому важливо дотримуватися семантики. Навчіться створювати посилання в документі HTML. Вам належить попрактикуватися в розмітці тексту.
чого я навчуся?
- описувати код і формули в тексті.
- використовувати мікророзмітку.
- створювати посилання за допомогою одного з найважливіших елементів у HTML.
- розбиратися в основних елементах форм. Вміти створювати форми.
- використовувати посилання для різних цілей.
- розуміти, для чого використовуються якоря.
- використовувати вбудовані елементи для відображення різного виду вмісту.
- розбиратися в різних способах написання текстів на різних мовах.
тиждень 3. Вступ до CSS
Поговоримо про те, чому з'явився CSS і розберемося в його структурі. Ви навчитеся грамотно застосовувати і комбінувати різні типи селекторів (тегів, КЛАСІВ, ідентифікаторів і атрибутів). Розповімо, що таке псевдоелементи і псведокласи, які вони бувають і як з ними працювати. Ви розберетеся в тому, що таке специфічність, як вона вираховується і як це впливає на порядок застосування властивостей в CSS.
чого я навчуся?
Четвертий тиждень курсу присвячений роботі зі шрифтами та текстом. Ви дізнаєтеся про проблеми, пов'язані з використанням нестандартних шрифтів і способах їх вирішення. Навчіться керувати виведенням шрифтів,застосовувати колір для тексту, створювати цікаві ефекти за допомогою тіні. Дізнаєтеся, як реалізувати многоколоночную розгортку і як грамотно обходити проблему переповнення тексту. Отриманих навичок вам вистачить, щоб зверстати власну газету.
чого я навчуся?
На п'ятому тижні ви дізнаєтеся про основні види трансформацій і навчитеся створювати анімації тільки за допомогою CSS. Попрактикуєтеся в створенні анімацій різних рівнів складності.
чого я навчуся?
На шостому тижні курсу ви побачите, що все є прямокутники. Розберетеся з ключовими поняттями відображення елементів на сторінці: бокси, відступи, межі. В кінці тижня вам належить зверстати макет незвичайного інтернет-магазину.
чого я навчуся?
Позиціонуванням називається положення елемента в системі координат. Розрізняють чотири типи позиціонування: нормальне, абсолютне, фіксоване і відносне — від них залежить і система координат. На цьому тижні ви познайомитеся з усіма типами і навчитеся вибирати відповідний для ваших завдань.
чого я навчуся?
Поговоримо Flexbox і Grid — сучасних інструментах для верстки макетів. Обидва інструменти хороші по-своєму і повинні використовуватися спільно, а не як альтернатива один одному. В кінці тижня буде ще одне практичне завдання: ви додасте до магазину красиву вітрину.
чого я навчуся?
Дев'ятий тиждень присвячений браузерам: ви дізнаєтеся про їх базову архітектуру, познайомитеся з пристроєм движка рендеринга браузера, розберетеся, як браузери застосовують CSS і HTML.
чого я навчуся?
Ви навчитеся працювати з зображеннями і графікою. Дізнаєтеся про колірних моделях, форматах зображень в Інтернеті і способах їх оптимізації. Підсумкова практична робота-зверстати з нуля макет.
чого я навчуся?
Поговоримо про те, чому з'явився CSS і розберемося в його структурі. Ви навчитеся грамотно застосовувати і комбінувати різні типи селекторів (тегів, КЛАСІВ, ідентифікаторів і атрибутів). Розповімо, що таке псевдоелементи і псведокласи, які вони бувають і як з ними працювати. Ви розберетеся в тому, що таке специфічність, як вона вираховується і як це впливає на порядок застосування властивостей в CSS.
чого я навчуся?
- розбиратися, з чого складається CSS.
- вміти грамотно застосовувати та комбінувати різні типи селекторів тегів, КЛАСІВ, ідентифікаторів та атрибутів.
- розуміти механізми роботи псевдоелементів і псевдокласів.
- вибирати спосіб написання селекторів в залежності від структури HTML документа.
- розуміти, як вираховується специфічність і як це впливає на порядок застосування CSS властивостей.
- дізнатися, які є одиниці виміру в CSS.
- вміти збільшувати швидкість написання HTML і CSS.
Четвертий тиждень курсу присвячений роботі зі шрифтами та текстом. Ви дізнаєтеся про проблеми, пов'язані з використанням нестандартних шрифтів і способах їх вирішення. Навчіться керувати виведенням шрифтів,застосовувати колір для тексту, створювати цікаві ефекти за допомогою тіні. Дізнаєтеся, як реалізувати многоколоночную розгортку і як грамотно обходити проблему переповнення тексту. Отриманих навичок вам вистачить, щоб зверстати власну газету.
чого я навчуся?
- зрозуміти різницю між векторними та растровими шрифтами. Дивитися на Шрифти з точки зору типографіки.
- змінювати розмір шрифту.
- змінювати висоту рядка, відстані між буквах і словами.
- розуміти різницю між накресленнями і їх обробкою браузером. Вміти встановлювати їх за допомогою CSS. Розбиратися в загальноприйнятій класифікації шрифтів в веб і їх аналогами в типографіці. Вміти керувати сімейством шрифтів за допомогою CSS.
- використовувати основні властивості для роботи з текстом.
- розуміти, що таке колір переднього плану, застосовувати колір і встановлювати тінь для тексту.
- реалізовувати многоколоночную розгортку, обходити проблему переповнення тексту.
- розуміти нюанси розстановки переносів рядків всередині слів і пробілів.
- застосовувати псевдоелементи, що стосуються тексту.
На п'ятому тижні ви дізнаєтеся про основні види трансформацій і навчитеся створювати анімації тільки за допомогою CSS. Попрактикуєтеся в створенні анімацій різних рівнів складності.
чого я навчуся?
- розбиратися в популярних видах анімацій, які використовуються в веб-програмуванні.
- зрозуміти, як працюють основні перетворення.
- застосовувати множинні перетворення.
- розбиратися, як працюють перетворення в тривимірному просторі.
- робити плавний перехід від одного набору властивостей до іншого.
На шостому тижні курсу ви побачите, що все є прямокутники. Розберетеся з ключовими поняттями відображення елементів на сторінці: бокси, відступи, межі. В кінці тижня вам належить зверстати макет незвичайного інтернет-магазину.
чого я навчуся?
- розуміти, що таке Внутрішні, Зовнішні відступи і межа.
- розбиратися, як працюють бокси блочного рівня, як вираховуються їх розміри і положення, як їх змінювати.
- розуміти, що таке візуальна модель форматування і що впливає на положення боксу.
- задавати геометрію на основі інформації про особливості роботи процентних значень різних властивостей.
- розбиратися в особливостях математики блокових елементів.
- користуватися боксами інлайн-рівня.
- розрізняти інлайнові та інлайн-блокові елементи.
Позиціонуванням називається положення елемента в системі координат. Розрізняють чотири типи позиціонування: нормальне, абсолютне, фіксоване і відносне — від них залежить і система координат. На цьому тижні ви познайомитеся з усіма типами і навчитеся вибирати відповідний для ваших завдань.
чого я навчуся?
- знати, що таке відносне позионирование елементів.
- знати, що таке абсолютне позицонування. Чим відрізняється від відносного і як застосовується на практиці.
- знати, що таке фіксоване позиціонування. Знати про нововведення в специфікації відносної моделі позионирования, розуміти, що за ними потрібно стежити.
- знати, за якими правилами елементи накладаються один на одного.
- вміти грамотно застосовувати правила, за якими елементи накладаються один на одного.
- розуміти, як навколишні елементи взаємодіють з плаваючими елементами.
Поговоримо Flexbox і Grid — сучасних інструментах для верстки макетів. Обидва інструменти хороші по-своєму і повинні використовуватися спільно, а не як альтернатива один одному. В кінці тижня буде ще одне практичне завдання: ви додасте до магазину красиву вітрину.
чого я навчуся?
- розуміти, які є способи створення розкладки сторінки з використанням вже відомих елементів.
- працювати з Flexbox і Grid.
- створювати розкладку сторінки з використанням Flexbox і Grid.
- познайомитися зі специфікацією Grid, її особливостями і властивостями.
- розуміти Доречність використання тієї чи іншої специфікації в різних ситуаціях.
Дев'ятий тиждень присвячений браузерам: ви дізнаєтеся про їх базову архітектуру, познайомитеся з пристроєм движка рендеринга браузера, розберетеся, як браузери застосовують CSS і HTML.
чого я навчуся?
- розуміти базову архітектуру браузера.
- Розбиратися з пристроєм мережевого модуля браузера идвижка рендеринга.
- розуміти, як влаштований аналіз HTML і CSS документів і за якими правилами байти перетворюються в DOM і CSSOM.
- розуміти, як відбувається формування render tree і як браузери застосовують CSS.
- розбиратися, як браузери розраховують геометрію сторінки.
- розуміти, як зміни різних CSS властивостей впливають на компонування сторінки.
- розбиратися, як відбувається отрисовка сторінки.
- розуміти особливості виконання скриптів при аналізі документа.
Ви навчитеся працювати з зображеннями і графікою. Дізнаєтеся про колірних моделях, форматах зображень в Інтернеті і способах їх оптимізації. Підсумкова практична робота-зверстати з нуля макет.
чого я навчуся?
- розбиратися в які видах графічних зображень, які використовуються в веб.
- використовувати основні колірні моделі в розробці.
- знати про растровий і векторний формати зображень, про їх особливості.
https://privatelink.de/?https://frontendcourse.ru/