Изучаем CSS Flexbox прямо в игре
Весна уже вовсю идёт, но лягушата не могут добраться до своих кувшинок. Помогите рассадить их по местам с помощью CSS-кода:
https://flexboxfroggy.com/#ru
В игре доступно 24 уровня, где вы постепенно изучите свойства
#веб #css #фронтенд
Весна уже вовсю идёт, но лягушата не могут добраться до своих кувшинок. Помогите рассадить их по местам с помощью CSS-кода:
https://flexboxfroggy.com/#ru
В игре доступно 24 уровня, где вы постепенно изучите свойства
justify-content
, align-items
, flex-direction
, order
, align-self
, flex-wrap
, flex-flow
и align-content
.#веб #css #фронтенд
👍19
Готовы к дачному сезону?
Попробуйте вырастить морковь прямо в браузере. Вам предстоит с помощью свойств CSS Grid Layout поливать грядки с морковкой, а также избавляться от назойливых сорняков.
В процессе игры вы изучите свойства grid:
Повозиться в грядке: https://cssgridgarden.com/#ru
#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 #веб #фронтенд
👍22
Браузерные игры, которые помогут легко изучить CSS
1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.
2. CSS Diner — в игре даётся таблица блюд, HTML форма и таблица с элементами. Игроку нужно подготовиться к ужину и разместить все предметы. Эта игра отлично подойдёт для изучения CSS селекторов.
3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.
#css
1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.
2. CSS Diner — в игре даётся таблица блюд, HTML форма и таблица с элементами. Игроку нужно подготовиться к ужину и разместить все предметы. Эта игра отлично подойдёт для изучения CSS селекторов.
3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.
#css
👍11
Forwarded from Сохранёнки программиста
Шпаргалка по всем шпаргалкам
Это настоящая находка для любого разработчика. Сервис насчитывает около 6000 разнообразных шпаргалок в картинках: по программированию и разработке, обучению, играм и домашнему быту. Т.е. кроме классических шпаргалок по типу регулярок и SQL, тут можно найти шпаргалки по кофейным напиткам, командам в Minecraft и французской грамматике.
Сайт, который достоин быть в закладках
#шпаргалка #general #ru
Это настоящая находка для любого разработчика. Сервис насчитывает около 6000 разнообразных шпаргалок в картинках: по программированию и разработке, обучению, играм и домашнему быту. Т.е. кроме классических шпаргалок по типу регулярок и SQL, тут можно найти шпаргалки по кофейным напиткам, командам в Minecraft и французской грамматике.
Сайт, который достоин быть в закладках
#шпаргалка #general #ru
🔥13👍4🍌3❤🔥1
Forwarded from Сохранёнки программиста
Статья: Простыми словами о работе HTTP-запросов
Понимание работы веб-запросов актуально почти для любого разработчика. С запросами можно работать, разрабатывая бэкенд, телеграм-бота, десктопной приложение или микросервис.
И если вы всё ещё не уверены в своих знаниях касательно работы HTTP-запросов, кодов состояния, заголовков и работы протокола в целом, то эта статья простым и доступным языком расскажет про всё это.
#статья #web #теория #ru
Понимание работы веб-запросов актуально почти для любого разработчика. С запросами можно работать, разрабатывая бэкенд, телеграм-бота, десктопной приложение или микросервис.
И если вы всё ещё не уверены в своих знаниях касательно работы HTTP-запросов, кодов состояния, заголовков и работы протокола в целом, то эта статья простым и доступным языком расскажет про всё это.
#статья #web #теория #ru
Академия Selectel
HTTP-запросы - структура (заголовок и тело), методы, строка статуса и коды состояния, ответы
Рассказываем о HTTP-запросах, с помощью которых большинство используемых нами веб- и мобильных приложений взаимодействуют с глобальной сетью. Разбираем структуру HTTP-запроса - из чего состоят, как запрос отправляется на сервер и как расшифровывается ответ
👍4🍌3❤2
Forwarded from Сохранёнки программиста
Урок: Как работает сжатие?
Алгоритмы сжатия – это способ уменьшения объема данных без потери информации. Они полезны при создании протоколов обмена данными, работе с файлами и сохранениями. Такие алгоритмы используются повсеместно, а без них любой обмен данными замедлился в разы.
В этом уроке рассмотрят различные методы сжатия, их избыточность, алгоритмы Хаффмана, а также сжатие с потерями и без:
https://youtu.be/CJFUN6BrkGE?si=cpDz1uFIznvqsKqU
#урок #теория #ru
Алгоритмы сжатия – это способ уменьшения объема данных без потери информации. Они полезны при создании протоколов обмена данными, работе с файлами и сохранениями. Такие алгоритмы используются повсеместно, а без них любой обмен данными замедлился в разы.
В этом уроке рассмотрят различные методы сжатия, их избыточность, алгоритмы Хаффмана, а также сжатие с потерями и без:
https://youtu.be/CJFUN6BrkGE?si=cpDz1uFIznvqsKqU
#урок #теория #ru
YouTube
КАК РАБОТАЕТ СЖАТИЕ?
Телеграм-канал - https://t.iss.one/Alek_OS
Все ролики без рекламы - https://vk.com/alekos1
❤️ Поддержка канала:
Бусти - https://boosty.to/alekos
Юмани - https://yoomoney.ru/to/410011179144828
Введение
Избыточность
RLE
Классический хаффман
Адаптивный хаффман…
Все ролики без рекламы - https://vk.com/alekos1
❤️ Поддержка канала:
Бусти - https://boosty.to/alekos
Юмани - https://yoomoney.ru/to/410011179144828
Введение
Избыточность
RLE
Классический хаффман
Адаптивный хаффман…
❤6🍌2👍1
Всё о CSS Grid за 13 минут
CSS Grid — это мощный инструмент для упрощения создания сложных макетов на веб-страницах. Он позволяет разработчикам легко управлять расположением элементов на странице, обеспечивая гибкость и контроль над их позиционированием.
Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.
Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.
https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v
@prog_point #web #frontend #css
CSS Grid — это мощный инструмент для упрощения создания сложных макетов на веб-страницах. Он позволяет разработчикам легко управлять расположением элементов на странице, обеспечивая гибкость и контроль над их позиционированием.
Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.
Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.
https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v
@prog_point #web #frontend #css
YouTube
Grid CSS полный курс за 13 минут. Все свойства
В этом курсе мы поработаем с grid layout css и кратко рассмотрим все свойства!
Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend
Игра для закрепления знаний - https://cssgridgarden.com/#ru
↓↓↓ПЛЭЙЛИСТЫ ↓↓↓
Собеседования…
Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend
Игра для закрепления знаний - https://cssgridgarden.com/#ru
↓↓↓ПЛЭЙЛИСТЫ ↓↓↓
Собеседования…
👍6❤🔥1❤1
Forwarded from Сохранёнки программиста
Топ-10 незаменимых плагинов для VS Code в 2024 году
Огромная популярность VS Code во многом связана с его расширяемостью: функциональность редактора можно существенно нарастить за счет установки дополнительных плагинов.
Ловите подборку, где рассматривают 10 суперполезных расширений, которые значительно упростят работу с кодом и повысят вашу продуктивность. Вот парочка из них:
— Live Server — запускает локальный сервер одним кликом;
— Polacode — создаёт красивые и понятные скриншоты кода для презентаций или туториалов;
— Prettier — автоматически форматирует код в нужном стиле;
#инструмент #подборка #general #ru
Огромная популярность VS Code во многом связана с его расширяемостью: функциональность редактора можно существенно нарастить за счет установки дополнительных плагинов.
Ловите подборку, где рассматривают 10 суперполезных расширений, которые значительно упростят работу с кодом и повысят вашу продуктивность. Вот парочка из них:
— Live Server — запускает локальный сервер одним кликом;
— Polacode — создаёт красивые и понятные скриншоты кода для презентаций или туториалов;
— Prettier — автоматически форматирует код в нужном стиле;
#инструмент #подборка #general #ru
👍7🔥2❤1
Forwarded from Сохранёнки программиста
Универсальные шпаргалки по паттернам проектирования
Сохраняйте подборку 23 коротких шпаргалок по паттернам проектирования GoF. В каждой — универсальная схема и очень краткое описание. Отлично подойдёт для зарисовки, распечатки или поверхностного изучения. Все картинки не прикрепляются, поэтому полный список можно найти в статье.
#подборка #шпаргалка #паттерны #ru
Сохраняйте подборку 23 коротких шпаргалок по паттернам проектирования GoF. В каждой — универсальная схема и очень краткое описание. Отлично подойдёт для зарисовки, распечатки или поверхностного изучения. Все картинки не прикрепляются, поэтому полный список можно найти в статье.
#подборка #шпаргалка #паттерны #ru
👍3❤2
20 бесплатных онлайн-игр программистов для лёгкого обучения
Сохраняйте подборку, включающую в себя бесплатные онлайн-игры для программистов, которые позволят в увлекательной форме освоить JavaScript, Java, Python, PHP, C# и другие языки.
Среди них CodeCombat, Ruby Warrior, Code Hunt, Robocode и многое другое.
#general #ru
Сохраняйте подборку, включающую в себя бесплатные онлайн-игры для программистов, которые позволят в увлекательной форме освоить JavaScript, Java, Python, PHP, C# и другие языки.
Среди них CodeCombat, Ruby Warrior, Code Hunt, Robocode и многое другое.
#general #ru
Tproger
20 бесплатных онлайн-игр для программистов: лёгкое изучение
Бесплатные онлайн-игры для программистов, которые планируют освоить JavaScript, Java, Python, C# и другие языки программирования.
✍3❤1
Forwarded from Сохранёнки программиста
Курс по React для начинающих
Курс начинается с основ и постепенно переходит к более сложным темам, охватывая всё от установки окружения до взаимодействия с бекендом.
Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.
https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh
#курс #react #web #ru
Курс начинается с основ и постепенно переходит к более сложным темам, охватывая всё от установки окружения до взаимодействия с бекендом.
Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.
https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh
#курс #react #web #ru
YouTube
React JS c Нуля – ПОЛНЫЙ Курс для начинающих (2025)
🔥Станьте фронтенд разработчиком с нуля, освойте JavaScript, React, TypeScript и устройтесь на первую работу :
👉https://resuni.ru/aXbpK
💻Бесплатный курс по HTML & CSS:
👉https://resuni.ru/rflWx
🕊️ Другие полезные курсы:
Полный курс по JavaScript для начинающих:…
👉https://resuni.ru/aXbpK
💻Бесплатный курс по HTML & CSS:
👉https://resuni.ru/rflWx
🕊️ Другие полезные курсы:
Полный курс по JavaScript для начинающих:…
❤3
Forwarded from Сохранёнки программиста
This media is not supported in your browser
VIEW IN TELEGRAM
Топ алгоритмов, которые стоит знать любому разработчику
Алгоритмы — это не про «зазубри и забудь», а целый набор инструментов, которые помогают разработчику эффективно решать повседневные задачи. Их знание учит видеть суть проблемы и находить оптимальные пути к её решению.
В статье объясняется, какие 12 алгоритмов стоит знать разработчику: от базовых сортировок до поиска кратчайшего пути. И всё это с визуализацией (как на примере выше), чтобы легче было понять, как они работают на практике.
#алгоритмы #теория #ru
Алгоритмы — это не про «зазубри и забудь», а целый набор инструментов, которые помогают разработчику эффективно решать повседневные задачи. Их знание учит видеть суть проблемы и находить оптимальные пути к её решению.
В статье объясняется, какие 12 алгоритмов стоит знать разработчику: от базовых сортировок до поиска кратчайшего пути. И всё это с визуализацией (как на примере выше), чтобы легче было понять, как они работают на практике.
#алгоритмы #теория #ru
👍4❤1
Forwarded from Сохранёнки программиста
Параллельное программирование
Курс знакомит с основами многопоточного программирования и методами повышения производительности приложений. Рассматриваются разные подходы, от синхронизации потоков до оптимизации с помощью алгоритмов и технологий.
В ходе курса будут практические задания с POSIX потоками, lock-free алгоритмами и корутинами, что поможет понять, как создавать быстрые и масштабируемые приложения. Вы научитесь избегать блокировок, улучшать производительность и разберетесь в современных подходах к синхронизации и асинхронному программированию.
Ссылка на курс
#курс #продолжающим #ru
Курс знакомит с основами многопоточного программирования и методами повышения производительности приложений. Рассматриваются разные подходы, от синхронизации потоков до оптимизации с помощью алгоритмов и технологий.
В ходе курса будут практические задания с POSIX потоками, lock-free алгоритмами и корутинами, что поможет понять, как создавать быстрые и масштабируемые приложения. Вы научитесь избегать блокировок, улучшать производительность и разберетесь в современных подходах к синхронизации и асинхронному программированию.
Ссылка на курс
#курс #продолжающим #ru
Stepik: online education
Параллельное программирование
Курс рассматривает принципы и возможности многопоточного программирования в теории и на практике: классическое многопоточное программирование, алгоритмы и шаблоны || программирования, иные методы повышения производительности систем
4 сайта, чтобы учиться новым скиллам играючи
1) Codecombat
На сайте собран большая библиотека игры для разных целей: изучение языка с нуля или знакомство с основами информатики.
2) Flexbox Froggy
Игра, в которой вам нужно помочь лягушонку добраться до кувшинки используя только CSS.
3) Screeps
Стратегия по типу Dwarf Fortress, но управление осуществляется через команды JavaScript.
4) SQL Murder Mystery
Раскройте загадочное убийство с помощью SQL. Предупреждаем, что вас ждёт много текста на английском.
Сохраняйте дляпрокачки отдыха
#игры #веб #sql
1) Codecombat
На сайте собран большая библиотека игры для разных целей: изучение языка с нуля или знакомство с основами информатики.
2) Flexbox Froggy
Игра, в которой вам нужно помочь лягушонку добраться до кувшинки используя только CSS.
3) Screeps
Стратегия по типу Dwarf Fortress, но управление осуществляется через команды JavaScript.
4) SQL Murder Mystery
Раскройте загадочное убийство с помощью SQL. Предупреждаем, что вас ждёт много текста на английском.
Сохраняйте для
#игры #веб #sql
👍2
Forwarded from Сохранёнки программиста
Проектирование базы данных для самых маленьких — на примере кинотеатра
Иногда, чтобы понять, как устроены базы данных, лучше не зубрить теорию, а просто представить себе кинотеатр. Залы, фильмы, сеансы, билеты — всё это как раз то, что легко представить и удобно разложить по таблицам.
В статье разобрали, как шаг за шагом проектировать структуру базы данных: от выбора между
#статья #бд #начинающим #ru
Иногда, чтобы понять, как устроены базы данных, лучше не зубрить теорию, а просто представить себе кинотеатр. Залы, фильмы, сеансы, билеты — всё это как раз то, что легко представить и удобно разложить по таблицам.
В статье разобрали, как шаг за шагом проектировать структуру базы данных: от выбора между
ENUM
и справочником до логики связи фильмов с жанрами через промежуточную таблицу. Плюс, классный момент — почему для билетов лучше использовать UUID
, а не автоинкремент.#статья #бд #начинающим #ru
Tproger
Как спроектировать базу данных — на примере кинотеатра
Рассказываем, как спроектировать базу данных, с рассуждениями в процессе, чтобы результат стал совершенно прозрачным.
👍4🤔1
Forwarded from Сохранёнки программиста
Курс: фулстек-разработка веб-сервиса
Иногда хочется не просто писать код, а собирать из него что-то по-настоящему большое и работающее — как целый сервис. И вот тут становится важным не только знать технологии, но и уметь соединять их в одну стройную архитектуру.
Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.
#курс #web #fullstack #ru
Иногда хочется не просто писать код, а собирать из него что-то по-настоящему большое и работающее — как целый сервис. И вот тут становится важным не только знать технологии, но и уметь соединять их в одну стройную архитектуру.
Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.
#курс #web #fullstack #ru
Stepik: online education
Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js
Цель обучения — создать проект с нуля, изучив и применив технологии и архитектуру, которые обеспечивают качество и масштабируемость вашего кода, скорость разработки, а также удовольствие и радость от процесса.