11 января - Инструменты разработчика
Редакторы кода
Visual Studio Code (самое популярное райт нау), Sublime text, Atom (был популярнее
раньше)- больше текстовый редактор
WebStorm - потяжелее и посложнее
Emmet - позволяет быстрее писать код и совершать меньше ошибок, круто использовать
вначале, но когда уже понял что к чему.
Эбаут браузер (про dev tools)
Inspect/F12/Проверить страницу
Лучше всего хром, файерфокс тоже ок
Вкладка Console для JS
В сафари девтулс просто есть - он не ок
Figma
Github - система контроля версий, работать над одной штукой в одном репозитории
(гитхаб, гитлаб и всякие еще).
Яндекс браузеры - тот же Гугл только бывает что-то старее
Гитхаб десктоп и терминал надо и там и там.
17 января - в 19:00 Лекция про аштиэмэль1
Сертификат дается только когда ты все сделал (Диплом профессии)
Лекция №1
7 недель учебы
4 недели доработки и защиты
ИТОГИ
Обязательно прочитать:
FAQ
Защита —Регламент
Раздел Помощи
Движки Blink (google, yandex, opera)
Gecko (Mazilla)
WebKit (Safari)
MSHTMl, EDGEHTML (IE)
Comman+option+I
Figma - Desktop app (именно приложение скачивать лучше)
Fork - копировать проект к себе в профиль
Clone - закать на комп
Pull - скачать изменения (тип забрать изменения)
Commit - зафиксировать изменения
Push - закачать изменения в форк (Command+R в гитхабе)
Процесс Мержа - принятие изменений, их внедрение (в мастер репозиторий)
Наставники: 9 недель - один наставник
Проекты: она все разные по сложности. Седона легкий для тех кто первый раз (ми)
20 ЯНВАРЯ РАЗМЕТКА
хипер текст маркап лангуаге
Структура и содержание это все ок
Теги - парные и одиночные, между символами больше и меньше - код
Доктайп - версия языка
Атрибут ланг у хтмл - язык
Хеад - служебная инфа (мета и тайтл)
Боди - содержимое
Внутри тега хеад - линк, тайтл, мета
Внутри бади: структурные (мэйн - основа, хеддер и тд) текстовые теги (ул, ол, ли, дл, дт, до,
пре, код, ку, сайт, блэккуот, спан, пэ) теги для форм(инпут - текстовое, чекбокс,
радиокнопка; лейбл; текстареа; селект)
Все теги описаны в спецификации - документ, где описана работа тегов
ВАЛИДАТОР - два тип ошибок - ворнинг(нот рили страшно) и -эррор
Арктикл - смысловой элемент - селекшн (Вернуться где-то на 18-19 минуты чтобы
послушать это еще раз)
Потоковые документы - тег мэйн, списки (важно использовать только ли), <p> - параграф в хтмл это смысловая структура (контейнер для строковых элементов) внутри пэ нельзя
использовать списки или заголовки
Фразовые теги: <img> (почитать про декоративные и контентные изображения), <button>,
<span>
Постановка задачи: разметка - содержание и структура без декоративки (css)
Семантичность - использовать теги по назначению
Доступность: скринридер - для невидящих людей озвучивание страницы сайта, еще
подразумевается перемещение по сайту с помощью клавиатуры
Выразительность - точная подборка тегов даже для мелких элементов, вследствие чего
код легче читать.
Алгоритм решения - выделение повторяющихся блоков, выделяем крупные смысловые
элементы и называем их
Написание разметки (теги)- крупные блоки и смысловые элементы внутри: сверху вниз,
снаружи внутрь
Подбор атрибутов - у академии есть кодгайд - надо писать код по нему, тип стандарт
академии
Класс - пишем сразу с тегами, нужны не для всех тегов, как именовать классы (где-то на
сайте академии есть где собрали имена классов, чтобы легче придумывалось очевидное)
Почитать ЦИКЛ СТАТЕЙ ПРО МЕТОДИКУ СЕМАНТИЧЕСКОЙ ВЕРСТКИ
Контентное изображение - имеет смысл без текста
Не забыть отключить в процентиках - мультиплай
27 ЯНВАРЯ ГРАФИКА И БАЗОВАЯ СТИЛИЗАЦИЯ
По дз - обновить дубликат
Растровая графика - каждый пиксель прописан
Векторная графика - есть вектор ему задают направление, линия становится просто
длиннее при увеличении
Нужно достать из макета картинки, шаги:
- Определиться
- -формат
- -оптимизация
1. Как на макете так и не верстке
2. Слитые слои
3. Другая форма
4. Повторяющиеся паттерны
1. Экспортировать нужно с фоном?
png - лучше чем jpeg - вся область с фоном и есть картинка, но в css фон продублировать.
Разнородный фон - то это png (прозрачный фон для предмета и можно сразу на два фона
наложить)
2. Эбаут слитые слои - экспортировать несколько картинок как одну картинку
(группировать).
3. Форма - с помощью css подгонять под нужную форму (пример с шариком мороженого)
4. Паттерны - повторяющиеся элементы (например фон - можно маленький квадратик
выбрать и потом ринитом залить во весь фон)
ГРАФИКА
Растр - jpeg - для фотографий и полноцветных изображений, png - малоценное
изображение (схемы, карты, прим. Схема метро или Гугл карты)
Вектор - svg(иконки, не детализированные изображения)
CSS графика - круг, квадрат, и прямоугольник можно сделать с помощью css.
Алгоритмы выбора
- простое - тсс
- Без прозрачности - джпг
- С полупрозрачность - пнг
- Малоценные (и вектор в макете - свг и растр в макете-пнг)
SVGOMG, Squoosh
БАЗОВАЯ СТИЛИЗАЦИЯ
Ctrl и alt(или опшн, в чате все пишут про опшн) - высчитывает в фигме расстояния между
элементами
Наследование - возможность css применять стили от своего родителя
Каскад - возможность на одном элементе использовать несколько стилей
Специфичность - что больше весит к тому и применяется
ПОДКЛЮЧЕНИЕ СТИЛЕЙ
Link rel href
ПОДКЛЮЧЕНИЕ ШРИФТА
@font-face {
F-family
Style
Weight
Src:url format
F-display: swap
СТАВИМ ЗАДАЧИ
Шрифты
Текстовые параметры и фоновый цвет
Внедряем графику на страницу проекта
3 ФЕВРАЛЯ СЕТКИ
Боксовая модель документа (блочные строчные флексовые гридовые)
БЛОК - крупные прямоугольные области на странице
.block {
background-color:
bolor:
padding-top
padding-Left
bottom
right
border: 30px solid red (width style color);
margin(марджин): 30px 30px 30px 30px;
ФЛЕКС
Главная ось (х) и поперечная ось (у)
Flex-direction по умолчанию row, развернуть ось - row-reverse; есть еще column and rowcolumn
Justify-content: ex-start или ex-end или center или space-between или space-around
Свойство ex-grow, margin-left or right
СЕТКИ
Модульные сетки
7 ФЕВРАЛЯ СЕТКИ ПРОДОЛЖЕНИЕ
Строчные - нету переноса
Блочно-строчные боксы (внутри - блок, снаружи - инлайн) - в целом, непонятна
fl
fl
fl
Вопросы - выпадает блок-2 из-за того что Марджин блока2 больше чем Марджи блока1
что нужно сделать чтоб он не выпадал? Добавить паддинг блоку1 - есть такое правило,
еще можно использовать дисплей: флекс, но не очень понятно как работает паддинг у
блока1