Проект Сказки для детей
https://skazki.prx.by/

Авторы работы: Леончик Максим, Екатерина Шмелева
Технологии: HTML, CSS, JavaScript, PHP, парсинг.

Данный проект мы сделали для всех, у кого есть маленькие дети:) Дело в том, что почитать сказку на ночь с телефона - целая проблема! Есть сайты со сказками, но они переполнены рекламой и крайне неудобные. Поэтому мы сделали сайт со сказками, в котором не будет рекламы, адаптированный под просмотр с телефона, с дневной и ночной темой. Кроме того, можно настроить под себя цвет текста и фона, а также размер шрифта и межстрочного интервала. Пользуйтесь на здоровье:)

P.S.
Сайт сделан моими учениками в рамках практики на курсы. Подобные проекты делают все, кто занимается на тарифе Практик. Подробнее про него тут: mentor.code.mu

Проект Английские фразовые глаголы
https://phvb.prx.by/

Автор работы: Антон Ворончихин
Технологии: HTML, CSS, JavaScript, React, NodeJS, crypto-js

Данный сайт предназначен для изучения фразовых глаголов. Это такие глаголы, у которых предлог существенно меняет значение слова. Например, give - давать, а give up - сдаваться.
В английском языке таких глаголов существует достаточно много, а вот каких-то словарей по ним в чистом виде я не встречал.
Поэтому мы создали такой сайт) Для того, чтобы добыть фразовые глаголы, была проделана большая работа. Мы взяли большой словарь Мюллера over 100 тыс слов и написали программу, которая добыла фразовые глаголы (это было нелегко). А затем я лично вручную проверил каждый глагол, отбросив лишние переводы (это был совсем тяжелый труд).

НОВИНКА!

Готов первый учебник по NextJS:
https://code.mu/ru/javascript/framework/next/book/prime/

Выходит с задержкой:)
Знаю, что его многие ждут, поэтому
только что доделал и сразу выкладываю:)

И одновременно стартует долгожданный бесплатный курс по NextJS. Желающие - присоединяйтесь к нам вот тут:
https://t.me/+-aI2lFe6VzExZmEy

P.S.
Это первый учебник из запланированных:)
Потом планируются еще продвинутые материалы!

Бесплатный курс ПРАКТИКА НА ВЕРСТКУ.
Начало: 25-го августа.

В данном курсе вам будут предложены задачи
в виде макетов сайтов, которые нужно сверстать.
Задачи идут от простым к сложным.
Сначала статичные макеты, а затем адаптивные.
Сделанные макеты вы будете отправлять на проверку ментору и получать обратную связь.
Продолжительность курса: 3 недели.

Отличная возможность попрактиковаться в верстке!
Для записи вступайте в следующий канал:
https://t.me/+bHn7Ah4jgeI5OTUy

Функция clamp() в CSS

Эта функция позволяет задать гибкое значение свойства, которое автоматически адаптируется к разным условиям (например, к разным размерам экрана).

Оно позволяет менять размеры шрифта, а также размеры блоков без медиа-запросов, тем самым сокращая и упрощая код.

Допустим, вы хотите, чтобы заголовок менял размер в зависимости от ширины экрана, но не становился меньше 16px и больше 32px. Функция clamp сделает это автоматически.

Подробнее с примерами смотрите тут:
https://code.mu/ru/markup/manual/css/function/clamp/

Свойство backdrop-filter в CSS

Это свойство позволяет применять фильтры (размытие, изменение контраста, цветовые эффекты) к области, находящейся позади элемента. Это создает эффект "стекла" или "морозного стекла".

Подробнее с примерами смотрите тут:
https://code.mu/ru/markup/manual/css/property/backdrop-filter/

P.S.
В качестве практического применения свойства можно указать модальное окно. С помощью backdrop-filter можно размыть основной сайт позади модалки. Попозже выпущу такой урок:)

Бесплатный курс по Python для новичков.

Курсы проходят в формате "менторство": я выдаю учебник и задачник, вы читаете, задаете вопросы, решаете задачи и присылаете на проверку.

Начало: 20-го августа.
Для записи вступайте в следующий канал:
https://t.me/+k2k7VLPc2ihkYWRi

Листая справочник CSS, обнаружил, что страница про свойство position без примеров. Доработал, добавил примеры на все варианты использования, а также новое sticky позиционирование:

https://code.mu/ru/markup/manual/css/property/position/

Доработал CSS свойство text-stroke

Добавил больше примеров, а также градиентную заливку и анимацию обводки.

Смотрите тут:
https://code.mu/ru/markup/manual/css/property/text-stroke/

Свойство clip-path в CSS

Данное свойство определяет область отображения элемента, обрезая его по заданной форме. В качестве параметра принимает функцию обрезки или путь SVG.

С его помощью можно обрезать картинку в произвольной форме. Например, в форме многоугольника или звездочки.

Подробности с примерами смотрите по ссылке:
https://code.mu/ru/markup/manual/css/property/clip-path/

Свойство mask в CSS

Данное свойство позволяет наложить маску на изображение. С его помощью можно обрезать картинку вообще в любой форме. Форма обрезания задается другой картинкой. Например, можно обрезать картинку в форме сердечка.

Подробности с примерами смотрите по ссылке:
https://code.mu/ru/markup/manual/css/property/mask/?v=1

Свойство shape-outside

Данное свойство позволяет задавать нестандартные формы обтекания для плавающих элементов. Соседние элементы будут обтекать заданную форму, а не прямоугольный контейнер.

Подробности с примерами смотрите по ссылке:
https://code.mu/ru/markup/manual/css/property/shape-outside/

Бесплатный тренинг по PHP:
"дата/время в ООП стиле"

Начало: 21-го августа.
Продолжительность: 7 дней

В PHP есть два стиля для работы с датой:
функциональный и ООП. Функциональный подход - это то, что вы уже знаете, если умете работать с датами. Но есть и другой подход - в ООП стиле. Этот подход считается более продвинутым, но требует знания ООП. В рамках данного тренинга вы познакомитесь с ООП подходом теоретически и на практических задачах.

Тренинг проходит в формате "менторство": я выдаю учебник и задачник, вы читаете, задаете вопросы, решаете задачи и присылаете на проверку.

Для записи вступайте в следующий канал:
https://t.me/+97KT6W6-n-M4YjAy

Доработал справочник PHP

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

В связи с чем некоторые ссылки могут перестать работать:)
Например, в основном учебнике PHP. Если у вас что-то не открывается, обновите страницу и проверьте еще раз. Если все равно не работает - пишите в личку)

Справочник тут:
https://code.mu/ru/php/manual/

Анонс:)

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

Обновление будет по готовности. Но предупреждаю заранее, так как при обновлении изменится нумерация уроков и местами их хеши.

Адаптивное меню-бутерброд на HTML, CSS и JavaScript

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

Читайте полную статью по ссылке:
https://code.mu/ru/markup/article/burger-menu/

СЕГОДНЯ!
Бесплатный курс по Python для новичков.

Мы уже начали! Присоединяйтесь к нам:)

Для этого вступайте в следующий канал:
https://t.me/+k2k7VLPc2ihkYWRi

НОВИНКА!
Бесплатный курс ПРАКТИКА НА ВЕРСТКУ.
Начало: 25-го августа.

В данном курсе вам будут предложены задачи
в виде макетов сайтов, которые нужно сверстать.
Задачи идут от простым к сложным.
Сначала статичные макеты, а затем адаптивные.
Сделанные макеты вы будете отправлять на проверку ментору и получать обратную связь.
Продолжительность курса: 3 недели.

Отличная возможность попрактиковаться в верстке!
Для записи вступайте в следующий канал:
https://t.me/+bHn7Ah4jgeI5OTUy

Адаптивная сетка через CSS гриды без медиазапросов

Современный CSS Grid Layout позволяет создавать адаптивные сетки без использования медиазапросов. Комбинация функций auto-fit и minmax дает мощный инструмент для автоматического размещения элементов.

Читайте полную статью по ссылке:
https://code.mu/ru/markup/article/responsive-grid-without-media-queries/

Модальное окно с размытием фона

Модальные окна - важный элемент интерфейса для отображения дополнительной информации. В данном уроке мы сделаем модальное окно с эффектом размытия фона с помощью CSS свойства backdrop-filter.

Читайте полную статью по ссылке:
https://code.mu/ru/markup/article/modal-with-blur/