We're beauty hunters. We're perfectionists. We're passionate about making programs that don't just work, but inspire.
We believe in collaboration as a means to create things that would've been impossible to build otherwise.
We unite all kinds of languages and levels into a team capable of building anything we set our minds to.
Welcome to CodeX.
CodeX was founded with the idea of being a team of teams—a place where entire teams can unite to create the impossible.
But today, we accept both teams and individuals. Meaning whether you're a team leader trying to raise your team to whole new level of productive, or simply that lone coder looking for a few extra hands, you're in the right place.
We've got you covered. Use the boilerplate code below to create something awesome. Don't forget to give us credit. We've included it in the code.
<!--Built off of a CodeX template.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New CodeX Webpage</title>
<!--Google fonts and icons-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<!--Stylesheet for code highlighting-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/tokyo-night-dark.min.css" />
<!--CodeX theme stylesheet. CSS has been minified. Do not edit.-->
<style>
[type=checkbox]+span,[type=radio]+span,button,input,nav,nav>ul>li,textarea{box-shadow:0 0 0 1px var(--medium-contrast)}label,nav>ul{display:flex}.page,.pop-up{display:none}code,pre,table{overflow:hidden}:root{color-scheme:light dark;--main-background:light-dark(#fff, #000);--font-color:light-dark(#000, #fff);--bg-hover-color:light-dark(#000, #fff);--font-hover-color:light-dark(#fff, #000);--low-contrast:light-dark(#eee, #222);--medium-contrast:light-dark(#ddd, #444)}body{background-color:var(--main-background);color:var(--font-color);padding:50px;margin:0;transition:.3s ease-in-out}h1,h2,h3,h4,h5,h6{font-family:"DM Sans";font-weight:400;margin:0 0 1rem}a,blockquote,button,fieldset,figcaption,input,label,li,p,span,td,th{font-family:Inter;font-weight:300}h1{font-size:4rem}h2{font-size:3rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}blockquote{margin:1rem 0 1rem 2rem;border-width:6px;border-left-style:solid;border-image:linear-gradient(var(--low-contrast),var(--medium-contrast)) 1;border-image-outset:0 12px}a{color:#00f}.inactive-indicator,a:visited{color:red}ol>ol,ul>ol{list-style-type:upper-roman}button,input,nav>ul>li{background-color:var(--low-contrast);color:var(--font-color);padding:12px;border:none;border-radius:9999px;transition:.3s ease-in-out}fieldset,nav{margin:1rem 0;padding:0}figure,table{padding:none}fieldset,hr{border:none}button,nav>ul>li{cursor:pointer}input,select{outline:0;width:200px}.selected,[type=checkbox]:checked+span,[type=radio]:checked+span,button:hover,input:focus,nav>ul>li:hover,textarea:focus{background-color:var(--bg-hover-color);color:var(--font-hover-color)}button:active,nav,nav>ul>li:active{background-color:var(--low-contrast)}button:active,nav>ul>li:active{color:var(--font-color);transition:none}#color-scheme-btn,textarea{transition:.3s ease-in-out}label{margin:1rem 0;justify-content:space-between;align-items:center}label:has(textarea){display:block}fieldset>label{font-size:11px;margin-left:2rem}nav>ul,nav>ul>li{justify-content:space-between;margin:0}[type=checkbox],[type=radio]{opacity:0}[type=checkbox]+span,[type=radio]+span{width:11px;height:11px;cursor:pointer;background-color:var(--low-contrast);border:none;border-radius:9999px;transition:.3s ease-in-out}textarea{display:block;width:476px;padding:12px;margin:1rem 0;font-size:11px;resize:vertical;border-radius:25px;outline:0;border:none}[type=submit]{margin:1rem 0;width:100%}hr{height:6px;border-radius:9999px;background-image:linear-gradient(to left,var(--low-contrast),var(--medium-contrast));margin:1rem 0}.spacer{height:3rem}nav{width:500px;border:none;border-radius:9999px;position:sticky;top:0;left:50px;z-index:1}nav>ul{padding:3px}nav>ul>li{list-style-type:none;display:inline-flex;align-items:end;font-size:11px}nav>ul>li>.material-symbols-outlined{font-size:16px;margin-right:4px}.theme-header{width:500px;height:375px;margin:0 0 1rem;border-radius:25px;background-color:#eee;color:#000;background-image:radial-gradient(at 90% 90%,#89fa50 0,transparent 50%),radial-gradient(at 96% 96%,#71c5de 0,transparent 50%),radial-gradient(at 62% 25%,#fde17b 0,transparent 50%),radial-gradient(at 33% 25%,#3caefb 0,transparent 50%),radial-gradient(at 18% 12%,#3ff845 0,transparent 50%),radial-gradient(at 27% 62%,#81e892 0,transparent 50%),radial-gradient(at 63% 1%,#40d9fc 0,transparent 50%);position:relative}.blog-card,.member-card,.pop-up,.project-card,footer,table{background-color:var(--low-contrast);box-shadow:0 0 0 1px var(--medium-contrast)}.theme-header-centered{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.theme-header-default{margin:0;position:absolute;bottom:0;left:20px}code,pre,table{border-radius:25px;margin:1rem 0}.pop-up{width:400px;max-height:500px;overflow:scroll;position:fixed;top:50px;left:50%;transform:translateX(-50%);padding:12px;border-radius:25px;font-size:11px;z-index:9999;overflow-wrap:break-word}.hljs span{font-family:"Fira Code";font-size:11px}.blog-card,.member-card,.project-card{padding:12px;border-radius:25px;margin:1rem 0;display:flex;justify-content:space-between}.blog-card>figure,.member-card>figure,.project-card>figure{height:100px;width:100px;background-color:var(--medium-contrast);border-radius:25px;padding:12px;margin:0}.blog-card>img,.project-card>img{width:100px;height:100px;border-radius:25px}.member-card>figure>img{display:block;width:100%;height:100%;border-radius:inherit}.blog-data-cont,.member-data-cont,.project-data-cont{margin-left:12px;flex-grow:1;display:flex;justify-content:space-between}.blog-data-l-column,.blog-data-r-column,.member-data-l-column,.member-data-r-column,.project-data-l-column,.project-data-r-column{display:flex;flex-direction:column;justify-content:space-between;max-width:250px}.member-data-l-column>span,.member-data-r-column>span,td{font-size:11px}.blog-data-l-column>span,.blog-data-r-column>span,.project-data-l-column>span,.project-data-r-column>span{font-size:11px;opacity:.5}.blog-data-r-column>span,.member-data-r-column>span,.project-data-r-column>span{text-align:right}.blog-data-r-column>a,.member-data-r-column>a,.project-data-r-column>a{font-size:11px;text-wrap:nowrap}.member-skills>span{display:block;font-family:"Fira Code";font-size:11px;opacity:.5}.blog-post-author{display:block;margin-bottom:11px;font-style:italic}.active-indicator,.inactive-indicator{display:block;margin-left:auto;font-family:"Fira Code";font-size:11px}.active-indicator{color:light-dark(green,#7fff00)}.admin::after{color:red;content:"Admin";font-size:11px;vertical-align:text-top}.theme-sphere{width:200px;height:200px;background-color:#eee;border-radius:9999px}figure{max-width:200px;margin:0 0 12px}figure>img{max-width:200px;max-height:200px;margin-bottom:12px}figcaption{color:var(--font-color);font-size:11px;font-style:italic;text-align:center;opacity:.5}#color-scheme-btn{position:fixed;bottom:50px;right:50px;z-index:2;display:flex;justify-content:center;align-items:center;margin-left:auto}footer{border-radius:25px;padding:1rem;margin-top:100px}footer>p{opacity:.5;font-style:italic;font-size:11px}table{border-collapse:collapse}td,th{border:1px solid var(--medium-contrast);padding:12px}th{text-align:left}
</style>
</head>
<body>
<button id="color-scheme-btn">
<span class="material-symbols-outlined"> light_mode </span>
</button>
<div class="theme-header">
<h1 class="theme-header-default">Hero text.</h1>
</div>
<h1>Title here.</h1>
<footer>
<h6>CodeX, a team of teams.</h6>
<p>Designed and built by Nicolas, Admin at CodeX. Report any issues to a CodeX Admin.</p>
<p>Check out my <a href="https://nicolasgreenwood.github.io/poetry/" target="blank">website</a>!</p>
<p data-codex-destination-id="rules-regs-popup" style="text-decoration: underline; cursor: pointer;">CodeX Rules and Regulations</p>
<div class="pop-up" id="rules-regs-popup">
<ol>
<li>
<p>
<b>Equality:</b><br />
CodeX doesn't have any one leader or leaders. All members have an
equal say in decisions on all matters CodeX, and no member may force
any other member(s) to do anything against their wish.
</p>
</li>
<li>
<p>
<b>Structure:</b><br />
CodeX has only two levels: regular member and Admin. Regular members
and admins enjoy equal rights and authority in all matters, with the
exceptions of:
<ol type="I">
<li>Admins are granted edit access to the CodeX Admin account.</li>
<li>Admins are responsible for admitting new members.</li>
<li>Admins have the authority to expel members if required.</li>
<li>Admins have the authority to modify/update CodeX policy.</li>
</ol>
</p>
</li>
<li>
<p>
<b>Admission:</b><br />
New members may apply upon filling out the requested information in
the Join form. Applicants are not considered members until approved by
a CodeX Admin. If no response is given to an applicant one week after
appplication, the applicant is considered a member and possesses all
the rights as such.
</p>
<p>
CodeX Admins reserve the right to refuse membership, with or without
explanation.
</p>
</li>
<li>
<p>
<b>To become an Admin:</b><br>
To become a CodeX Admin, there are several requirements:
</p>
<ol type="I">
<li>Demonstrate more than very basic coding skill in at least one of the programming languages taught on Khan Academy.</li>
<li>Posess a usable Google account (for use with forms, spreadsheets and sensitive data sharing).</li>
<li>Be communicative and friendly.</li>
<li>Recieve approval from at least two existing CodeX admins. If only one CodeX admin is active, one approval will suffice.</li>
</ol>
<p>
If you're interested in becoming an Admin, let any existing Admin know, and they will guide you through the process.
</p>
</li>
<li>
<p>
<b>Projects:</b><br>
Any member may suggest and create projects in the name of CodeX, provided the project in full compliance with Khan Academy guidelines. Members may also group to work on projects without the full involvement of the team or permission from Admins. Admins retain the right to order project cancellation if deemed necessary.
</p>
</li>
<li>
<p>
<b>AI and Plagiarism:</b><br>
Use of AI in generating code, especially entire projects, is strictly forbidden, and violators may be expelled. Use of AI in research of programming concepts, basic debugging and occassional (very small) code snippets is not forbidden.
</p>
<p>Plagiarism of any kind without giving appropriate credit is also strictly forbidden, and violators may also face expulsion. Use the "Spin off" button whenever possible, and when not possible, provide credit in a visible place in the program.</p>
</li>
<li>
<p>
<b>Teams and Individuals:</b><br>
Both teams and individuals may apply for CodeX membership. Individuals may also apply in the name of their team.
</p>
</li>
<li>
<p>
<b>Members of Other Teams:</b><br>
While being a member of a team other than CodeX simultaneously is completely common and permitted, we encourage members to give careful consideration they are able to contribute to CodeX in a meaningful way before joining. Applicants are also able, and even encouraged, to invite their entire team to join CodeX if possible.
</p>
</li>
<li>
<p>
<b>Behavior:</b><br>
While CodeX does not censor socialization, members are required to be civil and respectful. Answering questions, being instructive and helpful and bearing the name of CodeX with pride and responsibility is our code. Being rude, offensive, provocative or intolerant is not permitted.
</p>
<p>
CodeX is a place to build and learn, and to have fun while we're at it. At the same time, we're not a social club. Do not join this team or create threads for the sole purpose of socialization.
</p>
</li>
<li>
<p>
<b>Activity Status:</b><br>
CodeX has long faced issues with member inactivity. As a member, you are not obligated to be active for certain periods of time. However, you should report your inactivity in advance, so we can stay informed as to who is available for work on projects. You may do so in the Activity Status Report thread in the Tips & Thanks of this homepage.
</p>
<p>
While we do value members keeping us informed of their activity status, we also understand it may not always be feasible to report absence. As such, CodeX Admins reserve the right to mark members as inactive/active at their own discretion.
</p>
</li>
</ol>
</div>
<p>© Nicolas Greenwood, 2025. All rights reserved.</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
<script type>
// WELCOME TO BASIC CODEX SCRIPTS. IF YOU'RE USING AS PART OF THE BOILERPLATE, BE AWARE THAT EDITING RISKS BREAKING FUNCTIONALITY OF YOUR WEBPAGE. DO NOT EDIT UNLESS YOU ARE PROFICIENT IN JAVASCRIPT.
//----------Highlight.js function to highlight all code snippets
hljs.highlightAll();
//----------Lenis smooth scroll config
// new Lenis instance
const lenis = new Lenis({
lerp: 0.05,
wheelMultiplier: 0.8,
duration: 1.5,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
//----------Color scheme button script
const colorSchemeBtn = document.getElementById("color-scheme-btn");
// set the default theme
document.documentElement.style.colorScheme = "dark";
colorSchemeBtn.addEventListener("click", () => {
// get current color scheme
const currentColorScheme = document.documentElement.style.colorScheme;
// if the color scheme is dark, change the color scheme to light, otherwise change it to dark
if (currentColorScheme === "dark") {
document.documentElement.style.colorScheme = "light";
colorSchemeBtn.innerHTML = `<span class="material-symbols-outlined"> dark_mode </span>`;
} else {
document.documentElement.style.colorScheme = "dark";
colorSchemeBtn.innerHTML = `<span class="material-symbols-outlined"> light_mode </span>`;
}
});
// upon landing, after 3 seconds, hide the color scheme button
window.setTimeout(() => {
colorSchemeBtn.style.opacity = 0;
colorSchemeBtn.style.pointerEvents = "none"; // disable any invisible click behavior
}, 3000);
// if the user's mouse moves and is in the lower right quarter of the viewport, show the color scheme button
window.addEventListener("mousemove", (e) => {
if (e.clientX > window.innerWidth / 2 && e.clientY > window.innerHeight / 2) {
colorSchemeBtn.style.opacity = 1;
colorSchemeBtn.style.pointerEvents = "auto";
} else {
colorSchemeBtn.style.opacity = 0;
colorSchemeBtn.style.pointerEvents = "none";
}
});
//----------Theme gradient headers script
const themeHeaders = document.querySelectorAll(".theme-header");
// for each theme header, randoamly generate a massive CSS mesh gradient
themeHeaders.forEach((header) => {
header.style.backgroundImage = `
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%)`;
});
//----------Theme gradient spheres script
const themeSpheres = document.querySelectorAll(".theme-sphere");
// same logic as theme header, only smaller gradient
themeSpheres.forEach((sphere) => {
sphere.style.backgroundImage = `
radial-gradient(circle at 30% 30%, transparent, light-dark(#eee, black) 80%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%),
radial-gradient(at ${Math.round(Math.random() * 100)}% ${Math.round(
Math.random() * 100
)}%, hsla(${Math.round(Math.random() * 360)}, ${Math.round(
Math.random() * 50 + 50
)}%, ${Math.round(Math.random() * 50 + 50)}%, 1) 0px, transparent 50%)`;
});
//----------Nav item highlighting
const navItems = document.querySelectorAll(".nav-item");
navItems.forEach((item) => {
item.addEventListener("click", () => {
// clear all previously highlighted nav items
navItems.forEach((item) => {
item.classList.remove("selected");
});
// highlight the one being clicked
item.classList.add("selected");
});
});
//----------Pop-up script
const allPopUps = document.querySelectorAll(".pop-up");
allPopUps.forEach((popUp) => {
// disable Lenis to allow for nested scrolling
popUp.setAttribute("data-lenis-prevent", "");
// create a close button and add it to each popup
const closeBtn = document.createElement("button");
closeBtn.textContent = "Close";
closeBtn.style.display = "block";
closeBtn.style.marginLeft = "auto";
// close button functionality
closeBtn.addEventListener("click", () => {
popUp.style.display = "none";
});
popUp.appendChild(closeBtn);
});
//----------Link functionality
const codexOrigins = document.querySelectorAll("[data-codex-destination-id]"); // all elements with the attribute of "data-codex-destination-id"
// all main pages of the document
const allPages = document.querySelectorAll(".page");
codexOrigins.forEach((origin) => {
// find the destination
const destinationElementId = origin.dataset.codexDestinationId; // value of the attribute
const destinationElement = document.getElementById(destinationElementId);
// listen for origin click event
origin.addEventListener("click", () => {
// if a page is being requested, hide all other pages
if (destinationElement.classList.contains("page")) {
allPages.forEach((page) => {
page.style.display = "none";
});
// then show destination element
destinationElement.style.display = "block";
} else {
// otherwise just show the destination element
destinationElement.style.display = "block";
}
});
});
</script>
</body>
</html>
We think they're gorgeous too. Thanks to this handy tool, you can generate new ones until you find one that just hits the spot. Just copy the code below and paste into the body of an HTML document to see the magic.
<!--Gradient built using CodeX-->
At the heart of every new program we set out to build is a desire to create something genuinely inspiring and original.
"The beauty of CodeX is that, you don't have to be an expert to participate in building something awesome. All levels and languages taught here on Khan Academy are accepted. You can learn from experienced fellow members on the job, making learning to code not only productive, but fun."
- Nicolas, Admin at CodeX
At CodeX, we don't believe there's an impossible project. It's just a matter of time, effort and discovering new solutions to problems never tackled before.
The idea of CodeX was born when LJ and CodeNinja, present-day admins at CodeX, discussed the future of larger scale collaboration on Khan Academy. The decision was to make a entire team dedicated to collaboration—a team of teams.
Today, CodeX is growing into something bigger. While the original idea of CodeX being comprised solely of other teams persisted until recently, our team has outgrown this structure, and today anyone, team or individual, can apply for membership.
With this new structure, we hope to further connect and reinforce existing networks of collaboration between Khan Academy's most creative minds.
Sound like something you could be a part of? Join today.
To put it simply, we build programs in all languages taught on Khan Academy. Our multidisciplinary membership allows us to tackle not only projects in any programming language available on Khan, but even integrate multiple languages into a single project.
And our work extends off of Khan Academy as well. We use GitHub and Google Forms/Sheets for Admin-related tasks.
This webpage was constructed using HTML, CSS and JavaScript, the three main languages browsers use to render websites. HTML is the content. Pure information, like text, paragraphs, navigation bars, images—that's all HTML. If a website was a human body, HTML would be the skeleton.
CSS is what gives webpages flair. It's what allows us to change the color of our text, shape buttons, adjust text size, add fonts, and structure layout. It's what powers all those gorgeous gradients on our site too.
If a website was a human body, CSS would be your clothes, hairstyle and, if you want, makeup.
JavaScript is what gives webpages more advanced functionality. If you want to open pop-ups with a click of a button, or show elements conditionally, you'll have to use JavaScript. Of the three, it's the only programmatic language. HTML and CSS can't do loops, or math, or conditional logic. JavaScript is a real high-level programming language, and it's applications go a lot farther than toggling light/dark mode.
If a website was a human body, JavaScript would be your organs, like your brain, heart and so on.
Yep, it is. But it's not the plain old JS we use in making webpages like this. That's what we call vanilla JS. Processing.js is a Javascript library, meaning it's built on top of vanilla JS.
What does that mean? Well, the good news is that, if you're comfortable in ProcessingJS, you'll find vanilla JS easy, as the syntax is pretty much the same. The bad news? There's some new stuff you'll have to learn, like arrow functions and how to manipulate HTML elements with JS. But that's easy. Really, sinfully easy.
And we build in Processing.js at CodeX too. From games to graphics, Processing.js is one of our most powerful tools in creating...creating cool stuff.
We get it, Python is becoming increasingly popular here on Khan Academy, and we welcome it. Python rules when it comes to AI, scientific computing and robotics, and it's simple, minimalist syntax makes it beautiful to write and read. But it leaves it's aesthetic side in the code editor. Browsers don't read Python, and you can't build sites or style anything seriously with it.
Web dev (HTML, CSS and JS) is your art class, while Python is that math class notebook that might have answers to what's beyond the singularity of a black hole, even though it's as ugly as a cockroach in a library.
Yep, that's right. If you're an web dev enthusiast, rejoice, for thou hast found thy kindred. Slither on your belly and lick dust? We've got just as many Python-eers. And if you're one of those anime artists whose Processing.js graphics make all of our jaws drop and stay stuck on the hotlist for weeks at a time, we need you, because at CodeX, we don't just believe in programming: we believe in the art of programming.
Yeah, we'll admit it, AI did generate our name. But you've gotta admit, it is a good name. And once we saw it, the temptation was too hard to resist.
Actually, CodeX's original name was Coding Collaborators. Obviously, such a long-winded name didn't last long, and one of our Admins, CodeNinja, used AI to generate some ideas. Tech Hub and CodeX came up, and I'm pretty sure you can piece together from there how CodeX became CodeX.
On a side note, we do not practice or endorse the use of AI in programming, and do not use AI-generated code in our projects.
We promise, there isn't anything legal-sounding or scary in here. And if you break one of them, you won't go to jail. Just don't do it again.
Equality:
CodeX doesn't have any one leader or leaders. All members have an
equal say in decisions on all matters CodeX, and no member may force
any other member(s) to do anything against their wish.
Structure:
CodeX has only two levels: regular member and Admin. Regular members
and admins enjoy equal rights and authority in all matters, with the
exceptions of:
Admission:
New members may apply upon filling out the requested information in
the Join form. Applicants are not considered members until approved
by a CodeX Admin. If no response is given to an applicant one week
after appplication, the applicant is considered a member and
possesses all the rights as such.
CodeX Admins reserve the right to refuse membership, with or without explanation.
To become an Admin:
To become a CodeX Admin, there are several requirements:
If you're interested in becoming an Admin, let any existing Admin know, and they will guide you through the process.
Projects:
Any member may suggest and create projects in the name of CodeX,
provided the project in full compliance with Khan Academy
guidelines. Members may also group to work on projects without the
full involvement of the team or permission from Admins. Admins
retain the right to order project cancellation if deemed necessary.
AI and Plagiarism:
Use of AI in generating code, especially entire projects, is
strictly forbidden, and violators may be expelled. Use of AI in
research of programming concepts, basic debugging and occassional
(very small) code snippets is not forbidden.
Plagiarism of any kind without giving appropriate credit is also strictly forbidden, and violators may also face expulsion. Use the "Spin off" button whenever possible, and when not possible, provide credit in a visible place in the program.
Teams and Individuals:
Both teams and individuals may apply for CodeX membership.
Individuals may also apply in the name of their team.
Members of Other Teams:
While being a member of a team other than CodeX simultaneously is
completely common and permitted, we encourage members to give
careful consideration they are able to contribute to CodeX in a
meaningful way before joining. Applicants are also able, and even
encouraged, to invite their entire team to join CodeX if possible.
Behavior:
While CodeX does not censor socialization, members are required to
be civil and respectful. Answering questions, being instructive and
helpful and bearing the name of CodeX with pride and responsibility
is our code. Being rude, offensive, provocative or intolerant is not
permitted.
CodeX is a place to build and learn, and to have fun while we're at it. At the same time, we're not a social club. Do not join this team or create threads for the sole purpose of socialization.
Activity Status:
CodeX has long faced issues with member inactivity. As a member, you
are not obligated to be active for certain periods of time. However,
you should report your inactivity in advance, so we can stay
informed as to who is available for work on projects. You may do so
in the Activity Status Report thread in the Tips & Thanks of this
homepage.
While we do value members keeping us informed of their activity status, we also understand it may not always be feasible to report absence. As such, CodeX Admins reserve the right to mark members as inactive/active at their own discretion.
Have any questions about our policy? Feel free to ask in the Tips & Thanks below.
This homepage was designed and all text authored by me, Nicolas, a CodeX admin. I hope you find it as inspiring and enjoyable as I did making it.
The goal of this design was to emphasize the diversity that is CodeX. This design doesn't have a fixed palette. Those gradients can be any color. Our palette is the entire spectrum of visible light, just as our portfolio of languages is the entire library of languages taught on Khan Academy.
This design was partly inspired by Google's wonderful Material Design as well as OpenAI's excellently designed website. I used Google fonts DM Sans for headers, Inter for body text and Fira Code for code snippets and data. I used Google Icons for all icons on the site.
Our signature gradients are entirely CSS, and randomly generated with each page load via JavaScript. If you would like to build a project of your own with this design, please visit the homepage, where we provide boilerplate code and a gradient generator for that very purpose. Just be sure to give credit to avoid plagiarism.
Thank you for reading. Now go write some poetry in code.
Wanna see your name on this list? Head over to our join page.
You know that one impossible thing in life you know you'll never do but can't stop dreaming of it nonetheless? For me, it's going to space.
For now, I content myself with building programs centered around my interests: space and poetry.
I'm 18, and I live in Serbia. Not Siberia. Not Syria. Serbia. In the Balkans. The country Nikola Tesla is from. Totally not the country that Gavrilo Princip is from.
I learned how to program mostly through another platform called freeCodeCamp, where I completed their HTML/CSS course. As for JavaScript, I kinda pieced it together on my own. Come to think of it, I still use JavaScript on a cave man level. Should level up on that.
I've met some incredible people here on Khan Academy, and they're the ones that inspire me to work on a team and build what I build.
I love to read and write.
I write haiku.
I like art, anime, and coding.
Notice something's off? Have you changed your avatar or nickname? Simply want to update your bio? You've come to the right place. Click here to submit an edit request. Be sure to give a good desciption of what you need to change.
Thank you for being an active member.
Here's some of the stuff we've been working on lately.
If you think you've built something for CodeX and can't find it here, let an admin now in the T&T below with a link to the project and we'll be happy to add it for you.
Actually, we write all sorts of stuff, from full-blown tutorials to coding tips and tricks. If you're stumped on a project or simply can't figure out how to do something, chances are, you'll find answers here.
Be one. If you're a CodeX member, write something today. Your contribution could detangle the brain cells of countless learners.
First off, we thank you. It takes special time and effort to teach programming, and it's members like you that make CodeX awesome.
Now let's get to business.
Choose a topic.
It should be clear and general. Instead of "How to draw Son Goku", consider something like "Tips on drawing anime characters in Processing.js".
Structure the tutorial.
Be sure to define clear steps, use correct, descriptive language free of spelling errors and provide code snippets whenever possible. Feel free to use code highlighting tools like Highlight.js, or just build off of a CodeX boilerplate webpage for built-in highlighting. If this sounds unfamiliar to you, talk to a CodeX admin.
Style it.
If you're not using a CodeX boilerplate, then be sure to style your page to make it attractive and readable. Use semantic text elements like h1, p and so on for visual hierarchy.
Publish it.
Yay! You did it! Now it's time to tell the world about it. Let a CodeX admin know about your blog post so we can add it to our homepage, and give them a link to the tutorial. Follow any instructions if a CodeX admin tells you to make any modifications.
We'll advertise your program on our subscription feed too.
Make sure readers know about CodeX.
After all, you contributed to the CodeX blog, and others should know about that. State your ties to CodeX in a conspicuous spot in your tutorial.
Note: only existing CodeX members can apply for an Admin role. While not mandatory, CodeX adminship is usually granted upon invitation.
To be a CodeX admin, you'll need a Google account, show exceptional technical and social skills and not plan on being inactive in the near future.
So before you apply, think about it. Make sure you can contribute in a meaningful way to CodeX.
And if you think you can, we're happy to have you.
Click here to fill out an adminship request. A CodeX admin will get back to you as soon as possible.