Вёрстка сайтов | HTML, CSS, JS
4.79K subscribers
650 photos
3 videos
4 files
1.1K links
👋 Привет, друг!

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

Связь: @Tigran1963
Download Telegram
Макет для тренировки (манипуляции)

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

#практика | #макет
👍4
Задача на js: Найти общий элемент в двух отсортированных массивах

Даны два отсортированных массива, необходимо найти все элементы, которые присутствуют в обоих массивах.
Пример:
intersection([1, 2, 4, 5, 6], [2, 3, 5, 7]);
// Ожидаемый результат: [2, 5]


Условия:
Время работы: O(n + m), где n и m — длины двух массивов.
Эти задачи требуют различных подходов, от динамического программирования до использования хеш-таблиц, и охватывают широкий спектр навыков, полезных для разработки.

#домашка
🔥1
Как сделать сокращение длинного текста с тремя точками на конце на css?

CSS код:
-webkit-line-clamp: 3; 
(в этой строке пишем сколько строк должно показываться)
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

#css|#полезности
👍10
Фишка с grid + place-items

Это помогает выравнивать элементы по вертикали и горизонтали с помощью лишь двух строк кода
place-items-это сокращение для justify-items и align-items.

#полезности
👍18🔥5
Как сделать круговой текст?

Попробуем реализовать эту задачу при помощи svg.

Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.

<svg class="circle-text" viewBox="0 0 100 100">
<path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
<text>
<textPath xlink:href="#circle-text">
Круговой текст
</textPath>
</text>
</svg>


Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:
.circle-text {
display: block;
overflow: visible;
width: 100px;
font-size: 28px;
fill: red;
}
.circle-text path {
fill: none;
}


#полезности
👍5
5 Советов для Ускорения HTML-верстки

Верстка — это не только про точность, но и про скорость работы. Если вы хотите писать код быстрее, но без потери качества, вот несколько простых и полезных советов:

1. Используйте Emmet для ускорения работы
Emmet — это встроенный инструмент большинства редакторов кода. Он позволяет создавать сложные структуры HTML за пару секунд.
Пример:
div.container>header+main+footer 

Расширяется в:
<div class="container">  
<header></header>
<main></main>
<footer></footer>
</div>

Попробуйте использовать Emmet для повторяющихся задач, таких как создание списков или вложенных блоков.

2. Организуйте структуру проекта
Пишите код так, чтобы любой мог его понять:
Разделяйте стили и скрипты в отдельные файлы.
Придерживайтесь единого стиля именования классов (например, BEM).
Пример:
<div class="menu__item menu__item--active">Главная</div>  


3. Работайте с семантикой
Семантические теги (например, <header>, <article>, <nav>) делают ваш код понятнее и лучше для SEO. Используйте их вместо универсальных <div>.

4. Добавляйте комментарии
Комментарии помогут вам или вашим коллегам быстрее разобраться в коде. Например:
<!-- Главное меню сайта -->  
<nav>...</nav>


5. Проверяйте верстку на всех устройствах
Обязательно тестируйте:
В браузерах: Chrome, Firefox, Safari.
На разных устройствах: телефонах, планшетах и ноутбуках.
Попробуйте бесплатные инструменты, такие как Chrome DevTools, чтобы посмотреть, как ваш сайт выглядит на экранах с разным разрешением.
Ваш HTML-код — это не просто текст, это фундамент любого сайта. Чем чище и качественнее он будет, тем проще с ним работать другим разработчикам.

#полезнаястатья
👍13
Selection и Range

Читать 👨‍💻

#js | #теория
👍2
Какой псевдокласс используется для применения стилей к элементам, которые еще не прошли проверку формой?
Anonymous Quiz
17%
:checked
38%
:invalid
17%
:valid
28%
:default
👍4🔥2
Задача: Фильтрация и сортировка списка пользователей

Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).

Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:
const users = [
{ name: 'Alice', age: 25, isActive: true },
{ name: 'Bob', age: 30, isActive: false },
{ name: 'Charlie', age: 20, isActive: true },
{ name: 'David', age: 35, isActive: true },
{ name: 'Eve', age: 28, isActive: false }
];

Пример выходных данных:
['Charlie', 'Alice', 'David']

Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.

#домашка
👏42
CSS анимации текста при скролле

Смотреть на codepen 👨‍💻

#пратика
2👍2
7 веб-интерфейсов JavaScript для создания футуристичных сайтов

Читать статью 👨‍💻

#полезности
👍4
Какой тег используется для элементов навигации?
Anonymous Quiz
90%
nav
1%
div
1%
header
8%
navigation
👍1
Где брать заказы фрилансеру

Читать 👨‍💻

#фриланс
👍2
С помощью какого css свойства можно запретить перенос текста?
Anonymous Quiz
73%
white-space: nowrap
3%
white-space: pre
19%
word-wrap: break-word
5%
word-wrap: normal
👍7👏1
Макет для тренировки (EASYearn)
Средняя сложность. Лендинг и личный кабинет

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

#практика | #макет
👍1👏1