Изучаем 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

Параллельное программирование

Курс знакомит с основами многопоточного программирования и методами повышения производительности приложений. Рассматриваются разные подходы, от синхронизации потоков до оптимизации с помощью алгоритмов и технологий.

В ходе курса будут практические задания с POSIX потоками, lock-free алгоритмами и корутинами, что поможет понять, как создавать быстрые и масштабируемые приложения. Вы научитесь избегать блокировок, улучшать производительность и разберетесь в современных подходах к синхронизации и асинхронному программированию.

Ссылка на курс

#курс #продолжающим #ru

4 сайта, чтобы учиться новым скиллам играючи

1) Codecombat
На сайте собран большая библиотека игры для разных целей: изучение языка с нуля или знакомство с основами информатики. 

2) Flexbox Froggy
Игра, в которой вам нужно помочь лягушонку добраться до кувшинки используя только CSS. 

3) Screeps
Стратегия по типу Dwarf Fortress, но управление осуществляется через команды JavaScript.

4) SQL Murder Mystery
Раскройте загадочное убийство с помощью SQL. Предупреждаем, что вас ждёт много текста на английском. 

Сохраняйте для прокачки отдыха

#игры #веб #sql

Проектирование базы данных для самых маленьких — на примере кинотеатра

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

В статье разобрали, как шаг за шагом проектировать структуру базы данных: от выбора между ENUM и справочником до логики связи фильмов с жанрами через промежуточную таблицу. Плюс, классный момент — почему для билетов лучше использовать UUID, а не автоинкремент.

#статья #бд #начинающим #ru

Курс: фулстек-разработка веб-сервиса

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

Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.

#курс #web #fullstack #ru