Learn to Code

Tips from a Teenage Hackathon Attendee

Hi! My name is Valerie, and I’m a high school student who’s attended (and won) quite a few hackathons. I’m here to give you some tips on how to run your own hackathon! I’ve also included a section on virtual hackathons towards the end of this post, given that they are especially relevant today.

Photo from the YouTube + Vidcode Hackathon

Photo from the YouTube + Vidcode Hackathon

What is a hackathon?

A hackathon is an event where attendees form teams to create coding projects within a given time period (typically 24 hours). Afterwards, teams have the option to submit and pitch their project (via platforms such as Devpost) to a panel of judges for a chance to win a neat prize! Most hackathons have an overall winner and different category winners (e.g. best beginner hack, best web development, best mobile app, etc), so there are lots of opportunities for people to win prizes. 

What gets made at a hackathon?

The sky's the limit. I’ve seen a large variety of projects made at the hackathons that I have been to. Teams can choose to create websites, apps, or games - I have even seen teams bring their own hardware to incorporate virtual reality (VR) into their projects! Typically, the different prize categories help teams decide what types of projects they want to work on. 

Hackathon Essentials

Interested in running a hackathon but don’t know where to start? There are four important categories to focus on: People, Space, Technology, and Activities

People

You can’t run a hackathon if you don’t have people at the event! From my experience, it is crucial to have participants, student staff, and judge/speakers at every student hackathon. 

  • Participants: Anyone who has been to a hackathon will say you don’t need to know how to code to attend a hackathon. This is 100% true! In fact, most hackathons will hold workshops to teach basic coding to beginners (anything from website development to mobile games). These workshops are often taught by student staff members or guest speakers. However, a simple introductory workshop can be taught by platforms such as Vidcode - no coding expert needed!

  • Student Staff: Recruiting a group of students to be a part of the staff is crucial to running a hackathon. Student Staff members are a helpful way to spread the word about your hackathon to their friends and classmates. In addition, during the hackathon, they are more approachable to students who need help with their projects than adult supervisors. You can probably find students who are willing to participate from coding/computer science clubs at your local high school or college.

  • Judges/Speakers: Judges and guest speakers are equally important as having participants at your hackathon. Finding these people is all about reaching out and contacting individuals who may be willing to volunteer. Reach out to anyone you may know in the tech industry: teachers, developers, software engineers etc. Most hackathons have sponsors who send representatives to judge and speak at workshops. 

Space

Make sure your venue has a hacking space (school gym/cafeteria) and a hangout/planning space (empty classrooms). Minimize distractions, and make sure attendees have space to spread out and write notes - portable whiteboards are great for this.

Technology

Without technology can there be a hackathon? Make sure to have good Wi-Fi, Audio/Visual Equipment, and some hardware

  • Wi-Fi: Wi-Fi is crucial! Without a good connection, most participants will not be able to work on their projects. In addition, the last thing the participants want is to lose connection in the middle of their pitch to the judges.

  • Audio/Visual Equipment: Audio/Visual Equipment is helpful when you are trying to communicate important information to the entire staff and participants. Most hackathons use presentations during their opening and closing ceremonies.

  • Hardware: Hardware is also important. However, it is not necessary. You do not need to provide a computer for every participant, they will bring their own device. However, larger hackathons provide hardware such as VR equipment and microphones for participants to use in their projects. 

Activities

Hackathons are not just about the competition. There are non-coding activities/competitions and workshops

  • Non-Coding Activities/Competitions: Kids need a brain break! Coding for 24 hours is tough! Set up fun non-coding games and competitions like Capture the Flag, Cup Stacking, Chess, or Jeopardy.  

  • Workshops: Workshops are as important as the competition itself! Some people attend hackathons just to learn something at the workshops. As I mentioned before, these workshops can be taught by student staff or guest speakers, and they can range from beginner to advanced levels. 

Photo from the YouTube + Vidcode Hackathon

Photo from the YouTube + Vidcode Hackathon

Some Additional Tips

Here are some other tips for hosting your own hackathon:

  • Outlets! Outlets! Outlets! Make sure you have plenty of outlets for your attendees. All of them will have to charge their devices at some point. 

  • Make sure you have a detailed schedule planned out. People need to know how much time they have until projects are due. They also want to know when certain activities and workshops will start. 

  • Get as many sponsors as you can. Most hackathons are free to attend thanks to the sponsors who pay for the meals and snacks at the events. They are also a great way to bring in judges and guest speakers. 

  • Prizes are the best incentive. Although prizes are not necessary, they are the best incentive for people to participate. 

Photo from the YouTube + Vidcode Hackathon

Photo from the YouTube + Vidcode Hackathon

Virtual Hackathons

Especially with COVID-19, virtual hackathons have become more popular. Virtual hackathons are very similar to regular hackathons. The competitions and workshops are still there, the only difference is that there isn’t a physical venue for the event. In some ways, virtual hackathons may be easier to host. Participants code at home and submit their projects by a certain deadline. There are workshops held via livestream or Zoom, and there are staff members available virtually through platforms like Discord or Slack. In fact, hosting a virtual hackathon makes it easier to reach out to a wider range of people in different regions of the country or world!

Well, what are you waiting for? You better get hacking!

Accessibility in Computer Science Education

Adding to the easy-to-use interface, users need only drag and drop their ideas and concepts into the video editor to see their creativity and newly-learned tech skills in action.  Aside from making once-painstakingly difficult concepts simple to understand for a younger demographic, Vidcode’s abilities are further demonstrated by its usage in a special needs educational base.  


“We had tried to offer coding to our students in a few different ways in the past,” said Cristina Ulerio, Program Manager for Tech Kids Unlimited, “but this was the very first time that we used a coding program that also integrated video and was very visual – which is an excellent element for special needs education.  That truly made Vidcode stand out.”

Tech Kids Unlimited is a not-for-profit technology-based educational organization for children ages 7 to 19 with special needs.  Within that spectrum, children with Autism and other interrelated learning and emotional disabilities are given creative outlets for learning new technologies and communication tools.   


“Our students are very visual learners, so while we have taught regular coding in the past, we found that it can be difficult for them,” Ulerio continued.  “It’s like learning a new language.  So, the visual aspect of Vidcode intrigued us immediately.  Also, the idea that it integrated video editing, along with coding, was a major plus.  It was truly unique and helped our students learn both of those skills simultaneously.  The students loved it, especially the fact that they were able to use their own photos and videos as part of Vidcode’s customization in the creative process.  It was a perfect fit.”  

 

Teaching Students to Code at the 92Y

Starting in the summer of 2015 and continuing through 2016-17, New York’s 92nd Street Y teamed with Vidcode to introduce the educational tool to local children with a passion for technology as part of their workshop program.  While aimed at younger students, many adult teachers were quickly grateful for the fun lessons that they, too, are able to take part in.

photo 3.JPG

“Personally, I am always looking for ways to use technology creatively,” said Kelly Saxton, an educator who oversaw the Vidcode classes.  “Any time you give students a voice, or an opportunity for self-expression, the learning outcome is incredible.  If, for example, you enable a student to learn through creating something from their own mind, they will retain that information easier and stronger.  It immediately becomes more real, eliminating the drudgery and replacing it with creativity – and I love that.  With Vidcode, that esthetic was at work, and I think that the kids gravitated towards learning [the coding programs] because of it.”

   
The Vidcode summer intensive workshop launched less one year after Vidcode became available.  Educators associated with the camp were immediately drawn to the app’s functions and quickly joined forces to meet their own initiatives: teaching Javascript, “the "language of the web," through creative video projects.  Located on Lexington Avenue in the heart of New York City, the week-long intensive was comprised of five core lessons – and was successful enough that the organizers again teamed with Vidcode the following year.

“The 92Y already offered other creative programs, such as comic art and sculpture,” Saxton continued.  “But Vidcode offered something unlike we had ever had before. I had been teaching digital media for some time and was excited to try their ‘pre-existing framework,’” which you could then turn into anything you’d like, for myself. The students immediately loved the Vidcode modules which showed how animation works, and proved to be an amazing introduction for the kids to learn code.”

