🖥 Медиа-запросы представляют собой CSS правила, которые позволяют адаптировать стили элементов в зависимости от характеристик устройства. Другими словами, это возможность определять, какие стили следует применять на веб-странице в зависимости от условий.

💩 Это делает сайт более удобным для пользователей, независимо от устройства и позволяет эффективно управлять отображением элементов.
💩 Подходы Mobile First и Desktop First имеют свои особенности и могут быть применены в зависимости от проекта.
💩 Пользование логических операторов позволяет создавать более сложные и адаптивные стили, что улучшает пользовательский опыт и SEO-оптимизацию сайта.
💩 Внедряйте адаптивный дизайн осознанно, делая ваш сайт доступным и удобным для всех пользователей.

🔗 Читать подробнее

CodeBase | Frontend

👩‍💻 If...else — это условный оператор JavaScript.

⚡️Позволяет программам выполнять определенные действия в зависимости от логического условия, которое может быть истинным или ложным.

let phrase = prompt('Скажи слово друг и заходи')

if (phrase === 'Друг') {
alert('Привет')
} else {
alert('Я тебя не знаю')
}

➡️ Если пользователь вошёл в систему, то показать содержание почтового ящика.

➡️ В противном случае — форму логина;
если сумма покупки больше 2 000 ₽, то посчитать скидку 10%;

➡️ Если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.

Пример ниже выведет на печать слово «Привет», если во всплывающее окно ввести «Друг», и «Я тебя не знаю» в противном случае:

Если вам понравился пост, жду от вас 🔥👍♥️

CodeBase | Frontend

⚡️ Подготовили для вас небольшой перечень годной литературки⚡️

➡️ 1-й уровень (Начинающий)

🟢 JavaScript. Полное руководство (2021) — Дэвид Флэнаган

🟢 Изучаем программирование на JavaScript (2022) — Эрик Фримен, Элизабет Робсон

🟢 JavaScript с нуля до профи (2023) — Свекис Лоренс Ларс

🟢 JavaScript с нуля (2022) — Кирупа Чиннатхамби

➡️ 2-й уровень (Средний)

🟠 Вы пока не знаете JS. Область видимости и замыкания (2022) — Кайл Симпсон

🟠 Выразительный JavaScript. Современное веб-программирование (2022) — Марейн Хавербеке

🟠 Асинхронная обработка и оптимизация — Симпсон Кайл

🟠 Рефакторинг кода на JavaScript. Улучшение проекта существующего кода (2019) — Мартин Фаулер

➡️ 3-й уровень (PRO)

🟣 JavaScript для глубокого обучения: TensorFlow.js (2021) — Франсуа Шолле, Эрик Нильсон, Стэн Байлесчи, Шэнкуинг Цэй

🟣 Тестирование JavaScript (2023) — Лукас Да Коста

Если понравилась подборка, вы знаете что делать😎
Жду от вас 🔥🔥🔥

CodeBase | Frontend

⚡️⚡️ У НАС ЕСТЬ ЧАТ ⚡️⚡️

Тут вы можете:

🔥 общаться,
🔥 задавать вопросы,
🔥 предлагать идеи для постов
🔥 развиваться вместе с нами!!

🟢 Админ всегда читает коменты) 🟢

Всем хорошего настроения и продуктивной работы!))

Присоединяйтесь к нашему сообществу!))

Ссылка на ЧАТ

CodeBase | Frontend

✅ ТОП - 5 ПЛОЩАДОК ДЛЯ ПРАКТИКИ ✅

⚡️ Разработка проектов и решение практических задач представляют собой один из наилучших способов освоения навыков программирования.

⚡️ Хотя теоретические знания важны, их применение в проектах необходимо для роста.

⚡️ Для обучения фронтенд-разработке мы подготовили список из 5 веб-сайтов, которые помогут вам улучшить свои навыки путем практики.


1. freeCodeCamp

2. Codewell

3. CSSBattle

4. Coderbyte

5. Javascript30

После прохождения практики, жду ваших отзывов)
Если понравился пост, вы знаете, что делать 🔥🔥🔥

CodeBase | Frontend

🗣 Интернет-магазин сырной продукции

🗂 Категория: Интернет-магазин
💵 Сложность: Очень сложный
📱 Адаптив: ✅
📄 Страницы макета: 17

CodeBase | Frontend

💩 ЛАЙФХАКИ ВЕРСТАЛЬЩИКА 💩

⚡️ Подготовил для вас небольшой список годных ресурсов.

➡️ How To Center in CSS – центрируйте всё

➡️ CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов

➡️ Learn Git Branching – интерактивный учебник по Git

➡️ Генератор Flexbox верстки – Конструктор Flexbox

➡️ Генератор Grid верстки – Конструктор Grid

🟢 Сохрани, чтобы не потерять 🟢

CodeBase | Frontend

⚡️ БИБЛИОТЕКИ JAVASCRIPT ⚡️

