Вёрстка сайтов | HTML, CSS, JS
4.81K subscribers
653 photos
1 video
4 files
1.1K links
👋 Привет, друг!

В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду.
Присоединяйся и начинай учиться!

Связь: @Tigran1963
Download Telegram
5 причин, почему твоя вёрстка "плывёт"
(и как это быстро пофиксить)

1. Отсутствие box-sizing: border-box;
Контейнеры с паддингами становятся шире, чем ты думаешь. Добавь это в * { box-sizing: border-box; }.

2. Фиксированные ширины
width: 1200px — плохая идея. Лучше max-width и width: 100%.

3. Неиспользование Flex/Grid
Стилишь всё через margin, float, position? Забудь. Переходи на флекс или грид.

4. Нет ресета стилей
У каждого браузера свои отступы. Используй normalize.css или напиши свой ресет.

5. Работа без контейнера
Если у тебя нет центрального контейнера (.container { max-width; margin: 0 auto; padding: ... }) — верстка начнёт вести себя как попало.

#полезности
👍121
Как сделать спойлеры на чистом JS c возможностью включения/отключения при определенной ширине?

Стили меняйте на свои, а также не забываете про обнуляющие стили

Посмотреть код 🧑‍💻

#практика | #полезности
Макет для тренировки (male estate)

Перейти к макету 🧑‍💻

#практика | #макет
👍2
Задача: "Сгруппировать одинаковые слова"

У тебя есть массив строк. Нужно сгруппировать слова, которые являются анаграммами друг друга (т.е. состоят из одних и тех же букв, но в разном порядке).

const words = ["listen", "silent", "enlist", "hello", "ohlle", "world"];


Ожидаемый результат:
[
["listen", "silent", "enlist"],
["hello", "ohlle"],
["world"]
]


Условия:
Порядок групп и слов внутри групп не важен.
Используй чистый JavaScript, без сторонних библиотек.

#домашка
👍3