Верстаем landing page на HTML5

Верстаем landing page на HTML5

На первом уроке мы сверстаем часть landing page, познакомимся с HTML5 и CSS3.
Расммотрим темы:
* vs code – пару слов о редакторе кода;
* adobe assets – Фотошоп не нужен;
* emmet – ускоряем написание HTML-разметки;
* HTML5 – где применять section, header, nav и другие новые теги;
* normalize.css – нормализация стилей;
* Google fonts – подключение сторонних шрифтов;
* vh – единицы измерения;
* display flex – как центрировать элементы.
Файлы и полезные ссылки к уроку: https://github.com/frendly/geekbrains-1

На втором уроке мы сверстаем часть landing page и рассмотрим:
* less в редакторе vs code,
* меню на flex, два варианта: only css, with js,
* списки на flex,
* использование ссылок-якорей.

На третьем уроке речь пойдет о:
* live reload в vscode,
* верстаем блоки на flex,
* центрирование фоновых изображений,
* разница между списками в html: ul(ol) и dl,
* позиционирование текста поверх изображений. PSD-макет и результат разработки на гитхаб.

Средние оценки

4.8 / 5
Программа
4.8 / 5
Преподаватель

Преподаватели

  • 1
    Урок 1. Верстаем landing page на HTML5. Часть 1
    На первом уроке мы сверстаем часть landing page, познакомимся с HTML5 и CSS3. Расммотрим темы: * **vs code** – пару слов о редакторе кода; * **adobe assets** – Фотошоп не нужен; * **emmet** – ускоряем написание HTML-разметки; * **HTML5** – где применять section, header, nav и другие новые теги; * **normalize.css** – нормализация стилей; * **Google fonts** – подключение сторонних шрифтов; * **vh** – единицы измерения; * **display flex** – как центрировать элементы. *Файлы и полезные ссылки к уроку: https://github.com/frendly/geekbrains-1*
  • 2
    Урок 2. Верстаем landing page на HTML5. Часть 2
    На втором уроке мы сверстаем часть landing page и рассмотрим: * less в редакторе vs code, * меню на flex, два варианта: only css, with js, * списки на flex, * использование ссылок-якорей.
  • 3
    Урок 3. Верстаем landing page на HTML5. Часть 3
    На третьем уроке речь пойдет о: * live reload в vscode, * верстаем блоки на flex, * центрирование фоновых изображений, * разница между списками в html: ul(ol) и dl, * позиционирование текста поверх изображений. [PSD-макет и результат разработки на гитхаб](https://goo.gl/gxDqta).
  • Нажимая на кнопку "Добавить в корзину", Вы принимаете условия договора оферты.

После обучения мы предлагаем всем выпускникам оценить программу курса и преподавателя, а также при желании оставить отзыв.
Все отзывы и оценки мы публикуем без изменений.