diff --git a/frontend/junior-1/css.md b/frontend/junior-1/css.md index a6160f18..9f0d283b 100644 --- a/frontend/junior-1/css.md +++ b/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/) + +* [Features of the height property in %](https://learn.javascript.ru/height-percent/) + +* [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/) +* [The stacking context (MDN)](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) + +* [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) \ No newline at end of file diff --git a/frontend/junior-1/html.md b/frontend/junior-1/html.md index e4a0c8b5..0c838bb0 100644 --- a/frontend/junior-1/html.md +++ b/frontend/junior-1/html.md @@ -1,42 +1,42 @@ # HTML -* HTML5 теги, как сделать верстку семантичной и зачем это нужно? -* Что такое `doctype` и зачем он нужен? Что будет, если не написать `doctype`? -* Какие есть отличия у тегов `div`, `p`, `span`, `a`? -* Что такое инлайновые элементы (например, `b`, `i`, `strong`, `em`)? -* Как создавать таблицы в html? +* What are HTML5 tags, how to make semantic markup and why is it necessary? +* What is `doctype` and what is it for? What will happen if `doctype` is not written? +* What are the differences between the tags `div`, `p`, `span`, `a`? +* What are inline elements (for example, `b`, `i`, `strong`, `em`)? +* How to create tables in HTML? * `border-spacing`, `border-collapse` * `colspan`, `rowspan` * `table-layout` * `caption` * `scope` - * `display: table`, `table-cell`, `table-row` и т.д. -* В чем заключаются отличие чекбокса от радио кнопок? Как связать радиокнопки в группу? -* Что такое тег `