Skip to content

Latest commit

 

History

History
147 lines (132 loc) · 10.1 KB

HtmlCssQuestions.md

File metadata and controls

147 lines (132 loc) · 10.1 KB

Некоторые вопросы по вёрстке для собеседования frontend

Примеры тем и вопросов для собеседовааний

  • Работа браузера
  • Critical render path
  • Flexbox
  • CSS-grid
  • Когда применять flexbox, а когда grid
  • Вендорные префиксы
  • Что такое «CSS-директива»
  • Колонки (columns)
  • BEM
  • Canvas
  • CSS-анимация
  • SVG
  • Свойство transform
  • Свойство filter
  • Объединенеи и смешивание слоев (Compositing and Blending, свойства mix-blend-mode, isolation, background-blend-mode)
  • Понятие контекста
    • Как рабоатет z-index
    • Привести пример кода и спросить - какой элемент будет выше всех?
  • Понятия наследования, каскада и области видимости стилей
    • Различия в работе свойств initial, inherit, unset и revert
    • Что сделает этот css-код: .myClass {all: revert;}
  • Понятие специфичность селекторов («вес»)
    • Можно дать несколько примеров селекторов разного «веса» + аттрибут style в тэге + css-правило с !important — и спросить: какое правило в итоге применится? (каким будет цвет блока, например)
    • Дать пример с .tomato.tomato и .plum — какой цвет будет у элемента? (https://doka.guide/css/specificity)
  • Понятие потока (flow)
    • Какие CSS-правила будут действоать на разметку, если мы откроем в бразуере HTML-окументы без каких либо стилией (стили бразуера)
    • «Схлапывание» margin соседних блочных элементов
    • «Выпадение» верхних/нижних maring блочных элементов из родителя
    • Как работает float
    • Методы изоляции float: clear: both, overflow: hidden display: flow-root
    • Какие есть способы вывести элемент из потока
    • Разные виды position
    • Свойство inset
  • Понятие отображения | display
    • Какие есть значения display
    • Отличия блочных и строчных элементов
    • Чем отличается display: inline-block
  • Семантические эементы
    • Что такое семнатическая вёрстка
    • Приведите примеры семантический элементов
  • Единицы измерения в CSS
    • Какие самые популярные способы задать размер текста?
  • Работа с формами в HTML/CSS
  • Работа с псевдо-элементами и псевдо-классами
  • Перенос слов в CSS
  • Работа со шрифтами. Форматы шрифтов. Библиотеки шрифтовых пиктограмм
  • Графические форматы в вёрстке
  • CSS-свойтсво image-set() и html-тэг <picture>
  • CSS-переменные (они же «кастомные свойства»)
  • CSS-функции
  • Какие есть способы позиционировать элемент по центру вертикально/горизонтально (text-align: center, margi: auto, position:absolute + margin, line-height, разные вариации с vertical-align, grid, flexbox через ьфкпштЖ фгещ, flexbox через justify-content и align-items, margin + transform)
  • Какие есть способы скрыть элемент на странице? В чём их различия?
    • display: none, visibility: hidden, opacity: 0, clip-path, transparent, html-аттрибут hidden, html-аттрибут aria-hidden, смещение текста transition, скрытие позиционированием (вынос за рамки видимости блока), выставление нулевого размера, JavaScript...
    • Производится ли загрузка ресурсов, скрытых средствами CSS? (да)
  • Можно дать какую-то многовариантную задачку, и спросить: как вы её будете решать? Какие есть варианты решений? Например:
    • раскасить строки таблицы «зеброй»
    • скрывать кнопку на мелких экранах
    • расположить изображения так-то
    • поставить многоточие в конце текста (свойство text-overflow, псевдоэлемент :after)
  • ...
  • Некоторые ответы можно найти здесь: Legmo — HTML и CSS


Bootstrap 4 - что нового

  • Новая сетка В сетку добавлен еще один брейкпоинт col-xl-, при этом все остальные брейкпоинты остались, но сдвинулись на уровень ниже.
  • поддержка FlexBox
  • новый компонент card
    • заменяет удаленные: wells, thumbnails, panels.
    • гибкий и мощный инструмент, включающий в себя возможности всех трех удаленных компонентов.
    • Карточки можно группировать и даже реализовать сетку, так называемую кирпичную кладку.
  • поддержка IE
    • поддерживает IE 10 и выше, более ранние версии Internet Explorer не поддерживаются
    • если необходима поддержка: IE8/IE9, Safari 8-, iOS 8- и т.д., то сами разработчики фреймворка рекомендуют использовать Bootstrap 3.
  • переход на Sass - полный отказ от «Less»
  • новый модуль Reboot - для кроссбраузерности
    • включает в себя ядро «Normalize.css» и расширяет его.
    • Все настройки для сброса стандартных стилей HTML-тегов у браузеров находятся в одном «Sass» файле.
  • отказ от Glypicons В Bootstrap 4 был полностью удален иконочный шрифт «Glypicons», который присутствует в третьем бутстрапе. Разработчики фреймворка рекомендуют использовать сторонние библиотеки иконок поддерживающие формат SVG.
  • цвет элементов - вместо 6 базовых стало 8 по сравнению с третьим бутстрапом, где было шесть основных классов для цветового оформления элементов, в четвертом бутстрапе таких классов стало восемь.
  • Пиксели (px) заменены на «em» и «rem»
    • 1em – текущий размер шрифта.
    • rem задаёт размер относительно размера шрифта элемента . Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта .
  • Переписаны все JavaScript плагины под стандарты ECMAScript 6.
  • Обновлен дизайн всех компонентов (форм, таблиц, кнопок и т.д.).
  • Появилось гораздо больше служебных классов.
  • Улучшен функционал всплывающих подсказок и popover элементов.


Sass - какие для вас главные преимущества

  • переменные
  • вложенность
  • @import - можно подключать другие файлы SASS
  • @mixin (примеси) - позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. 
      @mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  .box { @include transform(rotate(30deg)); }
  • @include - подключение миксина
  • @extend - можно наследовать наборы свойств CSS от одного селектора другому. 
      %message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  .success {
    @extend %message-shared;
    border-color: green;
  }
  • математические операции - сложение, вычитание, умножение, деление, остаток...
  • логические операторы - например, цвет кнопки меняетсяя в заивисмости от её ширины




Legmo, 2019-2023