Syntax Teacher

When learning programming languages, one major roadblock is the fact that the syntax for each language is different. Syntax Teacher aims to solve that problem!

Comment

Inspiration

Coming from a background with little to no front-end development experience, our team decided to approach this semester's Hackathon by challenging ourselves to a project that places our adaptability and self-learning abilities to the test. In addition to learning something new, we also wanted to create something beneficial yet relatable, which led us to our current idea: a syntax teaching minigame. Coding syntax has always been a tedious aspect of programming that is especially daunting to learn for beginners, and it is with this program that we hope to make learning new syntax a more enjoyable process.

What it does

Our program tackles syntax-learning by simplifying it into five different levels of depth. Through increasingly difficult levels, players are challenged with copying down preset lines of code in a speedy but accurate manner. After finishing a level, the user gets to see the amount of time they took, and their general skill range summed up by grade levels ranging from A+ to C. Our program also offers users the option to change coding languages to help learn the syntax they need.

How we built it

Our program uses HTML for structure, CSS for style, and JavaScript for logic execution. This project was built through the help of numerous YouTube tutorials, documentation searches, and AI agents such as ChatGPT, Claude, and Google Gemini. We started our project researching and learning the various coding languages we'd need, and by the end, we had managed to grasp a much stronger understanding of how front-end development works. Finally, through the use of Git and Github, we were able to successfully create a team-based project for the first time.

Challenges we ran into

Learning new coding languages proved to be quite the task, especially since we were learning so many under so little time. Coding syntax for HTML was quite different than what we were used to, and methods specific to JS and CSS took some time to wrap our heads around. We also faced numerous situations where we would be stuck on making pushing, pulling, or commit requests with Git, but we were able to exchange and edit the code together eventually.

Accomplishments that we're proud of

Whether it was about learning new languages, using Git, or understanding how web-based applications work, this project was one big accomplishment that we're all proud of. Although our project is small in scale and relatively simpler than the other high-tech projects out there, it still serves as proof to our abilities as learners, programmers, and thinkers. As first-time hackers, we hoped to create something simpler that would not only demonstrate our skills but also allow us to experience a Hackathon to the fullest.

What we learned

  • HTML, CSS, JS
  • Git and Github
  • Frontend and backend development
  • UI/UX design
  • Team-based development

What's next for Syntax Teacher

For our project's next steps, the most important part would be to expand upon the number of coding languages the webapp can provide. Other than that, we have considered adding more features that could assist with learning syntax, such as audio guidance for the visually impaired or autofill functionalities found in IDEs.

Share this project:

Updates