Vidcode’s learning curve is primarily based on teaching Javascript in a fun, game-like way.  The app’s state-of-the-art interface teaches the Javascript coding language through lessons built around creative art projects.  Once viewed as a sophisticated and difficult tech language to comprehend, Javascript is instantly demystified by Vidcode’s unique program initiatives – creating video filters, JavaScript libraries, and HTML5 to control how each user’s video will look.  

By playfully creating music videos, short animation clips, and movie special effects, kids and adults alike instantly pick up the skills needed to learn sophisticated coding practices. All of the young students who participated in the workshops stated that their favorite elements of Vidcode’s the user-friendly modules included movie-making, stop-motion animation, and the opportunity to instantly view their final projects in the app’s interface.  

photo 4.JPG


Thanks to the program, all of the students walked away from the experience, eager to learn more advanced techniques in coding and application creation.  


“The kids were able to understand pretty sophisticated concepts immediately,” Saxton added.  “Normally, it would take a little while for anyone to learn the syntax and more-advanced technology of coding and animation, but with Vidcode, they were hands-on and able to create things within in minutes.  I thought that it could even be an amazing learning tool for adults, as well.”


As an education tool, the young students – all of whom were novices in the world of coding and digital creation – quickly learned such necessities as variables, arrays, and various application functions, while retaining the advanced information due to Vidcode’s almost video-game like appeal.  

Make a Pokemon Augmented Reality Game

The Pokemon Augmented Reality Game Builder is live! Anyone can create a game and watch their friends and family try to beat the high score. Even if you've never built a game before, the tutorial will walk you through it step by step.

 
 

Once you're done, share your project and visit the Gallery to get inspired by the games other creators have built! 

Project Tutorial: Galentine's Day Video

It's February, and you know what that means: Galentine's Day is coming up! As Leslie Knope describes it February 13th, or Galentine's Day, is when "my lady friends and I leave our husbands and boyfriends at home, and just come and kick it, breakfast-style. Ladies celebrating ladies."

I used Vidcode to make a Galentine's Day video. You can follow along with the steps below to make your own Galentine's Day video with code!

 

Computer Science Education Week with Girl Scouts of Greater New York and Vidcode

Computer Science Education Week takes place this December 7th to the 13th. It's a week to build and learn with code - anyone can do it. Only 5% of schools nation-wide offer students the opportunity to take a rigorous CS course. CS Education Week is meant to provide a time for schools, teachers, and communities to set aside a small amount of time devoted to exposing students to a greater realm of CS opportunities.

For this year's Computer Science Education Week we've built a special Tech Jam and Hour of Code in partnership with the Girl Scouts of Greater New York

Our partnership is centered around a shared commitment to give teen girls leadership and STEM opportunities.

 

 

Take part in Computer Science Education Week by giving your students access to Hour of Code, or go beyond Hour of Code by running a Tech Jam with your community, Girl Scout troop, or classroom. There's no previous experience required, you can run an Hour of Code activity, or an entire Tech Jam, even if you've never coded before!

A Tech Jam is a model event for a community or school to celebrate computer science. The Tech Jam that Vidcode and Girl Scouts of Greater New York have created includes an Hour of Code, discussion questions, off the computer activities, and badges and certificates to win and share! It's free, and doesn't require signup OR prior experience.

By the end of the Tech Jam participants will have an understanding of the fundamentals of programming with JavaScript, and they'll have created a Bestie Video Greeting Card (like the one below) to share with their family and friends.

 

How to run a Tech Jam

Find information on running a successful Tech Jam in the Volunteer Guide, or print out the Participation Guide Booklet for you and the other volunteers.

You can mix and match Tech Jam steps to fit your needs, staff and schedule. For example, if you don’t have a volunteer or teacher to lead the event, the “Bestie Video Greeting Card” Hour of Code is a self-guided activity for students.