💻 Библиотека — набор кода, который интегрируется в приложение и выполняет определенные функции в соответствии с задачами, порученными разработчикам.

➡️ Обычно библиотека содержит классы и/или функции, которые могут быть использованы разработчиками в своем приложении. Например:

1️⃣ jQuery предоставляет набор функций для работы с DOM, обработки событий и обеспечения клиент-серверного взаимодействия.

🟢 Скачать jQuery с офф сайта библиотеку jQuery

🟢 Забросить в папку на сервере

🟢 Прописать новый путь до вашей библиотеки jQuery

➡️ Пример:

<script src="/___dwweb_ru/__template/js/jquery-3.3.1.min.js"></script>

2️⃣ D3 - это библиотека, которая позволяет создавать визуализации, используя SVG.

🔵 Загрузите и распакуйте d3.zip

🔵 Скопируйте полученную папку туда, где вы будете хранить зависимости вашего проекта.

🔵 Ссылка на d3.js (для разработки) или d3.min.js (для производства) в вашем HTML:
<script type="text/javascript" src="scripts/d3/d3.js"></script>

3️⃣ React - это библиотека для отображения данных и управления DOM-структурой.

➡️ Установка React локально.

npm install react react-dom

➡️ Полный алгоритм действий выглядит так:

🟠 Устанавливаем Node.js на свой компьютер.

🟠 Открываем командную строку / терминал.

🟠 Переходим в папку, где хотим создать свой проект на React.

🟠 Вводим команду npm install react react-dom и нажимаем 'Enter'.

🟠 Установка запущена.

🟠 По окончанию, можно начинать работать с React!

CodeBase | Frontend

🖼️ Фреймворк VUE.JS 🖼️

Vue — это JavaScript фреймворк для разработки пользовательских интерфейсов, основанный на стандартах HTML, CSS и JavaScript.

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

✔️ Установка

➡️ Предварительно установите Node.js

➡️ Прямое включение CDN-файла:

<script src="https://unpkg.com/vue@next"></script>

➡️ Через NPM:

npm -v — проверка наличия npm
npm install vue — установка последней версии vue

➡️ Использование CLI:

npm install -g @vue/cli;

🟢 Пример:

1️⃣ vue create myproject — создание проекта

2️⃣ cd myproject — войдите в папку

3️⃣ npm run dev — локальный запуск вашего проекта

CodeBase | Frontend

⚙️ Плагин для VS Code: CSS Peek

Во время работы с версткой, часто приходится переключаться между html и css кодом. И если с небольшими проектами это терпимо, то с более менее объемными - несколько не удобно.

Так вот, CSS Peek может облегчить работу и сделать ее более удобной и эффективной.

⚙️ Преимущества плагина:

➡️ Легкий поиск и переход к определению CSS классов, а также ID, прямо из html.

➡️ Быстрое редактирование стилей, не теряя времени на поиск нужных селекторов.

➡️ Ускоряет разработку, благодаря удобной навигации и редактированию стилей.

🔗 Установить CSS Peek

CodeBase | Frontend

📳 Vibration API 📳

➡️ Предоставляет функцию, которая позволяет вызывать вибрацию на устройстве.

➡️ Метод Navigator.vibrate() используется для управления вибрацией.

🔵 Например, для создания вибросигнала длительностью в 1 секунду можно использовать

navigator.vibrate(1000)

🔵 Чтобы создать последовательность вибросигнала длительностью 0.5 секунды, затем паузу в 1 секунду, и затем вибросигнал длительностью 0.3 секунды, можно использовать

navigator.vibrate([500, 1000, 300])

🔵 Если передать значение 0 или пустой массив в метод, или массив содержащий только нули, это отменит любой текущий шаблон вибрации.

Если понравилась инфа, сохрани, чтоб не потерять))
И добавь 🔥🔥🔥

CodeBase | Frontend

👩‍💻 GULP.JS 👩‍💻

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

🔵 Запуск веб-сервера с автоматическим обновлением страницы при сохранении кода, использование препроцессоров для JS, CSS, HTML, минификация кода, управление файлами, работа с изображениями, деплой, подключение плагинов Node.js и Gulp для автоматизации задач веб-разработки.

🔵 Gulp и связанные с ним утилиты могут успешно применяться для выполнения практически любых задач при разработке проектов различного масштаба - от небольших сайтов до крупных проектов.

✔️ Установка

Заранее установите Node.js
Проверьте его наличие, введя команду:
node —v

1️⃣ После установки Node.js, устанавливаем Gulp, выполнив команду:

npm install -g gulp

2️⃣ Создайте новую директорию для вашего проекта и перейдите в нее через командную строку.

3️⃣ Далее установите Gulp локально в вашем проекте, выполнив команду:

npm install gulp --save-dev

4️⃣ Создайте файл gulpfile.js в корневой директории вашего проекта. В нем вы будете описывать задачи для Gulp.

