Верстка сайта по макету из Figma

Мини-курс полностью посвящен практике. В течении 9 уроков вы с нуля по макету из Figma научитесь создать верстку сайта. Я покажу шаг за шагом как создается адаптивная верстка сайта.

В данном курсе я расскажу как сформировать портфолио и загрузить его на бесплатный хостинг GitHub Pages. Вы создадите верстку сайта самостоятельно и добавите эту работу в свое портфолио.

📺 Cсылка на курс: YouTube

➡️ @byFrontDeveloper | #курсы

Я подготовил для вас краткую шпаргалку по единицам CSS.

Приятного использования! 💀

➡️ @byFrontDeveloper | #ресурсы

Самая большая шпаргалка по UX

Найден невероятный ресурс для UI/UX-дизайнеров. В нем вы найдете все о

⏩Типографика
⏩ Принципы дизайна
⏩ Процесс проектирования
⏩ Визуальный и пользовательский дизайн
⏩ ИсследованиеUX
⏩ ЗаконыUX
и многое другое

⛓Ссылка: here

➡️ @byFrontDeveloper | #ресурсы

➡️ @byFrontDeveloper | #мемы

40 незаменимых шпаргалок для веб-дизайнеров и разработчиков 🔥

⛓Ссылка: here

➡️ @byFrontDeveloper | #ресурсы

Создаем динамические веб-сайты на PHP. 4-е межд. изд.

Автор: Татро Кевин, Макинтайр Питер
Год издания: 2021

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

➡️ @byFrontDeveloper | #книги

Container Queries в действии

Медиазапросы, которые могут применяться на основе размера родительского элемента, а не всей области просмотра

HTML, используемый в этом примере:

<button class='responsive-button'>
  <img src='cart.png' alt='...'>
  <span class='text'>ADD TO CART</span>
</button>

Сначала мы объявляем элемент кнопки контейнером, а затем добавляем запрос контейнера, указывающий, что если ширина кнопки меньше некоторого определенного значения, текст должен быть скрыт

➡️ @byFrontDeveloper | #tips

Паттерны проектирования jаvascript

Автор: Ди Франческо Уго
Год издания: 2025

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

➡️ @byFrontDeveloper | #книги

Тестирование React-приложений на практике

Запись 5-часового воркшопа о TDD и тестировании React приложений, в рамках которого Александр Беспоясов написал конвертер валют и покрыл его тестами. Вы узнаете, как:

⏩ Выделять и тестировать бизнес-логику
⏩ Разделять код на модули так, чтобы их было удобно тестировать
⏩ Применять разные стратегии моков, готовить стабы и тестовые данные
⏩ Тестировать сайд-эффекты и React-хуки
⏩ Работать с асинхронными функциями и тестировать их
⏩ Подключать сторонние библиотеки через адаптеры для удобного тестирования

📺 Cсылка на курс: YouTube

➡️ @byFrontDeveloper | #курсы

🈳 Отличный источник после изучения официальной документации по React

Основные темы включают:
🟡Frameworks & Build Tools
🟡 Project Standards for High-Quality Code
🟡 Ecosystem
🟡 Accessibility & Semantics
🟡 Styling & UI Libraries
🟡 Proficiency with the Hooks API
🟡 State Management in React Applications
🟡 React Performance & Optimization

⛓Ссылка: тут

➡️ @byFrontDeveloper | #ресурсы

Огромное руководство по стилю JavaScript 👩‍💻

Сохраняй и делись с друзьями!

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

kaggle — сайт, на котором собраны бесплатные курсы по программированию для начинающих. Среди направлений: Python, машинное обучение, SQL.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Основы web-дизайна. Методика проектирования

Автор: Нагаева И. А.
Год издания: 2021

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

➡️ @byFrontDeveloper | #книги

Курс TypeScript

В данном видеокурсе мы с вами рассмотрим возможности языка строгой типизации - TypeScript. Разберём его основные фишки и ключевые отличия от JavaScript. Изучим такие понятия, как перечисления (Enum), интерфейсы, пространства имён. И в дополнение, рассмотрим набор нативных утилит, которые предоставляет сам язык.

📺 Cсылка на курс: YouTube

➡️ @byFrontDeveloper | #курсы

7 способов скрыть элемент с помощью CSS: на заметку фронтенд-разработчику

➡️ @byFrontDeveloper | #ресурсы

Образовательный сайт для обучения и практики SQL-запросов, предлагающий задачи и проверки в реальном времени. 🔥

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Простая шпаргалка по поисковой оптимизации для веб-разработчика

➡️ @byFrontDeveloper | #ресурсы

Типы данных JavaScript под капотом: гайд для фронтенд-разработчика

📖 Читать: ссылка

➡️ @byFrontDeveloper | #cтатьи

Шпаргалка по React 19 от Kent C Dodds, создателя Epic React

Это отчасти шпаргалка, отчасти краткое напоминание о некоторых новых возможностях React 19 с простыми примерами кода.

➡️ @byFrontDeveloper | #ресурсы

У меня для вас реально превосходная вещь!

Библиотека на JavaScript для генерации PDF-документов 👩‍💻

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

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Лучше уже не будет!

JavaScript-библиотека для создания анимаций. Она предоставляет мощные и гибкие инструменты для анимации HTML, SVG, CSS и объектов JavaScript.

Пример использования:

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  duration: 800
});

Этот код создаёт анимацию, в которой элемент div перемещается на 250px вправо и поворачивается на один полный оборот.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы