geeks-master.ru
Open in
urlscan Pro
2a0a:8d80:0:9123::131
Public Scan
URL:
https://geeks-master.ru/
Submission: On November 28 via api from US — Scanned from US
Submission: On November 28 via api from US — Scanned from US
Form analysis 3 forms found in the DOM
POST /login?redirect_url=https%3A%2F%2Fhtmlacademy.ru%2Fblog
<form class="modal__form form" action="/login?redirect_url=https%3A%2F%2Fhtmlacademy.ru%2Fblog" autocomplete="off" method="post" data-submit="o">
<input type="hidden" name="ha_name" value="ha656460ef1d55f">
<input type="hidden" name="ha_value" value="0ad441859a587b6b8ab35793456ed59c">
<div class="form__group">
<label class="sr-only" for="login-email">Эл. почта <span class="required">
<span class="required__star">*</span>
</span>
</label>
<div class="form__group-fields">
<input class="field field--text field--full-width" type="email" name="email" value="" id="login-email" required="" placeholder="Эл. почта" data-email-suggest="on">
</div>
</div>
<div class="form__group">
<label class="sr-only" for="login-password">Пароль <span class="required">
<span class="required__star">*</span>
</span>
</label>
<div class="form__group-fields">
<input class="field field--text field--full-width ym-disable-keys" type="password" name="password" value="" id="login-password" required="" placeholder="Пароль">
</div>
</div>
<input class="button button--full-width" type="submit" data-submit-text="Вхожу…" value="Войти" id="login-submit-button">
</form>POST /signup?redirect_url=https%3A%2F%2Fhtmlacademy.ru%2Fblog
<form class="modal__form form" action="/signup?redirect_url=https%3A%2F%2Fhtmlacademy.ru%2Fblog" autocomplete="off" method="post" data-submit="o">
<input type="hidden" name="ha_name" value="ha656460ef1d55f">
<input type="hidden" name="ha_value" value="0ad441859a587b6b8ab35793456ed59c">
<div class="form__group">
<label class="sr-only" for="registration-email">Эл. почта</label>
<input class="field field--text field--full-width" type="email" name="email" placeholder="Эл. почта" value="" id="registration-email" data-email-suggest="on">
</div>
<div class="form__group">
<label class="sr-only" for="registration-password">Пароль</label>
<input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Пароль" id="registration-password">
</div>
<input class="button button--full-width" type="submit" data-submit-text="Регистрирую…" value="Зарегистрироваться">
</form>POST /recover?redirect_url=https%3A%2F%2Fhtmlacademy.ru%2Fblog
<form class="modal__form form" action="/recover?redirect_url=https%3A%2F%2Fhtmlacademy.ru%2Fblog" autocomplete="off" method="post" data-submit="o">
<input type="hidden" name="ha_name" value="ha656460ef1d55f">
<input type="hidden" name="ha_value" value="0ad441859a587b6b8ab35793456ed59c">
<div class="form__group">
<label class="form__label" for="recover-email">Эл. почта <span class="required">
<span class="required__star">*</span>
</span>
</label>
<div class="form__group-fields">
<input class="field field--text field--full-width" type="email" name="email" value="" id="recover-email" required="" placeholder="Эл. почта" data-email-suggest="on">
</div>
</div>
<input class="button button--full-width" type="submit" data-submit-text="Отправляю…" value="Отправить">
</form>Text Content
* Доктайп
* HTML
* CSS
* JS
* Git
* Софт
* Айти
* Случайная статья
Слайд Слайд
CHATGPT НЕ СПРАВЛЯЕТСЯ
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
JS
* 2 ноября 2023
ШАБЛОН ПРОСТОГО САЙТА НА HTML
Быстро, чётко и по делу.
HTML
* 8 июля 2022
1 2
СВЕЖИЕ СТАТЬИ
ОЧИСТКА КЭША CANVAS НА WINDOWS: ПОДРОБНОЕ РУКОВОДСТВО
HTML5 Canvas - мощный инструмент для создания интерактивной графики и анимаций в
веб-разработке. Хотя обычно браузеры автоматически управляют кэшем Canvas,
иногда пользователи Windows могут захотеть освежить его, чтобы обеспечить более
гладкую работу веб-приложений.
Читать дальше
* 22 ноября 2023
ЧТО ТАКОЕ LAZY LOADING И КАК ЕЁ ВКЛЮЧИТЬ НА САЙТЕ
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку
ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя
мобильный интернет с ограничениями.
Читать дальше
HTML
* 22 ноября 2023
НОВОЕ В 2023 — TEXT-WRAP: BALANCE
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance. Оно
«уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри
блока.
h1 {
text-wrap: balance;
}
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто,
и лучше не применять это свойство к body.
Вот пример заголовка <h1> c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах,
кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
CSS
* 13 ноября 2023
ЗНАКОМСТВО С HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир
веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами —
языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется
для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда
HTML — это скелет этой книги, костяк, который определяет структуру: где будет
заголовок, абзацы, изображения и так далее.
Читать дальше
HTML
* 1 ноября 2023
ЗНАКОМСТВО С JAVASCRIPT
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML
и оформить ее стилями с помощью CSS, пришло время оживить её с помощью
JavaScript (JS). JavaScript — это мощный язык программирования, который
используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js файла к HTML-документу:
<script src="script.js"></script>
Читать дальше
JS
* 1 ноября 2023
ЗНАКОМСТВО С CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML,
пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что
означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта,
то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы,
добавлять анимации и многое другое.
Читать дальше
CSS
* 1 ноября 2023
СОБЫТИЕ ONCLICK В JS НА ПРИМЕРАХ
Интерактивность — ключевой компонент любого современного сайта. И одним
из наиболее часто используемых событий для создания интерактивности является
событие onclick. В этой статье мы подробно разберёмся, что такое событие
onclick, как его использовать и приведем примеры применения.
Событие onclick — это событие JavaScript, которое активируется, когда
пользователь кликает на определенный элемент страницы. Это может быть кнопка,
ссылка, изображение или любой другой элемент, на который можно нажать.
Читать дальше
JS
* 30 октября 2023
КАК ПЕРЕВЕРНУТЬ САЙТ. САМАЯ КОРОТКАЯ ИНСТРУКЦИЯ
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Перевернуть сайт
Никакой магии. Мы вызываем JavaScript-функцию rotateBody(), которая применяет
свойство transform с значением rotate(180deg) к элементу <body>. Когда вы
нажмете на кнопку «Перевернуть», всё, что находится внутри <body> будет
повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() {
document.body.style.transform = 'rotate(180deg)';
}
<button onclick="rotateBody()">Перевернуть</button>
Но такой код повернёт страницу только один раз. Если нужно, чтобы она
возвращалась обратно при втором клике, усложним код:
let isRotated = false;
function rotateBody() {
if (isRotated) {
document.body.style.transform = 'rotate(0deg)';
document.body.style.direction = "ltr";
} else {
document.body.style.transform = 'rotate(180deg)';
document.body.style.direction = "rtl";
}
isRotated = !isRotated;
}
Надеемся, вы прочитали это описание до того, как нажать на кнопку.
JS
* 25 октября 2023
СПЕЦИАЛЬНЫЕ СИМВОЛЫ В HTML
HTML использует особенные комбинации символов, чтобы корректно отображать
определенные знаки на веб-страницах. Например, вместо простого знака «меньше»
мы видим комбинацию <. В этой статье представлен список таких символов. Это
небольшой справочник для тех, кто хочет быстро найти нужный код.
Читать дальше
HTML
* 23 октября 2023
ПРОСТОЕ ДИАЛОГОВОЕ ОКНО НА HTML
Вот короткое демо:
Читать дальше
HTML
* 18 октября 2023
КАК УЗНАТЬ ГЕОЛОКАЦИЮ: GEOLOCATION API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое
местоположение веб-приложениям. Геолокация может использоваться для выбора
города в интернет-магазине, отображения пользователя на карте или навигации
в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition(), но есть и другие методы
и свойства, которые могут пригодиться.
Читать дальше
JS
* 16 октября 2023
УВЕЛИЧЕНИЕ ССЫЛКИ ПРИ НАВЕДЕНИИ
Задача: плавно увеличить ссылку при наведении.
Решение:
a {
display: inline-block;
transition: transform 0.3s ease;
}
a:hover {
transform: scale(1.2);
}
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon;
меняет цвет текста в тегах <a> на темно-красный, а свойство text-decoration :
none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить.
Поэтому используем свойство transform: scale(1.2), которое срабатывает при
наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению
с её начальным размером.
Демо:
Читать дальше
CSS
* 13 октября 2023
ЧТО ТАКОЕ LOCALSTORAGE И КАК ИМ ПОЛЬЗОВАТЬСЯ
localStorage — это место в браузере пользователя, в котором сайты могут
сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут,
даже если вы выключите компьютер или закроете браузер.
До localStorage разработчики часто использовали cookies, но они были не очень
удобны: мало места и постоянная передача данных туда-сюда. LocalStorage
появился, чтобы сделать процесс более простым и эффективным.
Читать дальше
JS
* 12 октября 2023
С КАКИМИ УНИВЕРСИТЕТАМИ РАБОТАЕТ HTML ACADEMY. ОДНОЙ КАРТИНКОЙ
Впечатляющий список — ИТМО, Политех, УрФУ, КФУ, Томский Политех, МГИМО и другие:
💡 Подробнее том, как мы работаем, и какие курсы можем запустить в вашем
университете — в статье « Современный фронтенд для студентов».
* 10 октября 2023
10 ПРАВИЛ ОНЛАЙН-СОБЕСЕДОВАНИЙ
В мире, полном удалённых работ и учёб, есть много нюансов, о которых легко
забыть на онлайн-собеседовании. Делимся по своему опыту:
Читать дальше
Айти
* 9 октября 2023
КОНТЕЙНЕР ДЛЯ ЧЕГО УГОДНО. ТЕГ <DIV>
Тег <div> определяет раздел или секцию в HTML-документе. Это контейнер, который
используется для группировки других элементов, таких как текст, изображения или
другие теги, в разделы или блоки.
<div class="section">
<h2>Заголовок секции</h2>
<p>Какое-нибудь содержимое секции</p>
</div>
Читать дальше
* 6 октября 2023
КАК ДОБАВИТЬ ПОДПИСЬ В HTML. ТЕГ <FIGCAPTION>
Тег <figcaption> используется для добавления подписи к элементу <figure> .
Обычно он размещается после других медиа-элементов, например, после <img> ,
и содержит описание либо название изображения или другого контента, находящегося
внутри <figure>.
<figure>
<img src="image.jpg" alt="Image">
<figcaption>Описание изображения</figcaption>
</figure>
Устаревший атрибут align — выравнивание подписи относительно элемента <figure>.
Тег <figcaption> может использоваться только внутри элемента <figure>.
Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или
других медиа-элементов внутри <figure>. Однако это необязательное правило,
и подпись может располагаться перед медиа-элементом или даже внутри него.
Читать дальше
* 6 октября 2023
МЕТАДАННЫЕ HTML-СТРАНИЦЫ. ТЕГ <META>
Тег <meta> содержит метаданные о документе HTML. Он может включать такую
информацию, как имя автора, название документа, ключевые слова и набор символов.
<head>
<meta charset="UTF-8">
<meta name="description" content="Это описание веб-страницы">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Иван Иванов">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Тег <meta> помещается в <head> HTML-документа.
Атрибуты тега <meta>:
* charset — кодировка символов в документе.
* name — имя метаданных.
* content — значение метаданных.
* http-equiv — HTTP-заголовок для значения атрибута content.
Атрибут charset должен быть первым атрибутом в теге <meta>, а name и
http-equiv нельзя использовать вместе.
Читать дальше
* 4 октября 2023
ПРОСТО КНОПКА. ТЕГ <BUTTON>
Тег <button> создаёт кликабельную кнопку, которая может запускать действия или
события на веб-странице. Например, отправку или перезагрузку формы, запуск
функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега <button>:
* name — имя кнопки.
* type — тип кнопки, по умолчанию — submit. Атрибут type необходим, если
указан атрибут value.
* value — значение, которое будет отправлено на сервер при нажатии на кнопку.
* disabled — указывает, что кнопка должна быть отключена.
* form — одна или несколько форм, к которым принадлежит кнопка.
* formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии
кнопки.
* formenctype — указывает, как данные формы должны быть закодированы при
отправке на сервер.
* formmethod — метод HTTP, используемый при отправке данных формы.
* formnovalidate — устанавливает, что данные формы не должны проверяться при
отправке на сервер.
* formtarget — указывает, где отображать ответ после отправки формы.
Читать дальше
* 4 октября 2023
КАК ВСТРОИТЬ СТРАНИЦУ ЧЕРЕЗ <IFRAME>
Тег <iframe> позволяет встраивать контент (например, веб-страницы, видео) прямо
в ваш документ HTML.
Простейший пример использования <iframe>:
<iframe src="https://example.com" width="600" height="400"></iframe>
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как
в пикселях, так и в процентах).
Читать дальше
* 3 октября 2023
* Наша группа в VK
* Наш канал на YouTube
* Наша страница в Twitter
* Наш канал в Telegram
Инновационный центр Сколково
ПРАКТИКУМ
* Курсы для новичков
* Подписка
ПРОФЕССИИ
* Фронтенд-разработчик
* JavaScript-разработчик (React)
* JavaScript-разработчик (Vue.js)
* Фулстек-разработчик
Курсы
* HTML и CSS.
Профессиональная вёрстка сайтов
* HTML и CSS.
Адаптивная вёрстка и автоматизация
* JavaScript.
Профессиональная разработка веб-интерфейсов
* JavaScript.
Архитектура клиентских приложений
* React.
Разработка сложных клиентских приложений
* Node.js.
Профессиональная разработка REST API
* Node.js и Nest.js.
Микросервисная архитектура
* TypeScript. Теория типов
* Алгоритмы и структуры данных
* Паттерны проектирования
* Webpack
* Vue.js 3. Разработка клиентских приложений
* Git и GitHub
* Анимация для фронтендеров
Журнал
* Справочник по HTML
* Учебник по Git
* Учебник по PHP
ИНФОРМАЦИЯ
* Об Академии
* О центре карьеры
УСЛУГИ
* Работа наставником
* Для вузов и колледжей
* Для учителей
ОСТАЛЬНОЕ
* Написать нам
* Мероприятия
* Форум
* Акции
Соглашение Конфиденциальность Сведения об образовательной организации Лицензия №
Л035-01271-78/00176657 © ООО «Интерактивные обучающие технологии», 2013−2023
ВХОД
*
*
*
* ФБ
или
Эл. почта *
Пароль *
Регистрация Забыли пароль?
РЕГИСТРАЦИЯ
*
*
*
* ФБ
или
Эл. почта
Пароль
Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку
персональных данных в соответствии с « Политикой конфиденциальности»
и соглашаетесь с « Условиями оказания услуг».
Вход
ВОССТАНОВЛЕНИЕ ДОСТУПА
Забыли пароль или потеряли доступ к профилю? Введите привязанную
к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.
Эл. почта *
Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.