Cratecode

Learn to code in the 21st centuryBusywork and memorization isn't learning. Cratecode empowers you to learn (and enjoy!) programming by building meaningful projects that you want to build. Sign up and start your journey today!Get StartedPhilosophyHere at Cratecode, we believe that people learn best when they have a reason to learn. In other words, if you aren't enjoying what you're learning, you aren't using your full potential. Period.In order to give you the best learning experience, our courses:Contain engaging projects with a genuine use-case.Are designed to be non-linear so you can forge your own path, while keeping all of the structure you need to succeed.Measure your growth and how far you've come, not how much you have left to go.Powered By AICratecode uses next-gen AI to supplement your learning experience. Learning online is tough, so our AI Assistant can help you out by looking through your code and guiding you through problems, just like how a teacher would.The AI Assistant can:Answer programming-related questions.Look through your code and find any mistakes (or things which could be done better), then give you everything you need to improve, including a detailed explanation and code examples.Guide you through solving tough problems with step-by-step examples.Try It Out!FeedbackMessage💬🤔💡🐛CancelSend --- Cratecode uses cookies to ensure you get the best experience on our website. Learn moreOpt-out of non-essential cookiesAllow cookiesLogin to Your AccountEmailPasswordForgot password?LoginDon't have an account? Click here to sign up.OR CONTINUE WITH --- Cratecode uses cookies to ensure you get the best experience on our website. Learn moreOpt-out of non-essential cookiesAllow cookiesPreview Mode: Your progress will not be saved, and certain functions are unavailable. ​Click here to sign up​ and access the full features of Cratecode.InfoIndexFoldersControls Welcome to Cratecode! Before you can learn to code, we'll need to get you introduced to how Cratecode works, and most importantly, how you'll learn with it. To preface, I'd like to explain how to effectively learn with Cratecode. Of course, you should fully read and complete every lesson for what you're learning, but you should also take a look at the code examples stored in each of these lessons. You'll find a file called index.js in the file explorer, and a run button to run it. You'll notice that it prints some text into the console below. After you've gone through this document, I highly encourage you to try running the code, and mess around with it a bit. See if you can make it do something different. First, take a look around. Right now, you're in the editor (a place where you'll probably spend most of your time). The editor provides everything you'll need to write programs. In the top-right, you'll see the text editor, and below it, the terminal (also called console). Try playing around with it. If you don't get it, or haven't seen a terminal before, not to worry — we'll cover everything you'll need to know in the next few sections. Finally, the window you're reading in right now is called the Toolbox. It has quite a few helpful features, but the two we'll focus on right now are the info panel and file manager. The info panel is what you're in right now, and to access the file manager, click on the folder icon. Inside you'll see a tree-map showing all the files that exist, along with options to create, delete, rename, and move them. Try messing around with it and come back when you're done. Come back here Now that you've seen the basics of Cratecode's editor, let's try editing something. Inside the file manager, you'll notice a README.md file, which is actually what you're reading now. The .md means that it's a Markdown file, which, put simply, is a text file document that looks good when reading it in a text editor, in addition to a rendered version (like the one you're reading right now). Try opening it and messing around, you can even change what's displayed here! Now, you should be familiar with how to navigate Cratecode, open/create files, and possibly use the terminal. Now that we have the tools to do so, let's learn to code!Hey there! Enjoyed the lesson? Consider sharing it with others - it's a huge help and lets us keep making them!Edit this lessonCommentsYou need an account to leave comments. Click here to sign up.FilesREADME.mdindex.jsLesson OptionsReplay VideoReset LessonIndexRun91›Please select a file... Webview is unavailable in preview mode.AI AssistantInstructionsYou can the AI assistant to help you if you get stuck while going through a lesson. It will help you find errors in your code and guide you on what to do next.To get started, click the "Look at my Code" button below. If we can't figure it out for you, you may also have to describe what you're doing. You can also enter an optional question if you want to, and if you don't enter one, the assistant will just look over your code and give you tips on how to improve it.Look at my CodeWelcome to Cratecode!Why Program?Your First ProgramBasic ConceptsWhat Programming Meansconsole.logBuilding a Basic CalculatorData TypesGetting ComplexGetting Things MovingMaking Art with CodeUsing ConstantsDrawing Basic ShapesPutting It All TogetherMaking Things StopTaking User InputSupporting All OperationsReverse Word SplitterFile I/O (Reading)PalindromesUpgrading our CalculatorReading Data FilesWord SplitterUsing JavaScriptStory BuilderMaking WebsitesMultiple PagesBasic HTMLWhat is Backend?Advanced Data TypesWeb Frameworks (React)Full-stack Web Frameworks (Next.js)Recursion IntroReact FlowPress enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.BackWelcome to Cratecode!NextWhy Program?FeedbackMessageShare with the person who created this lesson?💬🤔💡🐛CancelSend Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key --- Cratecode uses cookies to ensure you get the best experience on our website. Learn moreOpt-out of non-essential cookiesAllow cookiesPreview Mode: Your progress will not be saved, and certain functions are unavailable. ​Click here to sign up​ and access the full features of Cratecode.InfoIndexFoldersControls Hello! This is a small playground for testing out Cratecode's AI features (well, you can test anything out here, but these instructions are specifically for AI). Before going further, please keep two things in mind: You must be signed up to access the AI. If you aren't already, there should be a link above to get you started.AI isn't free. Well, it is for you, but that money comes from somewhere. It's for that reason that I ask that your interactions with the AI give it complicated, meaningful problems. That isn't a requirement, of course, but doing so gives us good data that can be used to help improve it. Now, let's take a look at how this works. First, I want to give you a brief introduction to how the layout of this site works. First off, the window that you're reading this in is called the Toolbox. To your left are buttons that control which Toolbox item you're looking at. The most important ones are the Info/README item (that's this one!), and the file explorer item. If you head into the file explorer, you can double click files to open them up in the editor. Then, you can edit them, hit the Run button, and see the results in the console. You can also type directly in the console, if you want. Finally, there's the AI assistant window. If you're on a computer, it's a hidden panel to the far right. On mobile, it's a little robot button. There are instructions in this window, but you basically just need to tell it what you're trying to do (e.g. A NodeJS program that reads a data file and prints each word on a separate line), and give it an optional question. If you don't give it a question, it'll look over your code and give you hints towards completing the program. That's all. Have fun!CommentsYou need an account to leave comments. Click here to sign up.FilesREADME.mdindex.jsLesson OptionsReplay VideoReset LessonIndexRun91›Please select a file... Webview is unavailable in preview mode.AI AssistantInstructionsYou can the AI assistant to help you if you get stuck while going through a lesson. It will help you find errors in your code and guide you on what to do next.To get started, click the "Look at my Code" button below. If we can't figure it out for you, you may also have to describe what you're doing. You can also enter an optional question if you want to, and if you don't enter one, the assistant will just look over your code and give you tips on how to improve it.Look at my CodeAI Test PlaygroundReact FlowPress enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.FeedbackMessageShare with the person who created this lesson?💬🤔💡🐛CancelSend Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key