Translate CSS and HTML topics for jun-1

frontend/junior-1/css.md

@@ -1,59 +1,59 @@
 # CSS
 
-* Какие значения бывают у свойства `display`? В чём их особенность?
-* Что делает свойство `margin`? Какие есть особенности у отрицательных значений? Что такое margin collapsing и в каких случаях это происходит?
-* Что делает свойство `vertical-align`? Какие у него есть значения?
-* Что такое `padding`?
-* Что такое `box-sizing`?
-* Шрифты
-  * Как и в каких единицах можно задавать размер шрифта?
-  * В чём заключаются отличия у разных семейств шрифтов (с засечками, без них и моноширинные шрифты)? Как они называются на английском?
-  * Какие есть особенности подключения шрифтов через `font-face`?
-* Цвета
-  * Какие есть способы задать цвет? Как задать прозрачный цвет?
-  * Как в другом css-свойстве получить текущий цвет?
-  * Какие цветовые модели допустимо использовать в CSS? Какова структура перечисленных вами моделей?
-  * Какую роль играет альфа-канал? Как им пользоваться?
-* Что такое поток документа?
-* Что делает свойство `float`? Почему родитель элемента с `float` может схлопываться?
-* Что делает свойство `position`?
-  * Какие элементы называют позиционированными?
-  * Относительно чего происходит позиционирование элементов при разных значениях свойства `position`?
-* Что делает свойство `z-index`?
-* Контекст наложения
-  * Что такое?
-  * Как влияет на расположение элементов с заданным значением `z-index`?
-  * Какие свойства создают новый контекст наложения?
+* What are the possible values for the `display` property? What are their respective features?
+* Explain the purpose of the `margin` property. What are the effects of using negative values? Describe the concept of margin collapsing and when it occurs.
+* What does the `vertical-align` property do? What values does it have?
+* What is `padding`?
+* What is `box-sizing`?
+* Fonts
+  * What are the ways to set the font size and what units can be used?
+  * What are the differences between serif, sans-serif, and monospace fonts?
+  * What are the peculiarities of connecting fonts through `font-face`?
+* Colors
+  * What are the ways to set a color? How to set a transparent color?
+  * How to get the current color in another CSS property?
+  * What color models are allowed to be used in CSS? What is the structure of those models?
+  * What role does the alpha channel play? How to use it?
+* What is the document flow?
+* Explain the purpose of the `float` property. What causes the collapse of the parent element with a floated child?
+* What does the `position` property do?
+  * Which elements are referred to as positioned elements?
+  * When using different values of the `position` property, what is the reference point for positioning elements?
+* What does the `z-index` property do?
+* Stacking context
+  * What is it?
+  * How does it affect the arrangement of elements with a specified `z-index` property?
+  * What properties create a new stacking context?
 * Flex
-  * Что такое flexbox?
-  * Существует ли инлайновый flexbox?
-  * Что такое flex-container и flex-items?
-  * Как выравнивать элементы с помощью flexbox?
-  * Принципы работы `flex-grow`, `flex-shrink`. Каким образом рассчитывается занимаемое и свободное пространство при использовании этих свойств?
-* Чуть более сложные вещи в верстке:
-  * Рамки
-    * Что делают и какие значения могут принимать свойства:
+  * What is flexbox?
+  * Is there an inline flexbox?
+  * What are flex-container and flex-items?
+  * How to align elements using flexbox?
+  * Explain how `flex-grow` and `flex-shrink` work. How is the distribution of occupied and free space calculated when using these properties?
+* More complex things in layout:
+  * Borders
+    * What do the following properties do and what values can they take:
       * `border-style`
       * `border-color`
       * `border-width`
       * `border-radius`
       * `border`
-    * Можно ли задать стили для каждой рамки отдельно (например, отдельно для левой и для правой рамок)?
-  * Внешние рамки (outline)
-    * В чем отличие от обычных рамок?
-    * Что делают и какие значения могут принимать свойства:
+    * Can styles be set for each border separately (for example, separately for the left and right borders)?
+  * Outer borders (outline)
+    * What is the difference from regular borders?
+    * What do the following properties do and what values can they take:
       * `outline-style`
       * `outline-color`
       * `outline-width`
       * `outline-offset`
       * `outline`
-  * Тени
-    * Что делает свойство `text-shadow`? Как им пользоваться?
-    * Что делает свойство `box-shadow`? Как им пользоваться?
-    * Как сделать так, чтобы у одного элемента было несколько теней?
-    * Есть ли возможность задавать параметры теней отдельно (например, задать отдельно цвет или размер тени)?
-  * Фоны
-    * Что делают и какие значения могут принимать свойства:
+  * Shadows
+    * What does the `text-shadow` property do? How to use it?
+    * What does the `box-shadow` property do? How to use it?
+    * How to make one element have multiple shadows?
+    * Is it possible to set shadow parameters separately (for example, set the color or shadow size separately)?
+  * Backgrounds
+    * What do the following properties do and what values can they take:
       * `background-image`
       * `background-position`
       * `background-size`
@@ -63,12 +63,12 @@
       * `background-attachment`
       * `background-color`
       * `background`
