zerotocode

Zerotocode.org

Zero to Code-это бесплатный онлайн-курс о создании вещей в Интернете , используя фундаментальные веб-технологии: HTML, CSS и JavaScript. Я хочу, чтобы ZTC был лучшим местом в Интернете, чтобы научиться делать вещи с кодом. Zero to Code использует CodeFrame в качестве учебной среды, для своей обстановки, быстрого цикла обратной связи и фокусировки на основе.

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

Внесение вклад: начинающие приветствуются!

Zero to Code - это статический сайт, построенный с Hugo. Hugo - это статический генератор сайтов, который принимает документы Markdown и шаблоны HTML/CSS/JS и генерирует пакет статических файлов HTML/CSS/JS, которые образуют статический сайт. Вы можете узнать больше о том, как использовать Hugo на Gohugo.io. В этом разделе Readme рассказывается о том, как работать с Hugo в репозитории ZTC.

Генерируя сайт

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

$ hugo
...
[some info about the generated files]

Если вы пишете и хотите видеть результаты, когда вы пишете страницу или изменяете шаблоны, вы можете запустить сервер разработки с hugo server -D .

$ hugo server -D
... serving development server at localhost:1313

Когда вы запускаете сервер таким образом, вы можете перейти в localhost:1313 в своем браузере, чтобы увидеть версию сайта в прямом эфире при редактировании.

Настройки ZTC

Zero to Code имеет пару настройки, которые мы используем в верхней части голой функциональности Хьюго, чтобы сделать учебные пособия более эффективными.

Синтаксические кодовые блоки с кнопками «Попробуйте это».

Наиболее важной настройкой, которую ZTC имеет на вершине Hugo, является то, как мы создаем синтаксические кодовые блоки. Вместо того, чтобы использовать синтаксис Triple-Backtick от Markdown, мы используем пользовательский синтаксис Hugo для определения синтаксиса, выделенного кодовым блоком, например:

 {{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}

Вы также можете определить код css или javascript , а не html , и мы можем сказать Хьюго выделить определенные строки с помощью синтаксиса "hl_lines=N1 N2 N3-N5" .

 {{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}

Когда мы определяем выделенный кодовый блок таким образом, на страницах single.html (однократные учебные страницы), у нас также есть скрипт, который проходит через Alll .highlight ED -кодовые блоки на странице и добавляет кнопку «Попробуйте это» в правом верхнем углу от каждого кодового блока, который открывает кодовый фрейм с указанным примером кода.

Встроенные редакторы CodeFrame

Иногда мы хотим внедрить живой, интерактивный экземпляр редактора CodeFrame на странице. В настоящее время лучший способ сделать это - создать .fixed.button.liveEditorContainer Div, который содержит элемент <iframe> , указывающий на URL редактора CodeFrame, например, этот пример из обзора.

 < div class =" liveEditorContainer fixed button " >
    < iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >

Это встраивает редактор CodeFrame, указанный URL на страницу, в нужном размере.

Класс button и коробки с тенями

Большинство интерактивных элементов и определенных подчеркнутых элементов (например, выделенных кодовых блоков и изображений) поднимаются с поверхности страницы с тенью. За то, что класс .button Если вы хотите сделать какой -то элемент, поднятый с помощью кнопок CodeFrame, используйте класс .button .

Если вы хотите, чтобы элемент не был интерактивным, вы можете применить классы .fixed.button к элементу, который отключит наклон и активную анимацию на кнопке.

Поддержать ноль для кода

Если вам нравится проект Zero to Code, вы хотите поддержать то, что я делаю в будущем, пожалуйста, подумайте о том, чтобы сделать пожертвование для кода через PayPal или Venmo.

В качестве альтернативы, пожалуйста, рассмотрите возможность пожертвования некоторым из лучших некоммерческих организаций, проводящих большую работу в образовательном пространстве CS, Khanacademy, Hack Club и Stutech.