Code Ready | Frontend
20.9K subscribers
705 photos
318 videos
17 files
471 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Курс Базовый Javascript

Плейлист из 11 уроков, в котором вы последовательно познакомитесь с фундаментальными основами языка Javascript. Благодаря этому курсу вы научитесь писать свои первые веб-приложения.

Ссылочка на плейлист: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥9
👩‍💻 Вопрос с собеседования

В чём разница между margin и padding в CSS?

Ответ:

Это два свойства CSS, которые определяют отступы, но они имеют разные функции и применяются в разных случаях.

margin — внешний отступ, который создает пространство вокруг элемента, отделяя его от других элементов. Он влияет на расстояние между элементами и может быть использован для управления их расположением на странице.

padding — внутренний отступ, который создает пространство между содержимым элемента и его границей. Он влияет на область внутри элемента, увеличивая расстояние между текстом, изображениями и краями элемента.

📣 Code Ready | #собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥37👍21
📖 Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5

Книга, которая обучает разработке современных веб-приложений, охватывая ключевые технологии и языки программирования для создания интерактивных и функциональных сайтов.

Автор: Никсон Робин
Год: 2023


⬇️ Скачать книгу

📣 Code Ready | #книга
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥5
Media is too big
VIEW IN TELEGRAM
awesome-javascript — репозиторий, в котором собраны полезные JavaScript-библиотеки, инструменты для работы и ресурсы для изучения языка.

Ссылочка на репозиторий: Github 😸


📣 Code Ready | #репозиторий
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
📱 VS HTML to CSS

Очень полезный плагин для VS Code, с помощью которого можно легко скопировать все классы из HTML в CSS.

Для этого нужно выделить нужный участок HTML-кода и нажать Alt+X, после чего вставить в CSS-файл скопированный фрагмент. Плагин автоматически создаст селекторы ко всем классам.


📣 Code Ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53👍17
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Grid Generator — сайт, с помощью которого можно сгенерировать сетку и получить готовый CSS-код. Сначала задаем количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке.

Ссылочка: https://cssgrid-generator.netlify.app/

📣 Code Ready | #реcурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥48👍17👎1
👩‍💻 Создание простого параллакс-эффекта

В этом посте вы узнаете, как на чистом CSS создать простой параллакс-эффект прокрутки страницы.

Основой для создания такого эффекта является свойство `background-position`, с помощью которого мы будем позиционировать фоновое изображение.


➡️ @code_ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
😁22👍16🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут spellcheck

Атрибут spellcheck определяет, должна ли проверяться орфография содержимого элемента.

Он может использоваться в таких элементах, как input, textarea, и даже в некоторых других контейнерных элементах, поддерживающих ввод текста.

Он может иметь два значения:
• spellcheck="true" — Проверка орфографии включена.

• spellcheck="false" — Проверка орфографии отключена.


📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥55👍22
This media is not supported in your browser
VIEW IN TELEGRAM
flexboxdefense — игра в жанре Tower Defense, в которой нужно правильно расположить турели с помощью flexbox для защиты.

Ссылочка: http://www.flexboxdefense.com/

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥9
📱 Основы Программирования на JS для Новичков

Большой вводный урок по JavaScript, в котором вы изучите основы языка, узнаете про принцип мышления программиста, базовые понятия и термины простыми словами.

Ссылка на курс: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥9😁3
Media is too big
VIEW IN TELEGRAM
javascript algorithms — репозиторий, в котором собраны самые разные алгоритмы, написанные на Javascript. Здесь вы найдете примеры кода для алгоритмов, таких как сортировки, поиска, графов, теории чисел и многое другое.

Ссылочка на репозиторий: Github 😸


📣 Code Ready | #репозиторий
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥9
👩‍💻 Толщина декоративной линии

Свойство text-decoration-thickness определяет толщину линий, применяемых к стилям обводки, подчеркивания или зачеркивания.

Возможные значения свойства:
• auto — значение по умолчанию, браузер сам определит толщину линии.
from-font — если в файле шрифта прописана предпочтительная толщина декоративной линии, то будет использована она.
• в еденицах измерения (px, rem, em)


📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍29🔥8
👩‍💻 Язык CSS для новичков

Плейлист из 16 уроков, с которым вы легко выучите особенности и синтаксис CSS, начиная с основ и завершая полным пониманием каскадных таблиц стилей.

Ссылочка на курс: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥5👎1
This media is not supported in your browser
VIEW IN TELEGRAM
📱 Auto Close Tag

Расширение для VS Code, которое автоматически добавляет закрывающие теги HTML и XML, упрощая процесс редактирования кода.

📣 Code Ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥12
👩‍💻 Вопрос с собеседования

Как работать с DOM в JavaScript?
Малая часть

Ответ:


1. Получение элементов из DOM
// Получение элемента по ID
const header = document.getElementById('header');
// Получение элементов по классу
const items = document.getElementsByClassName('item');
// Получение первого элемента по селектору
const firstItem = document.querySelector('.item');


2. Изменение элементов
// Изменение текста заголовка
header.textContent = 'Новый заголовок';
// Изменение стиля элемента
header.style.color = 'blue';
// Изменение атрибута элемента
header.setAttribute('data-info', 'someValue');


3. Обработка событий
// Обработчика события 'click' на заголовок
header.addEventListener('click', function() {
alert('Заголовок был нажат!');
});
// Функция для обработки события
function changeColor() {
header.style.backgroundColor = 'yellow';
}
// Добавление обработчика события 'mouseover'
header.addEventListener('mouseover', changeColor);


📣 Code Ready | #техсобес
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥14