Ого, нас набралось так много! 😱😊

И это всего за 1 день существования канала. Я приятно удивлён 😉

Пока большинство из вас проходят Неделю Магии 5 и первые уроки от нашей замечательной Ани, я ненароком записал бонус урок для тех, кто пройдет мой 3й и 4й день Недели Магии :)

Бонусный урок обещает быть вкусным и очень полезным. Из него вы почерпнете для себя очередную магию CSS-стилей 🧙‍♂️

Сформируем подачу контента вместе 😉

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

Мне хочется подавать вам качественный и понятный для вас контент :) Поэтому мне важно узнать ваш уровень обращения с кодами в Геткурсе, будь то CSS / JS или HTML.

Делитесь вашим опытом в комментариях ;)

Поскольку большинство из вас имели мало опыта работы с кодами, то, руководствуясь одним из комментариев, я постараюсь вам рассказывать сложные вещи простым языком. А так же объясню "гиковские" понятия, которые немало будут присутствовать в моих постах 😋

Вот и близится момент, когда я буду вести 3й и 4й день Недели Магии 5.

Кому-то будет сложно, кому-то совсем просто. Но задания будут не просто на "Скопировать и вставить", а ещё и на подумать 😉 Так что желаю всем участникам удачи на марафоне!

Собираю отзывы 😁

Друзья, вот и подходят к концу мои два дня ведения Недели Магии 5. Дальше Дима вам покажет ещё больше магии кода и вы доделаете этот чудесный макет.

В связи с этим я собираю отзывы о том, насколько были креативны для вас эти два дня проведённых со мной. Понравилась ли вам геймификация процесса обучения? Было ли вам сложно, исходя из вашего опыта, выполнять такие домашние задания от меня? Как вам подача материала и объяснения в уроке?

Всё, что я делал, я делал с душой для вас. И хотел бы понять, насколько это для вас имело место быть 😉

Отсутствие класса — тоже стиль 😉

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

Оно вам надо?

Есть очень крутой и органичный способ воздействия на целый родительный блок из внутренних стилей. Для этого достаточно всего лишь поставить фигурные скобки { } и написать в них ваши CSS-свойства :)
(пример на скриншоте)

#лайфхак

Друзья, коллеги, хороших вам выходных 👍🥳

Кто как отдыхает? А может, работает?

И если вы работаете, то я вас прекрасно понимаю, потому что я тоже. Хочу продолжить тему своего знакомства с вами :)

Многие наверняка работают в нескольких направлениях или на несколько проектов, и это совершенно нормальная ситуация в современном мире. Помимо того, что я куратор в Клубе Магии Геткурса, я ещё и имею причастность к игровой индустрии. Я разрабатываю игровые механики, персонажей, их характер, сценарий, сюжет, нарратив. Помимо JavaScript так же знаю Ruby on rails, и разрабатываю свою собственную игру, которая уже поучаствовала в паре игровых выставках мирового уровня :)
(спойлер: награды, конечно, было трудно завоевать, но зато я познакомился с очень интересными людьми)

Сейчас это является моим хобби, так как не приносит мне дохода, а лишь некоторые траты. Но это естественно :) На этой почве мне интересно геймифицировать процессы протекающие на Геткурсе, и я об этом глубоко задумываюсь.

Делитесь тем, как отдыхаете)

Мне очень близка и интересна идея 3D-лендингов и сайтов. Я всецело разделяю креатив от @DmitrySpace по созданию таковых.

Благодаря CSS-правилам, совместно с JS можно творить невообразимые вещи :) В данном случае мне безумно нравится, как вышел этот креативный блок с соц-сетями, который можно поставить, к примеру, внизу лендинга, и ваши соцсети уж точно не потеряются в потоке информации страницы.

К тому же вызывает большое желание кликнуть по ним 😉

#наработки

❗️ У Apple своё видение вёрстки ❗️

Адаптация страниц никогда не бывает лёгкой. И многие уже в этом убедились :) Но есть более глобальная проблема адаптации — это устройства Apple, которые зачастую кривят своим видом страницы на горизонтальных и вертикальных видах. Появляются какие-то полосы между блоками, а адаптированный блок, который нормально смотрится на остальных устройствах и при сжатии браузера, вдруг начинает странно себя вести на iPad...

Как это исправить так, чтобы ваша драгоценная адаптация не слетела на остальных клиентах?
Ответ: прописать стили только для устройств Apple!

И такое возможно благодаря некоторым директивам в @media правилах. Если мы пропишем @media only screen and (max-device-width: 1024px), то такое правило будет означать, что оно применимо "только к устройствам Apple" на разрешении устройства ниже 1024 пикселя. С помощью такой фишки можно не бояться за адаптацию на всех остальных устройствах.

Таким образом, можно локализовать проблему в стилях на определенных разрешениях. Представим, что наша проблема со стилями наблюдается только на iPad'ах в горизонтальном и вертикальном виде. Можно локализовать обращение таким образом:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
класс {
ваши стили...
}
}

Если не поставить директиву only перед screen, то все стили, которые вы примените внутри этого медиаправила, будут распространяться на все устройства и браузеры, включая Apple. В свою очередь, сама директива screen как раз означает, что эти правила будут действовать для устройств Apple.

#полезная_фишка