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

Как вы думаете, развлечение и веб-разработка могут сосуществовать друг с другом? Если вы уже любите писать код, это не должно вас удивлять. Но многие новые разработчики изо всех сил пытаются Понять основные концепции HTML / CSS И эта борьба может расстраивать или просто раздражать.

Может быть Изучение программирования на CSS - разочаровывающее занятие Но, по крайней мере, это не должно быть скучно! Одна из лучших вещей о изучать программирование в том, что люди, которые хорошо умеют кодировать, также обладают навыками для создания игр, над которыми мы работаем Обучение других основным понятиям Проще говоря. Ничто не заменит практики и опыта в Изучите основы программирования на CSS , но игры, безусловно, помогают, и новые модели макетов, такие как grid и flexbox, в частности, используют преимущества модели практического обучения.

Игры | Изучите программирование CSS 1 | игры для изучения css, мин. DzTechs

Вот почему я собрал несколько забавных игр, чтобы помочь вам узнать больше о Язык программирования CSS. Во все эти игры можно играть бесплатно в вашем браузере, и они идеальны Чтобы улучшить свои знания CSS.

1. Наслаждайтесь CSS

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

Игры | Изучите программирование CSS 2 | 04 наслаждайтесь веб-приложением библиотеки CSS от DzTechs

Попробуйте поиграть в это Демо И посмотрите, что вы можете построить. Возможности ограничены только возможностями CSS. Вы можете сохранять и публиковать визуальные макеты, чтобы представить идеи или научить других концепциям CSS.

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

2. Разворачивание блочной модели

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

Игры | Изучите программирование CSS 3 | 05 модель складной коробки мин DzTechs

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

Исходный код всего проекта также находится в свободном доступе по адресу Репо GitHub. Вы можете скачать копию и разместить ее самостоятельно или использовать локально, если у вас нет интернета.

3. Сассмейстер

Если вы не знакомы с Sass или любым другим препроцессором CSS, вы упускаете из виду. Это лучший способ писать и поддерживать код CSS, и Sass - современный фаворит.

Игры | Изучите программирование CSS 4 | 06 sassmeister веб-приложение Sass-код мин DzTechs

с приложением Веб-приложение SassMeister Вы можете попрактиковаться в написании кода Sass в своем браузере. Традиционный способ - написать код локально, а затем скомпилировать файлы .SCSS в файлы .CSS.

Однако с помощью этого замечательного приложения вы можете написать код Sass в браузере и посмотреть, как он компилируется в реальном времени. Не полная IDE, как CodePen , но это онлайн-площадка для тестирования фрагментов кода и игры с Sass без необходимости устанавливать их локально.

4. Flyexplorer

веб-приложение. Fleexplorer Беннета Фрили Действительно интересный способ узнать о Flexbox без игры в стиле Tower Defense. Вы можете поиграть с демонстрацией активного контейнера, используя его гибкие свойства, которые ограничивают количество элементов в строке и соотношение сторон каждого элемента.

Игры | Изучите программирование CSS 5 | 07 flexplorer веб-приложение ui мин DzTechs

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

Но все же это веб-приложение с визуальным обозревателем - это увлекательный и интерактивный способ теоретического понимания работы с Flexbox.

5. Приложение Lrn

Последний пункт на самом деле не основан на браузере, а работает на iPhone (скоро появится для Android).

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

Игры | Изучите программирование CSS 6 | 08 lrn интерфейс приложения для iPhone узнать код мин DzTechs

Языки включают HTML, CSS, JavaScript, Ruby и Python. Это означает, что вы можете изучить все языки интерфейса и даже некоторые языки серверной части, если у вас есть время.

И Lrn - не единственное приложение в своем роде. вон там Другие приложения Подобного уровня, но Lrn действительно стоит особняком в отношении качества образования.

6. CSS Diner: селекторы CSS

Игры | Изучите программирование CSS 7 | CSS игры закусочная мин DzTechs