5️⃣ Теперь можно использовать Gulp для автоматизации задач в вашем проекте. Вы можете запустить Gulp, выполнив команду gulp в корневой директории проекта.

Если понравилась инфа, добавь 🔥🔥🔥

CodeBase | Frontend

⚡️ТОП-4 инструмента для разработки ИИ на JS ⚡️

➡️ AI.JSX — разработанный Fixie, является динамичным фреймворком для создания разговорных приложений с использованием JavaScript и JSX, оптимизированным для проектов на React.

🔵 Он выделяется среди других инструментов для ИИ благодаря надежной поддержке инжиниринга подсказок и простой интеграции с внешними API.

➡️ TensorFlow.js — адаптация библиотеки TensorFlow от Google для JavaScript, специально созданная для использования в вебе и Node.js, чтобы внедрить возможности машинного обучения в браузеры и серверные приложения.

🔵 Одним из ключевых преимуществ TensorFlow.js является способность запуска моделей МО прямо в браузере.

➡️ Brain.js предлагает простой способ создания нейронных сетей на JavaScript, подходит для браузера и Node.js.

🔵 Основное применение Brain.js — автоматизация процессов, таких как анализ текста, объединение PDF, обработка изображений и другие задачи, связанные с обработкой данных.

➡️ Tabnine — помощник по автозаполнению кода на основе ИИ, улучшающий опыт программирования.

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

Если понравился пост, добавь 🔥🔥🔥

CodeBase | Frontend

⚡️ Крутое дизайнерское решение для ресторана.

Меню для сайта, в виде...туалетной бумаги.

🔗 Ссылка

CodeBase | Frontend

⚡️ ТОП CSS-библиотек для анимации⚡️

1️⃣ Animate.css — библиотека содержит более ста разнообразных эффектов, включая появление и исчезание элементов, вращение, изменение размеров и эффект "дребезг".

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

2️⃣ cssanimation.io — предлагает более 70 анимационных эффектов на CSS.

🟢 Также поддерживает Greensock, широко используемую библиотеку для анимации на JavaScript.

3️⃣ Animista — в библиотеке доступен набор анимаций, которые можно настраивать прямо в редакторе интерфейса.

🟢 Вы выбираете желаемый эффект и регулируете параметры, такие как скорость, задержка и продолжительность анимации.

4️⃣ Magic CSS — небольшая библиотека предлагает набор CSS-анимаций, которые можно активировать при возникновении событий в браузере.

🟢 Такие эффекты могут быть использованы, например, для эффектного отображения другого элемента при клике на кнопку.

5️⃣ CSS Wand — в этой библиотеке собраны анимации для кнопок, индикаторов загрузки и полей ввода.

CodeBase | Frontend

⚡️ ТОП-3 CSS ФРЕЙМВОРКА ⚡️

1️⃣ Bootstrap — является наиболее распространенным и известным CSS-фреймворком в мире.

🔵 Bootstrap предлагает последовательную и тестируемую кодовую базу для достижения надежных результатов, хотя некоторые могут считать его слишком ограничивающим, поскольку классы Bootstrap могут быстро наводить стиль на HTML-код для front-end разработчиков.

2️⃣ Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, построенный на Flexbox.

🟣 Его цель – предложить современную, минималистичную альтернативу другим CSS-фреймворкам.

3️⃣ Foundation – это адаптивный фронт-энд фреймворк, предлагающий набор CSS-инструментов, ориентированных на дизайн и доступность на мобильных устройствах.

🔴 Foundation включает разнообразные плагины JavaScript для добавления интерактивности в ваши веб-приложения.

Если понравился пост, поставь 🔥🔥🔥

CodeBase | Frontend

⚡️⚡️ Emmet Cheat Sheet — онлайн ресурс для Emmet, где вы найдете все команды и сокращения, раскрывающиеся в объемный код и значительно ускоряющие процесс разработки.

🔗 Ссылка

CodeBase | Frontend

⚡️ Что фронтенд-разработчики должны знать о Web 3.0 ⚡️

💩 Обсуждение Web 3.0 возобновилось после презентации Марка Цукерберга о переименовании Facebook в Meta и компании, направленной на создание метавселенной. Это ускорило переход к новой версии интернета.

💩 Web 3.0 связан с метавселенной, блокчейном и криптовалютами, но точное определение часто неясно из-за отсутствия строгого определения. Переход к Web 3.0 может занять много времени. Эра Web 1.0 представляла статические страницы, а Web 2.0 ввела интерактивность.

💩 Web 3.0 делает пользователей владельцами информации через децентрализованные технологии, гарантирующие конфиденциальность. Пользователи становятся анонимными и могут проводить финансовые транзакции с помощью криптовалют. Блокчейн меняет отрасли и устанавливает новый стандарт.

💩 Мы только начинаем переход к Web 3.0, где пользователи станут ключевым фактором.новые умения и понимание цифровых технологий.

CodeBase | Frontend