Web development Resources
Beginner-friendly web development resources for a smooth learning experience.
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.
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:
💡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.
Some advanced libraries/frameworks for enhanced UI/animations
-
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)