Integrated Development Environment (IDE)

Just starting out with programming? You will need an IDE to write your code!

• VSCode:https://code.visualstudio.com/download
• Atom: https://atom.io/
• Pycharm: https://www.jetbrains.com/edu-products/download/#section=pycharm-edu
• Brackets: http://brackets.io/

Web Development

Here are some of the best web development resources to help you build your project

• Deep Dive Into Modern Web Development https://fullstackopen.com/en/
• HTML Documentation https://devdocs.io/html/
• CSS Documentation  https://devdocs.io/css/
• W3Schools https://www.w3schools.com/
• W3Schools Web Development Roadmap https://www.w3schools.com/whatis/
• GeeksforGeeks Web Development https://www.geeksforgeeks.org/web-development/?ref=shm
• MDN Web Docs https://developer.mozilla.org/en-US/

Alternatively, follow along these tutorials:

• HTML https://www.youtube.com/watch?v=UB1O30fR-EE
• CSS https://www.youtube.com/watch?v=yfoY53QXEnI
• Learn Web Development https://www.youtube.com/watch?v=3JluqTojuME
• Build a Website https://www.youtube.com/watch?v=pQN-pnXPaVg

CSS Framework

Looking for an easier way to style your web pages?  

• Get Bootstrap https://getbootstrap.com/
• Bootstrap Beginner Crash Course https://www.youtube.com/watch?v=5GcQtLDGXy8
• Tailwind https://tailwindcss.com/
• Tailwind CSS Crash Course https://www.youtube.com/watch?v=UBOj6rqRUME

JavaScript

Almost all websites use JavaScript, and you should too! (JS & APIs)

• JavaScript Guide https://developer.mozilla.org/en-US/docs/Web/JavaScript
• JavaScript Language https://devdocs.io/javascript/
• JavaScript Tutorial https://www.youtube.com/watch?v=W6NZfCO5SIk

Python

Python can be used for web development as well!

• Download Python https://www.python.org/downloads/
• Beginners' Guide https://wiki.python.org/moin/BeginnersGuide
• Learn Python Tutorial ****https://www.youtube.com/watch?v=kqtD5dpn9C8

Flask

Want to easily create web applications using Python? Try out Flask!

• Download https://pypi.org/project/Flask/
• User Guide https://flask.palletsprojects.com/en/1.1.x/
• Learn Flask https://www.youtube.com/watch?v=Z1RJmh_OqeA

React.js

Want to easily create web applications using JavaScript? Try out React.js! 

• Getting Started with React.js https://reactjs.org/docs/getting-started.html
• React.js Documentation https://devdocs.io/react/
• React.js Crash Course https://www.youtube.com/watch?v=w7ejDZ8SWv8
• Multiple React project examples with code: https://bezkoder.com/react-crud-web-api/

Mobile App Development

Have a go at developing a mobile app for your project

• Getting started with Android Studio https://developer.android.com/studio/intro
• Build your first android app https://developer.android.com/training/basics/firstapp
• Android Development for Beginners https://www.youtube.com/watch?v=fis26HvvDII&t=24s

APIs

Missing some functionality in your project? Try out some APIs! Here are some of the best places to find APIs:

• AnyAPI https://any-api.com/
• GitHub Public APIs https://github.com/public-apis/public-apis,
• MDN Web APIs https://developer.mozilla.org/en-US/docs/Web/API
• Rapid API https://rapidapi.com/marketplace
• ABS data source https://api.gov.au/apis
• Australian Government https://data.gov.au/

Have a look at these resources:

• APIs Introduction https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
• Implementing APIs in Node.js https://www.moesif.com/blog/api-guide/development/api-resources-for-nodejs-developers/
• Implementing APIs in Flask https://www.moesif.com/blog/api-guide/development/api-resources-for-python-developers/
• APIs for beginners https://www.youtube.com/watch?v=GZvSYJDk-us&t=3328s

Web Design

Here are some prototyping tools that you can use for your project!

• Adobe XD https://www.adobe.com/au/products/xd.html
• Canva https://www.canva.com
• Figma https://www.figma.com/
• Typewolf https://www.typewolf.com/
• Unsplash https://unsplash.com/
• unDraw https://undraw.co/illustrations

Don’t know where to start? Find some inspiration from other designers:

• Behance https://www.behance.net/search/projects?field=web design
• Dribbble https://dribbble.com/shots/popular/web-design
• Awwwards https://www.awwwards.com/
• Best Website Gallery https://bestwebsite.gallery/sites

If you are new to web design or want to learn more, have a look at these resources

• Figma Hackathon Starter Kit https://www.notion.so/Figma-s-Hackathon-Starter-Kit-dfd527abc75842869b3f24c2e1b4096b
• UI/UX with Figma https://www.youtube.com/watch?v=c9Wg6Cb_YlU
• UI Design Course https://www.youtube.com/watch?v=_Hp_dI0DzY4