Other activities include Unplugged Activities to teach Computer Science Fundamentals without computers or even internet connection, volunteer led discussions before and after the Hour of Code, and a 'Hall of Fame' where participants can view their videos and code, and the projects of other participants! See a more detailed activity list and schedule.

To get started now, register your troop or class to get your event added to our events map. We'll also send you tips and resources as Computer Science Education Week gets closer!

 

How can you help 

You can help by spreading the word and getting your community involved! Tell teachers and Girl Scout Troop Leaders who might be interested in Hour of Code, or in running an entire Tech Jam!

Visit our Spread the Word page for resources to share your event. There are descriptions of the event, social media messages, graphics and banners for you to use to share to get your local community excited about Tech Jam, Hour of Code and Computer Science Education Week!

 

 

Get Ready for Computer Science Education Week

Computer Science Education Week starts December 7th and ends the 13th. Get students excited by telling them about the certificates, Hall of Fame award and Hour of Code patches they could receive!

Still have questions about running your Tech Jam event or using Vidcode? We'd love to hear from you! Contact us at [email protected]

We can't wait to see what you and your students create!

Hour of Code for teen girls



Getting Started with Vidcode for Educators (without a Computer Science background)

Starting a "learn to code" class or after school program can be overwhelming, especially if you don't have a computer science background.

But with the right tools and support, you can keep your students engaged and excited about making with code.

Starting a learn to code program in school

Starting off a coding club with Vidcode introduces JavaScript in a familiar way. Students already used to editing photos and videos see that code relates to something they're already familiar with. 

Students learn more advanced concepts as they make more complicated projects, learning about arrays, functions and if-else statements.

 

Don't worry! As you get into these more advanced lessons and concepts, there's additional curriculum, lessons, off-the-computer activities, worksheets and presentations that go along with the lessons Vidcode has available online. 

Vidcode provides advanced computer science curriculum, teacher training and technical support to help get your club or class set up and running smoothly.

students learning advanced computer science concepts through art

Vidcode also helps make coding a fun and social experience, students can share their code and videos with their class and see what all their classmates are working on. Each class and coding club is part of its own Vidcode group and gallery, where students can show off projects they're working on and share things they've learned with the rest of the group.

Are you thinking about starting an after-school coding club, but aren't sure where to start? Check out our Vidcode classroom roadmap! And learn more about the classroom support and curriculum Vidcode offers on our groups page or get started now at app.vidcode.io!

We Spent a Week With Hoboken Vidcoders!

Vidcode spent the week of June 15-18 at Stevens Coop School. Sixteen students spent four days learning the fundamentals of coding with JavaScript, and making some amazing videos!

Elise, our amazing instructor, spent the first day going over the elements of JavaScript, as students used them hands-on in the Vidcode editor.

They used objects, properties and numbers to add effects to their videos, and strings to change the color of the videos they'd shot.

They learned about and created variables to hold their number and string values!

 They worked with some very original variable names.

 

They worked with some very original variable names.

The next day, the class moved onto learning about how to create and manipulate arrays.

They used this knowledge to put photos they took into arrays, and iterated through them to create stop motions videos. 

Once they learned how to create simple stop motion videos, they went out with clay and paper to create more elaborate videos, including this one below titled 'The Big Blob Attack'. Check out the code that was used to put it together!

Stop motion with JavaScript arrays

Later in the week, students moved on to some more advanced lessons, and used functions and variables to make their videos change over time. Sam used these coding skills to make a video of a plane look like an old movie!

HTML5 canvas effects
video effects with code at summer camp

The last day was spent on everyone's final projects, and getting ready for final presentations! Students spent the day making new stop motions, music videos, and other creative projects, and then adding their final effects in Vidcode using everything they had learned about JavaScript that week.

Final presentations were great! Students showed off their final videos, and talked about the coding concepts that they had used in their final edits.

learn to code summer camp for middle school students

You can see all the videos the students made this week in our gallery!

Interested in having your own Vidcode workshop in your summer camp or school? Find out more about our group programs!