Очень красиво, правда? Определите элементы, классы, идентификаторы ... может быть, псевдоклассы? Что еще там? На самом деле существует больше способов выбрать предметы, чем вы думаете и хотите. CSS закусочная Он учит вас, как его использовать, предлагая указать части еды с помощью CSS. Некоторые проблемы могут немного сбивать с толку, но это программирование - в поиске в Google нет ничего плохого.

7. Зомби Flexbox

Flexbox Зомби Это неправдоподобно разработанная игра / курс, который обещает научить вас использовать flexbox в интуитивно понятной, увлекательной и самоусиливающейся игре, в основном вращающейся вокруг стрельбы по зомби из оружия, управляемого кодом flexbox. Он перенесет вас от основ к продвинутым элементам на нескольких уровнях, которые дополнены сюжетной линией, великолепной графикой и боевыми действиями по уничтожению зомби - вы даже можете забыть, что изучаете CSS.

Игры | Изучите программирование CSS 8 | css игры flexbox зомби мин DzTechs

Flexbox сам по себе является отличной технологией для гибкой организации контента в одном измерении, и если вы делаете что-то с интерфейсной веб-разработкой, вы должны изучить это перед собой. Независимо от того, выключите вы его или нет, Flexbox Zombies - отличный повод поиграть в игру, которая действительно вас чему-то учит. Если бы все образование могло быть таким, верно?

Тот же создатель также разработал курсовую игру для CSS Grid под названием «Сеточные существа. Это не бесплатно, но если вам нравятся Flexbox Zombies, вы можете потратить на это деньги.

8. Садовая сетка.

Лично я считаю, что flexbox - это хорошо, но он действительно хорош для одномерных (строк или столбцов) макетов, поэтому для более крупных проектов и шаблонов вы захотите использовать сетку (возможно, с некоторыми контейнерами flexbox внутри ячеек сетки). Как только вы поймете, что это будет аккуратно, чисто и круто, но может потребоваться некоторая кривая обучения, где это может помочь Сетка Сад (и упомянутые выше Grid Critters).

Игры | Изучите программирование CSS 9 | css игры сетка сад мин DzTechs

Grid Garden - бесплатная игра, в которой вам нужно разбить сад так, чтобы морковь поливали и пропалывали - и сетка оказалась идеальной для этой задачи! Это даст вам четкое представление об основных принципах сетевого позиционирования, которые затем можно будет применить к макетам вашего сайта.

9. Защита Flexbox

Игры | Изучите программирование CSS 10 | CSS игры Flexbox мин DzTechs

Вы уже знакомы с основами flexbox, но не можете «оправдать» и «выровнять» его идеально прямо? Флексбокс Защита Учебник по flexbox, замаскированный под игру в жанре Tower Defense, которая запомнит ваш оправданный контент и выровняется - или умрете. Но вы можете попробовать еще раз. Если вы никогда не были поклонником тех игр, которые принимают только один правильный ответ, вам понравится эта игра, поскольку она позволяет вам размещать башни в любом месте и добиваться успеха или неудачи.

10. Флексбокс Фрогги

Игры | Изучите программирование CSS 11 | css игры flexbox froggy min DzTechs

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

11. Игры CodePip

Игры | Изучите программирование CSS 12 | css игры codepip мин DzTechs

Если вы пробовали Grid Garden и Flexbox Froggy, вы видели несколько примеров в действии. КодПип на самом деле. Это всего лишь две бесплатные игры, которые они предлагают. Если вы зарегистрируете профессиональную учетную запись на их сайте, у них также есть игры, которые варьируются от общего обзора CSS до JavaScript.

Насколько это научит меня программировать CSS?

Игра в эти игры может помочь вам научиться Некоторые базовые концепции хорошо Особенно, если вы хотите изучить flexbox. В конце концов, игры могут научить вас только набираемым вами словам. Вы должны применить его на практике, если действительно хотите знать, как его использовать. Получите хороший редактор кода и несколько идей, которые вы хотите реализовать, и начните рисовать!

ДзТех

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