Кирилл Абрамс

Dinosaur Game Dinosaur Game, также известная как T-Rex Game или Dino Runner, носившая первоначальное кодовое название Project Bolan — встроенная браузерная игра в браузере Google Chrome. Игра была создана Себастьяном Габриэлем в 2014 году. Чтобы получить к ней доступ нужно нажать на клавишу пробел на клавиатуре в автономном режиме Google Chrome или ввести в URL строку: «chrome://dino» или «chrome://network-error/-106». Простая игра с динозавром в главной роли — одно из ключевых «пасхальных яиц» браузера...

Введение в дизайн Что такое дизайн? Сайты часто являются проводником к услуге и продукту, поэтому, как любой проводник, сайт должен быть понятным и удобным. И отвечать прежде всего на два критерия: время и комфорт. UX-дизайн Для того, чтобы максимально сэкономить время посетителя сайта, вы должны уменьшить время поиска, время на выбор, показать все самое важное для пользователя быстро, четко и структурировано. UI-дизайн Для того чтобы пользователю было комфортно и приятно находится на сайте, и он получал эстетическое удовольствие от вида сайта...

Позиционирование Хаки с margin Важно всегда задавать элементу body нулевой margin, иначе вокруг него будет рамка из отступов. Она не критична до тех пор, пока фоновый цвет элементов, лежащих внутри, остается белым, но как только мы его меняем, отступ становится виден. Всегда задаем body{margin: 0;} Для того, чтобы отцентрировать текст внутри блока, нужно применить text-align: center для этого блока div. Попросите ребят записать себе в тетрадь основные режимы выравнивания: по левому краю, по правому...

Настройка фона Фоновые изображения Установить фоновое изображение можно с помощью свойства background-image. Пример: background-image: url(bg.jpg); Работа с фоном в CSS Свойство background-repeat может принимать следующие возможные значения: 1. repeat - фоновое изображение повторяется по горизонтали и вертикали; 2. no-repeat - не повторять фоновое изображение; 3. repeat-x - фоновый рисунок повторяется только по горизонтали; 4. repeat-y - фоновый рисунок повторяется только по вертикали. Background-size масштабирует фоновое изображение согласно заданным размерам...

Блочная модель CSS Блочные и строчные элементы Свойства блочной модели очень важны, чтобы получить действительно красивый и современный дизайн сайта вместо простого отформатированного текста. Для того, чтобы построить такой дизайн необходимо понимать одну важную вещь. HTML-элементы – это всегда прямоугольные блоки с заданными свойствами. Из них-то, как из конструктора Lego и состоит любая, даже самая сложная, веб-страница. Один блок – одна прямоугольная деталька в общей картине. Однако, не все элементы одинаковые...

Селекторы класса и идентификатора Селекторы класса и идентификатора Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль. Как ты видишь из примеров, при помощи дополнительных атрибутов class и id мы можем пометить какие-то конкретные элементы и прописывать стилизацию конкретно для них. Названия классов и идентификаторов мы в праве придумывать сами и они могут быть почти любыми, главное, чтобы по названию сразу было понятно,...

Шрифты Ссылка (гиперссылка) Ссылка (гиперссылка) - это часть текста, при нажатии на которую происходит переход на: Как сделать гиперссылку? <a href="сюда нужно вставить скопированную ссылку">Текст, на который нужно будет нажать</a> Пример: <a href="https://yandex.ru/">Яндекс</a> Ссылки могут иногда выглядеть иначе, чем синий подчеркнутый текст. Дело в том, что их также можно оформить через CSS, как и все остальное на странице и некоторые именно так и делают. Отсюда берутся ссылки нестандартных цветов...

Секционные элементы HTML5 CSS CSS (Cascading Style Sheets) - язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвета) к элементам HTML-документа. Подключение CSS Цветовые модели Свойство color отвечает за цвет шрифта. Есть еще одно свойство - background-color, оно отвечает за цвет фона. В CSS цвет можно задать тремя основными способами: 1. Ключевое слово - blue; 2. Формат RGB - rgb(227,152,226); 3. Формат HEX - #12C929(#12c929) . Основные секционные элементы...

Семантика. Форматирование текста Семантические теги 1. <h1></...> - главный заголовок страницы. 2. <h2> - <h6> - подзаголовки. 3. <p></...> - строго один абзац текста. Никогда не используем <br> для разделения абзацев. Вместо этого используем несколько <p></...>. Простое форматирование текста Нумерованный список <ol> <li>Проснуться</li> <li>Умыться</li> <li>Позавтракать</li> <li>...</li> </ol> Маркированный список <ul> <li>Проснуться</li> <li>Умыться</li> <li>Позавтракать</li> <li>...

Введение в HTML Теги Тег - это специальная команда, заключенная в угловые скобки, которая сообщает браузеру, как отображать содержимое. <p></...>- абзац текста (занимает всю доступную ширину, имеет отступы сверху и снизу) <h1></...>- главный заголовок (самый большой, жирный, с новой строки) <h2></...>- подзаголовок (поменьше, жирный, с новой строки) <h3></...>- заголовок 3-го уровня (меньше второго, жирный, с новой строки) Вставка картинки...

Знакомство с VS Code Установка Visual Studio Code Сначала мы зайдем на сайт Visual Studio Code, чтобы скачать файл установки. Выберем Download. Дождитесь, пока файл скачается, и запустите его. Следуйте мастеру установки. После нажатия на кнопку “Установить”, дождитесь окончания установки. Интерфейс и плагины Интерфейс программы выглядит следующим образом: Полезные плагины: 1. Русский язык. Зайдите в раздел “Плагины” и напишите в строке поиска “russian”. Выберите нужный плагин и установите его. По окончании установки перезапустите программу...