Edu Hackathon

Learn, Write Code, Execute

Comment

Inspiration

Our inspiration for this project came to from a desire to make learn web development more easy, intractive and engaging, for beginner as well as when a programmer in job box shadow little tricky to generate exactly as we want so we can visualize here with multiple tools we can create multiple tools like this like position visualiztion, shape generator. As well as when i programm something in college i face issue that if i want to run same on college PC, I have to rewrite but here in live editor we can save code (in future update after login user) and user can execute or continue code in college, it's realtime and easy.

What it does

Our Project, offer multiple tools design to make web development learn easy. It includes:

  1. HTML, CSS and JS realtime code editor: user can write html, css and js code in single page and get realtime output

  2. Box Shadow Generator: Using this tool user create and preview box shadow and get CSS Code.

  3. Text Formatting Gerenrator: Using this tool user can customize text style like color, alignment,... and get CSS Code.

How we built it

We are using: Laravel Framework and bootstrap 4, CodeMirror for editor.

Challenges we ran into

During the development, we faced several challenges, such as integrate the code editor and ensuring real time output, making responsive interface.

Accomplishments that we're proud of

We are proud of creating an educational platform that provides an interactive and easy platform for learn web development. It includes

  1. Userfriendly Responsive Platform
  2. Implementing real time output for all tools and code editor
  3. Creating multiple tools for learn and execute code

What we learned

We gained insights into troubleshooting and proble-solving in a development environment. and make responsive platform.

What's next for Edu Hackathon

Our Vision for this project:

  1. Create more tools
  2. Enhance Code Editor Feature
  3. Create Forms so student and dev can communicate and help each other.
  4. Making this project accessible to a wider audience.
Share this project:

Updates