Изучаем CSS Flexbox прямо в игре

Весна уже вовсю идёт, но лягушата не могут добраться до своих кувшинок. Помогите рассадить их по местам с помощью CSS-кода:

https://flexboxfroggy.com/#ru

В игре доступно 24 уровня, где вы постепенно изучите свойства justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow и align-content.

#веб #css #фронтенд

Готовы к дачному сезону?

Попробуйте вырастить морковь прямо в браузере. Вам предстоит с помощью свойств CSS Grid Layout поливать грядки с морковкой, а также избавляться от назойливых сорняков.

В процессе игры вы изучите свойства grid: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows и grid-template.

Повозиться в грядке: https://cssgridgarden.com/#ru

#css #веб #фронтенд

​Браузерные игры, которые помогут легко изучить CSS

1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.

2. CSS Diner — в игре даётся таблица блюд, HTML форма и таблица с элементами. Игроку нужно подготовиться к ужину и разместить все предметы. Эта игра отлично подойдёт для изучения CSS селекторов.

3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.

#css

Шпаргалка по всем шпаргалкам

Это настоящая находка для любого разработчика. Сервис насчитывает около 6000 разнообразных шпаргалок в картинках: по программированию и разработке, обучению, играм и домашнему быту. Т.е. кроме классических шпаргалок по типу регулярок и SQL, тут можно найти шпаргалки по кофейным напиткам, командам в Minecraft и французской грамматике.

Сайт, который достоин быть в закладках

#шпаргалка #general #ru

Статья: Простыми словами о работе HTTP-запросов

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

И если вы всё ещё не уверены в своих знаниях касательно работы HTTP-запросов, кодов состояния, заголовков и работы протокола в целом, то эта статья простым и доступным языком расскажет про всё это.

#статья #web #теория #ru

Урок: Как работает сжатие?

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

В этом уроке рассмотрят различные методы сжатия, их избыточность, алгоритмы Хаффмана, а также сжатие с потерями и без:

https://youtu.be/CJFUN6BrkGE?si=cpDz1uFIznvqsKqU

#урок #теория #ru

Всё о CSS Grid за 13 минут

CSS Grid — это мощный инструмент для упрощения создания сложных макетов на веб-страницах. Он позволяет разработчикам легко управлять расположением элементов на странице, обеспечивая гибкость и контроль над их позиционированием.

Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.

Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.

https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v

@prog_point #web #frontend #css

​​Топ-10 незаменимых плагинов для VS Code в 2024 году

Огромная популярность VS Code во многом связана с его расширяемостью: функциональность редактора можно существенно нарастить за счет установки дополнительных плагинов.

Ловите подборку, где рассматривают 10 суперполезных расширений, которые значительно упростят работу с кодом и повысят вашу продуктивность. Вот парочка из них:

— Live Server — запускает локальный сервер одним кликом;
— Polacode — создаёт красивые и понятные скриншоты кода для презентаций или туториалов;
— Prettier — автоматически форматирует код в нужном стиле;

#инструмент #подборка #general #ru

20 бесплатных онлайн-игр программистов для лёгкого обучения

Сохраняйте подборку, включающую в себя бесплатные онлайн-игры для программистов, которые позволят в увлекательной форме освоить JavaScript, Java, Python, PHP, C# и другие языки.

Среди них CodeCombat, Ruby Warrior, Code Hunt, Robocode и многое другое.

#general #ru

Курс по React для начинающих

Курс начинается с основ и постепенно переходит к более сложным темам, охватывая всё от установки окружения до взаимодействия с бекендом.

Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.

https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh

#курс #react #web #ru

Топ алгоритмов, которые стоит знать любому разработчику

Алгоритмы — это не про «зазубри и забудь», а целый набор инструментов, которые помогают разработчику эффективно решать повседневные задачи. Их знание учит видеть суть проблемы и находить оптимальные пути к её решению.

В статье объясняется, какие 12 алгоритмов стоит знать разработчику: от базовых сортировок до поиска кратчайшего пути. И всё это с визуализацией (как на примере выше), чтобы легче было понять, как они работают на практике.

#алгоритмы #теория #ru