Introduction
Ever wondered what is the backbone of almost all the software-based hackathon projects? Ever wondered what is that one field which will allow you to contribute most towards making your hackathon idea into a fully realized product? The answer to these fundamental questions in web development. And guess what, it's one of the easiest avenues of development to get into!
In this blog, we will give you a complete rundown of how to start off with WebD and by the end make you prepared to tackle the stressful demands that any hackathon asks of its web developers.
We have divided this post into the following sections:
- Where do I start? (Or "enough of the pep talk, give me some actual technical details!" )
- Where do I study from? (Or "sources that'll enlighten me in the ways of web development")
- What do I do now? (Or "I wanna escape this tutorial purgatory, suggest me some sweet project ideas to test my skills"*)
- Hackathon experience (Or "what are the valuable hackathon experiences that you guys can share!?")
- Tips and tricks (Or "I heard pragmatism is the name of the game, kindly impart some of your nifty tips and tricks")
- About the author (Or "you have written a lot guys, got credibility?")
Last but not least, this post is an attempt to give you a big-picture idea of the perspective of web developers when they are participating in hackathons. We hope that you enjoy this read. Let us dive in!
Where do I start?
Now, the prerequisites to starting off can be really challenging, intimidating and might not be the first thing you want to hear. Do you have a web browser like Chrome or Firefox and a simple source-code editor, say all platform available VS Code? Cool, now that we are in clear, let’s move forward :P.
Web development can be divided into three broad practices, namely:
- Back-end development - Also known as server-side development. It deals with all the behind-the-scenes logic of your web-app.
- Front-end development - This deals with setting up the "look and feels" of the website. Basically, as a front-end developer, you'll be designing the UI of your web-app, ensuring that all the interactions with your web-app are as user-friendly as possible.
- Full-stack development - This refers to building both the back-end and front-end parts of the web-app.
At this point, you'll have to ask yourself what kind of developer you want to be. If you want to work closely with the designer and make the best looking website out there, just learn front-end. If you want to deal with the core logic side of development, enabling maximum functionality and performance out of your web-app, just learn back-end.
Wanna be independent of the woes of searching for that dreamy complementary in skills, developer, who would make your mother proud and can perfectly grasp the depth of work you intend to do while reasonably compromising in the diversity of the project?
Then, full-stack it is.
For an in-depth look at how the modern web dev roadmap looks, check out this awesome video.
Where do I study this from?
There are a plethora of learning resources online. From full-blown online courses to useful youtube educators, here's a shortlist that you may want to pursue depending on what you want to learn.
Courses:
- The Web Developer Bootcamp
- Full-Stack Web Development Course with React
- Beginner Full Stack Web Development: HTML, CSS, React & Node
- The Complete React Developer Course
- Angular 8 | The Complete Guide
- Django 2.2 & Python | The Ultimate Web Development Bootcamp
YouTube channels:
The only advice is that it's best to follow a learn-as-you-go approach because life is too short and your list of ideas and wishes, well let's face it, even made Santa climb up the chimney and take early retirement. So, start off with a Bootcamp style course, develop a strong intuition and immediately start making your own projects. That's it! As you face challenges in your projects, your intuition will guide you to the appropriate resources. At the end, when push comes to shove, that's what you'll be doing in hackathons!
What do I do now?
Now that you know what about things that constitute Web Development, let’s look at a few projects are you can work on as self-help exercises. Before that you must know that with the extent of knowledge people nowadays manage to acquire before even having any hands-on experience, these projects might seem trivial at first. And they pretty much are for an experienced developer. But for the beginners, nothing substitutes good practice. Let’s move forward now.
Front End
- Make your website.
Obviously enough, to start being a ‘website developer’, you need to be a website developer. What better way to begin than creating your own personalized one. While its pure fun to add anything and everything in it that describes you, you can also tailor it to fulfill specific needs like, say your online portfolio or your own blog. It doesn’t have to be perfect but surely try to move in that direction. Use a version control system obviously. Make mistakes. Fix them. Look at real examples. It’s learning by doing.
- Make a social media authentication page.
You have often signed up for/ logged in to social media accounts. The forms you fill are often fancy and conveniently spaced out. The colors on the page look good too. Try replicating that. Or better, design your own form, with layouts and colors of your choice. Try making it look as professional as the ones you’ve seen. This can teach you a lot about front-end design, from designing good layouts and deciding on good color combinations to actually place components in accordance with the layout perfectly.
Back End
- Host your websites on a local server.
Now that you have your framework of choice, try reading its documentation and learn how to run it on your local server.
- Connect to a database
Learn about a database management system like SQL or MongoDB. Try connecting your backend server to the database. Make the front end interact with the database. You might build a blogging website where the blogs that the user writes will be stored in the system.
Hackathon experience
We have been to some hackathons and have also helped in organizing one. The very draw of a hackathon is rapid development since generally, they run for 30-40 hours. And that makes it all the more difficult. And the key is a lot of practice. And experience. If you are interested in hackathons then you should participate in a lot of them. Learning comes automatically. Here’s a rundown of what goes through your head during a hackathon.
- In the beginning, you will be more anxious about the quality of the idea than its actual development. You’d constantly be thinking about whether your idea is better than the other participants’. You will find others with ideas that you might find more interesting than yours and might even wonder if you should change it. It’s not generally wise to do that.
- During development, you still wouldn’t be very worried about the clock. Until the first setback, which will definitely come. Especially for beginners, it is unwise to assume that there won’t be problems irrespective of however much you’ve thought it through. This is a phenomenon not exclusive to just hackathons. And now you might panic.
- Hopefully, you don’t face too many setbacks. ‘Too many’ differs for different persons. In any case, once the number of setbacks reaches your threshold of self-motivation, you might start getting bored. You will start questioning the very idea of hackathons itself. You’ll wonder who came up with the stupid idea of developing good software in just 1-2 days. Wouldn’t the limited time compromise the quality of the software? Don’t dwell on it too long though.
- The clock will soon strike completion time. You’re not at all close to completion. Your panic further increases. You start working faster. You start bodging things. Just remember, it’s perfectly fine to do so. Especially if you’re a beginner.
- The hackathon has completed. Your project might or might not have been. You realize a lot of other people are in the same pain. Actually, most of the time you might not even realize it. The questions from point 3 flood your mind again. But make a point to never get disheartened. It’s a process even the most experienced hackathon participants go through in the beginning stages.
Tips and tricks
Points in the preceding topic must be seeming a bit disheartening. They present to you the problems that a participant generally(read always) faces in a hackathon. The most comforting thing I can say now is that it’s totally fine to mess up. The motive is to learn, not be a development rockstar from the get-go. Still, a few tips and tricks might prevent much anguish.
- Don’t try to build a software/hardware aiming to solve a large problem that you might not be able to complete even in a week rather than during a hackathon. A lot of people fall into that trap.
- Be prepared with your idea before the hackathon begins. While some hackathons might provide you with their ideas at the commencement, generally, you’re allowed to come up with your idea beforehand. So obviously come up with an idea beforehand.
- Keep a calm mind throughout and trust your skills. Simple and obvious.
- Be prepared to forgo some features of your proposed software/hardware due to lack of time. It happens to the best of them. Have a contingency plan for such situations. Follow good programming paradigms to ensure a missing feature doesn’t render the whole project non-functional.
- Sometimes the UI is more important than the backend. While you shouldn’t put all your focus on UI without any substance to the backend, but good-looking projects are often graded better than the relatively uglier ones. Hence do make your product look as good as possible.
About the authors
We are information technology undergraduates studying in IIITA. Feel free to contact us via the following channels:
Top comments (4)
Any site for hackthons ??
Dare2Compete and HackerEarth
these site doesn't have web development related stuff. Do u know any Website where i can practice web dev and show my points in my portfolio
do anyone know about web dev hacakthons. I don't find any web dev competition or hackathons in the internet. If any of you know about these stuff then please share with us.