{"id":20858697,"url":"https://github.com/thesephist/zerotocode","last_synced_at":"2025-12-26T08:02:11.112Z","repository":{"id":97277944,"uuid":"179241064","full_name":"thesephist/zerotocode","owner":"thesephist","description":"The best place on the web to learn to make stuff with code","archived":false,"fork":false,"pushed_at":"2020-04-13T20:51:20.000Z","size":1327,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T07:24:14.523Z","etag":null,"topics":["codeframe","hugo-site","learn-to-code","website"],"latest_commit_sha":null,"homepage":"https://zerotocode.org","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thesephist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-03T08:06:10.000Z","updated_at":"2024-07-30T01:11:21.000Z","dependencies_parsed_at":"2023-06-26T04:07:07.144Z","dependency_job_id":null,"html_url":"https://github.com/thesephist/zerotocode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesephist%2Fzerotocode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesephist%2Fzerotocode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesephist%2Fzerotocode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesephist%2Fzerotocode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thesephist","download_url":"https://codeload.github.com/thesephist/zerotocode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243230101,"owners_count":20257644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codeframe","hugo-site","learn-to-code","website"],"created_at":"2024-11-18T04:46:59.695Z","updated_at":"2025-12-26T08:02:11.037Z","avatar_url":"https://github.com/thesephist.png","language":"HTML","funding_links":["https://www.paypal.me/thesephist"],"categories":[],"sub_categories":[],"readme":"# [ZeroToCode.org](https://zerotocode.org)\n\nZero To Code is **a free-forever online course about making stuff on the web**, using fundamental web technologies: HTML, CSS, and JavaScript. I want ZTC to be the best place on the web to learn to make stuff with code. Zero to Code uses [Codeframe](https://github.com/thesephist/codeframe) as its learning environment, for its shareability, fast feedback loop, and focus on the fundamentals.\n\nThis is the source repository that contains the [Hugo site](https://gohugo.io/) for Zero to Code, including all of the open curriculum. You can read more about the project itself on the website.\n\n## Contributing: beginners welcome! 👋\n\nZero to Code is a static site built with Hugo. Hugo is a static site generator, which takes Markdown documents and HTML/CSS/JS templates and generates a bundle of static HTML/CSS/JS files that forms a static site. You can learn more about how to use Hugo at [gohugo.io](https://gohugo.io/). This section of the README covers how to work with Hugo on ZTC's repository.\n\n### Generating the site\n\nYou can generate a new version of the static site from templates and Markdown pages once by running `hugo`.\n\n```sh\n$ hugo\n...\n[some info about the generated files]\n```\n\nIf you're writing and want to see the results as you're writing a page or modifying templates, you can run the development server with `hugo server -D`.\n\n```sh\n$ hugo server -D\n... serving development server at localhost:1313\n```\n\nWhen you start the server this way, you can go to `localhost:1313` on your browser to see a live-reloading version of the site as you edit.\n\n### ZTC's customizations\n\nZero To Code has a couple of customizations we use on top of Hugo's bare functionality to make tutorials more effective.\n\n#### Syntax-highlighted code blocks with \"Try this\" buttons.\n\nThe most important customization that ZTC has on top of Hugo is the way we build syntax-highlighted code blocks. Rather than use Markdown's triple-backtick syntax, we use Hugo's custom syntax to define a syntax highlighted code block, like this:\n\n```\n{{\u003chighlight html\u003e}}\n\u003ch1\u003ethis is a highlighted block\u003c/h1\u003e\n{{\u003c/highlight\u003e}}\n```\n\nYou can also define a `css` or `javascript` code block rather than `html`, and we can tell Hugo to highlight certain lines with the `\"hl_lines=N1 N2 N3-N5\"` syntax.\n\n```\n{{\u003chighlight javascript \"hl_lines=1\"\u003e}}\nconsole.log('hi');\n{{\u003c/highlight\u003e}}\n```\n\nWhen we define a highlighted code block in this way, on `single.html` pages (single tutorial pages), we also have a script that goes through alll `.highlight`ed code blocks on the page and adds a **Try this -\u003e** button at the top right of each code block, which opens Codeframe with the code sample specified.\n\n#### Embedded Codeframe editors\n\nSometimes we want to embed a live, interactive instance of a Codeframe editor on the page. Currently, the best way to do this is to create a `.fixed.button.liveEditorContainer` div which contains an `\u003ciframe\u003e` element pointing to a Codeframe editor URL, like this example from the overview lesson.\n\n```html\n\u003cdiv class=\"liveEditorContainer fixed button\"\u003e\n    \u003ciframe src=\"https://codeframe.co/new\" frameborder=\"0\" class=\"liveEditor\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nThis embeds the Codeframe editor specified by the URL onto the page, at the right size.\n\n#### The `button` class and boxes with shadows\n\nMost interactive elements and certain emphasized elements (like highlighted code blocks and images) are raised from the surface of the page with a shadow. The `.button` class, imported from Codeframe's stylesheet, is responsible for this apperance. When you want to make some element raised with a box shadow like Codeframe's buttons, use the `.button` class.\n\nIf you want the element not to be interactive, you can apply the `.fixed.button` classes to the element, which will disable hover and active animations on the button.\n\n## Support Zero to Code\n\nIf you like the Zero to Code project want to support what I make going forward, please consider making a donation to Zero to Code through [PayPal](https://www.paypal.me/thesephist) or [Venmo](https://venmo.com/thesephist) 🙏.\n\nAlternatively, please consider donating to some of the best nonprofit organizations doing great work in the CS education space, [KhanAcademy](https://www.khanacademy.org/donate), [Hack Club](https://hackclub.com/donate/), and [StuTech](https://grants.stutech.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesephist%2Fzerotocode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthesephist%2Fzerotocode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesephist%2Fzerotocode/lists"}