HTML/CSS

How to use BEM naming CSS in practice? Типичный Верстальщик • Анна Блок

1) Naming HTML/CSS — https://tpverstak.ru/common-css-class…

Lern to code with scrimba

CODING BOOTCAMP PRIMER

LEARN BULMA CSS        creating_interfaces_with_bulma_sample    BULMA

ПРАКТИЧЕСКИЙ КУРС ПО ВЕРСТКЕ ЛЕНДИНГА ITVDN

 ВЕРСТКА В LPGENERATOR   https://lpgenerator.ru/features/

HTML/CSS RESOURCES Discussion1HTMLandCSS

Марафон Grid CSS

Урок 1

— Основные понятия;

— Создание базовой сетки;

— Домашнее задание.

 

Урок 2

— Определение размера строк и столбцов сетки;

— Домашнее задание.

 

Урок 3

— Свойство для определения шаблона сетки;

— Домашнее задание.

 

Урок 4

— Создание промежутков между столбцами и строками;

— Домашнее задание.

 

Урок 5

— Выравнивание содержимого;

— Домашнее задание.

 

Урок 6

— Нумерация линий сетки;

— Домашнее задание.

 

Урок 7

— Присвоение имен линиям сетки;

— Домашнее задание.

 

Урок 8

— Совместная работа с Flexbox CSS;

— Домашнее задание.

 

Урок 9

— Явная и неявная сетка;

— Домашнее задание.

 

Урок 10

— Свойства, которые объединяют несколько свойств в одну запись;

— Домашнее задание.

 

Урок 11

— DevTools;

— Плагин для удобной работы с Grid CSS;

— Что делать с поддержкой?

    Список тем для наставничества

 

  • Графические редакторы

 

– Adobe Photoshop для верстальщика

– Adobe Illustrator для верстальщика

– Avocode для верстальщика

 

 

  • Основы HTML

 

– Подготовка проекта к верстке (создание папок, иерархии, создание html-файла);

– Структура html-документа (html, head, body) ;

– Рассмотрим самые популярные теги HTML по работе с текстом, ссылками, кнопками, списками, блоками, изображениями, аудио, видео, таблицами, формами;

– Узнаем для чего нужные семантические теги (header, footer, nav, section, main и пр.);

– Идентификаторы и классы

 

 

 

  • Основы CSS

 

– Подключение CSS к документу HTML;

– Структура CSS-файлов;

– Способы подключения шрифтов на страницу;

– Форматирование текста при помощи CSS;

– Стили для работы со шрифтами;

– Разные типы записи цвета в CSS документе;

– Селекторы, которые стоит знать и применять;

– Стилизация ссылок;

– Блочные/строчные элементы;

– Типы позиционирования элементов;

– Работа с изображениями;

– Работа со списками;

– Работа с after и before;

– Фильтры в CSS;

– Центрирование объектов в документе;

– Создание рамок и радиусов в CSS;

– Создание теней;

– Float;

– Создание градиента в CSS

– Что такое кроссбраузерность?

– Переходы в CSS;

– Трансформации в CSS;

– Создание анимаций при помощи CSS3;

– Проверка HTML и CSS на валидность;

– Медиа-запросы;

– Работа с SVG-изображениями;

– CSS Flexbox;

– CSS Grid.

 

 

  • Основы jQuery

 

– Библиотеки JavaScript;

– Добавление библиотеки jQuery на страницу;

– Основные селекторы;

– Фильтры jQuery;

– Добавление содержимого на страницу;

– Установка и чтение атрибутов элемента.

– Ожидание загрузки HTML-кода;

– События наведения и смещения указателя мыши;

– Всплывающее окно авторизации;

– Распространенные задачи, решаемые с помощью jQuery.

– Слайдеры

 

 

  • CSS-препроцессоры

 

– Подробный обзор SASS/SCSS;

– Подробный обзор LESS;

– Подробный обзор Stylus;

– Какой препроцессор выбрать для работы?

 

  1. Создание сайта на бесплатном хостинге Github

– Краткое описание систем контроля версий. Для чего они нужны?

– Регистрация на сайте Github;

– Создание репозитория;

– Наполнение репозитория файлами.

 

  1. CSS-фреймворки

– Что такое CSS-фреймворки?

– Какие CSS-фреймворки существуют на сегодняшний день?

– Boostrap: какую версию выбрать?

– Обзор элементов Boostrap.

 

Домашнее задание.

 

  1. Актуальные темы.

– Как найти свой первый заказ или устроиться на работу, если ты новичок;

– Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;

– Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами.