💡 Идея пет-проекта: таймер обратного отсчета на JS

Сложность: 🌟⭐️⭐️⭐️⭐️

⚡️ Для улучшения ваших навыков в работе с JavaScript важно изучить разнообразные концепции и функции языка с помощью практических проектов.

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

⚡️ Вы можете играть с внешним видом по своему вкусу. С помощью этого проекта вы познакомитесь и сможете использовать различные функции времени в JavaScript.

💻 Технологии:

- HTML/CSS
- JavaScript

🔗 Исходный код

CodeBase | Frontend

Макет сайта "Aperture"

Сложность: ⭐️⭐️⭐️⭐️⭐️

Красивый макет сайта фото студии. Простенький макет, но очень красивый.

🔗 Ссылка на макет

CodeBase | Frontend

🖥 Node.js - это среда выполнения JavaScript, которая позволяет запускать JavaScript на стороне сервера. Она базируется на движке V8 от Google и обеспечивает возможность создания высокопроизводительных веб-приложений.

✔️ Установка

➡️ Перейдите на официальный сайт Node.js
➡️ Скачайте установочный файл Node.js для вашей операционной системы (Windows, macOS, Linux).
➡️ Запустите установочный файл и следуйте инструкциям мастера установки.
➡️ После установки можно проверить, что Node.js установлен корректно, открыв терминал (командную строку) и введя команду node -v.

⚡️ Если у вас появится версия Node.js, значит установка прошла успешно.

🟢 После установки Node.js можно использовать его для выполнения JavaScript на сервере, создания веб-серверов, API и многих других задач.

Если вам понравился пост, добавьте 🔥🔥🔥.
Вам не сложно — админу приятно 🙂

CodeBase | Frontend

⚡️ Vertical TimeLine — универсальный элемент вашего проекта.
Реализован с помощью HTML & CSS.

Сложность: ⭐️⭐️⭐️⭐️⭐️

🔗 Ссылка на код

CodeBase | Frontend

🖥 CSS3 Flexbox - это новая технология, внедренная в последнюю версию CSS, которая позволяет гибко управлять раскладкой блоков внутри контейнера-родителя.

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

🔵 Благодаря CSS Flexbox, блоки легко выравниваются по горизонтали и вертикали.

🔵 CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:

➡️ display: flex; — для блокового отображения;

➡️ display: inline-flex; — для инлайнового отображения.

➡️ Выравниваем горизонтально justify-content

➡️ justify-content

🟢 flex-start Выравнивает по левой кромке. Дефолтное значение

🟢 flex-end Выравнивает по правой кромке.

🟢 center Выравнивает по середине.

🟢 space-between Элементы равномерно распределены по ширине контейнера-родителя, при этом первый и последний элементы выровнены соответственно по левому и правому краю без отступов, а остальные элементы размещены между ними с одинаковыми интервалами.

🟢 space-around По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина.

🟢 initial Задание дефолтного значения.

🟢 inherit Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

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

CodeBase | Frontend

🖥 Медиа-запросы представляют собой 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