-  * Градиенты
-    * Что делает функция `linear-gradient`? Как ей пользоваться?
-    * Что делает функция `radial-gradient`? Как ей пользоваться?
-  * Анимации
-    * Что такое `@keyframes`? Зачем нужно? Как им пользоваться?
-    * Что делают и какие значения могут принимать свойства:
+  * Gradients
+    * What does the `linear-gradient` function do? How to use it?
+    * What does the `radial-gradient` function do? How to use it?
+  * Animations
+    * What is `@keyframes`? What is it for? How to use it?
+    * What do the following properties do and what values can they take:
       * `animation`
       * `animation-delay`
       * `animation-direction`
@@ -83,39 +83,42 @@
       * `transition-duration`
       * `transition-property`
       * `transition-timing-function`
-    * Можно ли задать несколько анимаций для элемента?
-  * Трансформации
-    * Что делает свойство `transform`? Какие значения ему можно задавать?
-    * Можно ли задать несколько трансформаций для элемента?
-    * Изменяется ли положение координатной плоскости при трансформациях?
-* Единицы измерения
-  * Как рассчитываются width и height заданные в процентах?
-  * Как рассчитываются padding и margin заданные в процентах?
-  * Как рассчитывается line-height заданный в процентах?
-  * Как пользоваться `vh`, `vw`, `vmin`, `vmax`?
-* Что делает свойство `object-fit`?
-* Что делает свойство `aspect-ratio`?
-* Как стилизовать чекбокс?
-* Как прижать футер к низу страницы (назвать хотя бы два способа)?
-* Как отцентровать элемент по горизонтали (назвать хотя бы три способа)?
-* Как отцентровать элемент по вертикали (назвать хотя бы три способа)?
-* Что такое `media-queries`?
-* Чем отличаются responsive, adaptive, liquid?
-* Какие есть типы селекторов (по тегу, по классу и далее)?
-* Как работают приоритеты селекторов? Какие есть 4 вида возможных отношений?
-* Что делает CSS-правило `* { box-sizing: border-box; }`? Зачем оно нужно?
+    * Can multiple animations be set for one element?
+  * Transformations
+    * What does the `transform` property do? What values can it be set to?
+    * Can multiple transformations be set for one element?
+    * When applying transformations, does the position of the coordinate plane change?
+* Units of measurement
+  * How are the width and height calculated when set as percentages?
+  * How are the padding and margin calculated when set as percentages?
+  * How is the line-height calculated when set as percentages?
+  * How to use `vh`, `vw`, `vmin`, `vmax`?
+* What does the `object-fit` property do?
+* What does the `aspect-ratio` property do?
+* How to style a checkbox?
+* How to stick the footer to the bottom of the page (name at least two ways)?
+* How to center an element horizontally (name at least three ways)?
+* How to center an element vertically (name at least three ways)?
+* What are `media-queries`?
+* What is the difference between responsive, adaptive, liquid layouts?
+* What types of selectors are there (by tag, by class, etc.)?
+* Explain how selector priorities work and describe the four possible relationships between selectors.
+* What does the CSS rule `* { box-sizing: border-box; }` do? What is the purpose of it?
 
-### Ресурсы:
+### Resources:
 
-* [Разбираемся с vertical-align](https://web-standards.ru/articles/vertical-align/)
-* [Особенности свойства height в %](https://learn.javascript.ru/height-percent/)
-* [Единицы измерения. Проценты](https://learn.javascript.ru/css-units#protsenty/)
-* [CSS-цвета](https://html5book.ru/css-colors/)
+* [Understanding vertical-align](https://www.impressivewebs.com/css-vertical-align/)
+<!-- TODO:: find resource on English -->
+* [Features of the height property in %](https://learn.javascript.ru/height-percent/)
+<!-- TODO:: find resource on English -->
+* [Units of measurement. Percentages](https://learn.javascript.ru/css-units#protsenty/)
+* [CSS Colors](https://www.w3.org/TR/css-color-3/)
 * [What You May Not Know About the Z-Index Property](https://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892)
-* [Контекст наложения](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
-* [Приоритеты (специфичность) селекторов](https://habr.com/ru/post/137588/)
+* [Stack context](https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
+* [Specificity of selectors (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
 * [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-* [CSS и CSS3. Свойства для форматирования html-элементов](https://html5book.ru/css-css3/)
-* [flex-grow странный. Так ли это?](https://css-live.ru/articles/flex-grow-strannyj-tak-li-eto.html)
+<!-- TODO:: find resource on English -->
+* [CSS and CSS3. Properties for formatting html elements](https://html5book.ru/css-css3/)
+* [flex-grow is weird. Is it?](https://css-tricks.com/flex-grow-is-weird/)
 * [Flex-grow & Flex-shrink calculations explained](https://medium.com/@withApples/flex-grow-flex-shrink-calculations-explained-part-2-2-2a73d27ba5cb)
-* [Liquid/Adaptive/Responsive/Static demo](http://g-mops.net/epica_saitama/epica_layout/index_adaptive.html)
+* [Liquid/Adaptive/Responsive/Static demo](http://g-mops.net/epica_saitama/epica_layout/index_adaptive.html)