Web based projects can be anything to a website like Facebook, youtube, github. Or something like our college website, our attendance viewer are all web based projects but are not open source.

Web based projects has two parts Frontend and Backend, read more about it here, https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end

2.1 Frontend

Frontend is basically what you see, the colors, the animations, the wonderful pictures, people with creativity basically does this. It is the most easy of all the projects and the scope and amount of projects for frontend development is very high.

Technologies needed:

  • HTML

    HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language. HTML describes the structure of Web pages using markup. Resources

    • Free Code Camp - https://freecodecamp.com/

    • Codecademy - https://www.codecademy.com/learn/web

    • W3school - https://www.w3schools.com/html/

  • CSS

    CSS stands for Cascading Style Sheet . It is a style sheet language used for describing the presentation of a document written in a markup language. Basically CSS gives life and colour to the website.

    • Free Code Camp - https://freecodecamp.com/

    • Codecademy - https://www.codecademy.com/learn/web

    • W3school - https://www.w3schools.com/html/

  • Javascript

JavaScript is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites.

* Codecademy - https://www.codecademy.com/learn/javascript 

* W3school - https://www.w3schools.com/js/default.asp

  • Bootstrap

    Bootstrap is a pre-defined CSS file. It contains commonly used Web-elements predefined as Classes.

    • Free Code Camp - https://freecodecamp.com/

    • W3school - https://www.w3schools.com/bootstrap/

  • GIMP

    GIMP (GNU Image Manipulation Program ) is a freely distributed program for such tasks as photo retouching, image composition and image authoring.

    • Official Tutorial- https://www.gimp.org/tutorials/

*Youtube

2.2 BACKEND

When you’re building a website, you always need a similar set of components: a way to handle user authentication (signing up, signing in, signing out), a management panel for your website, forms, a way to upload files, etc.

Luckily for you, other people long ago noticed that web developers face similar problems when building a new site, so they teamed up and created frameworks that give you ready-made components to use.

Your website or dynamic web application is a sum of layers—structure, design and content, and functionality. The technology and programming that “power” a site—what your end user doesn’t see but what makes the site run—is called the back end. Consisting of the server, the database, and the server-side applications, it’s the behind-the-scenes functionality—the brain of a site. This is the ecosystem of the database manager and the back-end developer.

Major Web-Frameworks and Technologies Needed

  • Django or Flask

    If you’re already knowledgeble in Python and interested in Web Development, I suggest you start with learning Django or Flask, Django is a free and open source web application framework, written in Python Instagram, National Geographic, Mozilla, Pintrest are some websites which run on django. Flask is a lighter version of Django

    • DjangoGirls: https://tutorial.djangogirls.org/en/

    • Django-Video- Tutorials: https://www.youtube.com/watch?v=qgGIqRFvFFk

    • Official-Documentation-Django: https://docs.djangoproject.com/en/1.10/intro/tutorial01/

    • Flask-Documentation: https://www.tutorialspoint.com/flask/

    • Flask-Doc: https://hackr.io/tutorials/learn-flask

  • Ruby on Rails

    Rails like Django is also a free and open source web application but written in Ruby. Codecademy,twitter(old version),plated,github are some sites build over Rails.

    Links

    • Official Rails Documentation -http://guides.rubyonrails.org/

    • Ruby on Rails Book by Micheal Hartl -https://www.railstutorial.org/book/frontmatter

    • Code School -http://railsforzombies.org

  • PHP

    PHP is a widely used open source scripting language.It is mostly used for web development and can be embedded into HTML.

    Links

    • Learn PHP -http://www.learn-php.org/

    • Tutorialspoint- https://www.tutorialspoint.com/php/

    • W3school -https://www.w3schools.com/php/

  • Node.js

    Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications. Node.js also provides a rich library of various JavaScript modules which simplifies the development of web applications using Node.js to a great extent.

Links * www.freecodecamp.com/

    * https://www.tutorialspoint.com/nodejs/index.htm

    * Youtube Tutorials

  • Rocket.rs

    Rocket.rs is a framework build over RUST programming language.Being still in its infancy,Rocket is less popular and still under development.

Links

  • https://rocket.rs/guide/

  • SQL

    Structured Query Language (SQL) is a standard computer language for relational database management and data manipulation. SQL is used to query, insert, update and modify data. SQL is needed for all Backend related activities

Links

  • Codecademy - https://www.codecademy.com/learn/javascript

  • https://www.w3schools.com/sql/