Как вы думаете, развлечение и веб-разработка могут сосуществовать друг с другом? Если вы уже любите писать код, это не должно вас удивлять. Но многие новые разработчики изо всех сил пытаются Понять основные концепции HTML / CSS И эта борьба может расстраивать или просто раздражать.
Может быть Изучение программирования на CSS - разочаровывающее занятие Но, по крайней мере, это не должно быть скучно! Одна из лучших вещей о изучать программирование в том, что люди, которые хорошо умеют кодировать, также обладают навыками для создания игр, над которыми мы работаем Обучение других основным понятиям Проще говоря. Ничто не заменит практики и опыта в Изучите основы программирования на CSS , но игры, безусловно, помогают, и новые модели макетов, такие как grid и flexbox, в частности, используют преимущества модели практического обучения.
Вот почему я собрал несколько забавных игр, чтобы помочь вам узнать больше о Язык программирования CSS. Во все эти игры можно играть бесплатно в вашем браузере, и они идеальны Чтобы улучшить свои знания CSS.
1. Наслаждайтесь CSS
Наслаждайтесь CSS Это веб-инструмент визуального дизайна для изучения программирования CSS на странице. Интерфейс перетаскивания позволяет легко добавлять и стилизовать элементы страницы, такие как закругленные углы, градиенты, тени текста и переходы.
Попробуйте поиграть в это Демо И посмотрите, что вы можете построить. Возможности ограничены только возможностями CSS. Вы можете сохранять и публиковать визуальные макеты, чтобы представить идеи или научить других концепциям CSS.
Кроме того, весь код полностью бесплатен и доступен для копирования и вставки в ваши веб-проекты. Также проверьте Список элементов галереи предварительно созданный с использованием пользовательских стилей CSS.
2. Разворачивание блочной модели
Разворачивание Не совсем игра, но очень интерактивный тур по стилю CSS-боксов. Концепции показаны визуально, чтобы узнать больше о преобразованиях CSS3, блоках и элементах страницы, а также о том, как все они работают вместе для управления содержимым на странице.
Это забавное маленькое веб-приложение было создано Крисом Руппелем и размещено как страница GitHub для всех, кто хочет поиграть с ним.
Исходный код всего проекта также находится в свободном доступе по адресу Репо GitHub. Вы можете скачать копию и разместить ее самостоятельно или использовать локально, если у вас нет интернета.
3. Сассмейстер
Если вы не знакомы с Sass или любым другим препроцессором CSS, вы упускаете из виду. Это лучший способ писать и поддерживать код CSS, и Sass - современный фаворит.
с приложением Веб-приложение SassMeister Вы можете попрактиковаться в написании кода Sass в своем браузере. Традиционный способ - написать код локально, а затем скомпилировать файлы .SCSS в файлы .CSS.
Однако с помощью этого замечательного приложения вы можете написать код Sass в браузере и посмотреть, как он компилируется в реальном времени. Не полная IDE, как CodePen , но это онлайн-площадка для тестирования фрагментов кода и игры с Sass без необходимости устанавливать их локально.
4. Flyexplorer
веб-приложение. Fleexplorer Беннета Фрили Действительно интересный способ узнать о Flexbox без игры в стиле Tower Defense. Вы можете поиграть с демонстрацией активного контейнера, используя его гибкие свойства, которые ограничивают количество элементов в строке и соотношение сторон каждого элемента.
К сожалению, я не могу найти способ увидеть код этого примера, кроме функции просмотра исходного кода браузера. Было бы очень хорошо иметь представление о исходном коде, встроенном в страницу, чтобы вы могли копировать / вставлять код в свои собственные проекты.
Но все же это веб-приложение с визуальным обозревателем - это увлекательный и интерактивный способ теоретического понимания работы с Flexbox.
5. Приложение Lrn
Последний пункт на самом деле не основан на браузере, а работает на iPhone (скоро появится для Android).
Приложение Lrn Это совершенно бесплатно, и вы узнаете, как писать код, с помощью доступных небольших уроков. В нем есть мини-соревнования и художественные задания, имитирующие реальный мир. Вы очень быстро освоите программирование и сможете применить свои знания в теории.
Языки включают HTML, CSS, JavaScript, Ruby и Python. Это означает, что вы можете изучить все языки интерфейса и даже некоторые языки серверной части, если у вас есть время.
И Lrn - не единственное приложение в своем роде. вон там Другие приложения Подобного уровня, но Lrn действительно стоит особняком в отношении качества образования.
6. CSS Diner: селекторы CSS
Очень красиво, правда? Определите элементы, классы, идентификаторы ... может быть, псевдоклассы? Что еще там? На самом деле существует больше способов выбрать предметы, чем вы думаете и хотите. CSS закусочная Он учит вас, как его использовать, предлагая указать части еды с помощью CSS. Некоторые проблемы могут немного сбивать с толку, но это программирование - в поиске в Google нет ничего плохого.
7. Зомби Flexbox
Flexbox Зомби Это неправдоподобно разработанная игра / курс, который обещает научить вас использовать flexbox в интуитивно понятной, увлекательной и самоусиливающейся игре, в основном вращающейся вокруг стрельбы по зомби из оружия, управляемого кодом flexbox. Он перенесет вас от основ к продвинутым элементам на нескольких уровнях, которые дополнены сюжетной линией, великолепной графикой и боевыми действиями по уничтожению зомби - вы даже можете забыть, что изучаете CSS.
Flexbox сам по себе является отличной технологией для гибкой организации контента в одном измерении, и если вы делаете что-то с интерфейсной веб-разработкой, вы должны изучить это перед собой. Независимо от того, выключите вы его или нет, Flexbox Zombies - отличный повод поиграть в игру, которая действительно вас чему-то учит. Если бы все образование могло быть таким, верно?
Тот же создатель также разработал курсовую игру для CSS Grid под названием «Сеточные существа. Это не бесплатно, но если вам нравятся Flexbox Zombies, вы можете потратить на это деньги.
8. Садовая сетка.
Лично я считаю, что flexbox - это хорошо, но он действительно хорош для одномерных (строк или столбцов) макетов, поэтому для более крупных проектов и шаблонов вы захотите использовать сетку (возможно, с некоторыми контейнерами flexbox внутри ячеек сетки). Как только вы поймете, что это будет аккуратно, чисто и круто, но может потребоваться некоторая кривая обучения, где это может помочь Сетка Сад (и упомянутые выше Grid Critters).
Grid Garden - бесплатная игра, в которой вам нужно разбить сад так, чтобы морковь поливали и пропалывали - и сетка оказалась идеальной для этой задачи! Это даст вам четкое представление об основных принципах сетевого позиционирования, которые затем можно будет применить к макетам вашего сайта.
9. Защита Flexbox
Вы уже знакомы с основами flexbox, но не можете «оправдать» и «выровнять» его идеально прямо? Флексбокс Защита Учебник по flexbox, замаскированный под игру в жанре Tower Defense, которая запомнит ваш оправданный контент и выровняется - или умрете. Но вы можете попробовать еще раз. Если вы никогда не были поклонником тех игр, которые принимают только один правильный ответ, вам понравится эта игра, поскольку она позволяет вам размещать башни в любом месте и добиваться успеха или неудачи.
10. Флексбокс Фрогги
Вы, вероятно, проведете день за игрой, а не на текущих уроках Flexbox, но лучше развернуть его в течение нескольких дней или недель, чтобы убедиться, что вы получаете много ускорителей памяти. Флексбокс Фрогги Идеально для этого - вам не нужно начинать с нуля, но если вы когда-нибудь обнаружите, что забываете команды, вы можете пройти через эту игру за несколько минут, чтобы быстро вернуть идеи.
11. Игры CodePip
Если вы пробовали Grid Garden и Flexbox Froggy, вы видели несколько примеров в действии. КодПип на самом деле. Это всего лишь две бесплатные игры, которые они предлагают. Если вы зарегистрируете профессиональную учетную запись на их сайте, у них также есть игры, которые варьируются от общего обзора CSS до JavaScript.
Насколько это научит меня программировать CSS?
Игра в эти игры может помочь вам научиться Некоторые базовые концепции хорошо Особенно, если вы хотите изучить flexbox. В конце концов, игры могут научить вас только набираемым вами словам. Вы должны применить его на практике, если действительно хотите знать, как его использовать. Получите хороший редактор кода и несколько идей, которые вы хотите реализовать, и начните рисовать!
