Web development Resources

Pre-requisites

• Git and GitHub: Git & GitHub Crash Course For Beginners

• Code Editor: We recommend visual studio code as it is both easy and highly customizable at the same time, with a very rich collection of plugins.

  • Visual Studio Code installation

  • Tutorial

  • Hold on, what’s a code editor?

Resources for Frontend

HTML/CSS/Javascript:

If you are a beginner, you must check out these resources before exploring anything.

• HTML
  • CSS
  • Javascript
  • Web Dev Basics from the chrome developers’ team.

React basics

• Installation guide:

  • Using vite to create React apps

  • create-react-app

💡We recommend using the first method, i.e. using vite server as it is fast and more optimized than create-react-app.

• Learn React: The official react documentation guide.

• Frameworks/Libraries for readymade UI components.

  • Material UI

  • Ant design

• Some advanced libraries/frameworks for enhanced UI/animations

  • Three.js

  • Anime.js

  • GSAP

  • Spline

  • React Framer Motion

  • React Spring

    There may be more! Explore yourself ✨

Design

• Design ideas: You can find some amazing design ideas on pinterest and dribbble to get started. Also you should checkout awwwards.com for cool animation ideas.

• Preparing your own design: Preparing designs first helps developers visualize how the user interface (UI) will look before writing any code. We recommend Figma for designing purposes. You can follow this playlist to know how to use Figma for brainstorming.

Deploying the frontend

• Although deployment style is irrelevant as long as your website is accessible to all, we recommend vercel deployment for beginners, as it is easy and hassle-free, irrespective of whatever your web project is. Here is a tutorial: Vercel deployment.

  • CLI method: How to Deploy a React Site with Vercel

  • Note that vercel also provides some useful info about your website in something called Vercel Analytics. Do check it out under the analytics tab yourself!

  • Deploying on Netlify is another good alternative to vercel.

  • Deploy using Github Pages is the simplest way to host your website, but will only work easy for plain HTML, CSS, JS projects and not recommended for React projects.

Resources for Backend

• for absolute beginners with easy explanation: MERN for beginners

• for advanced additions to the beginner topics: additional tweaks (MERN)