India & USA Centers: Mapusa · Panjim · Margao · Sanquelim · Pernem · Mysore · Las Vegas +91 93074 02403 info@avanteia.com
Web Development Track

Web Development:
Level 1

4.8 (1,230 reviews)

Go from your first HTML page to a complete full-stack application. Master responsive HTML, CSS and JavaScript with Git, then build typed React front ends, a Next.js app, REST APIs with Node.js and Express, a PostgreSQL database and secure login with roles — finishing with three portfolio projects you can show employers.

Created by Avanteia
12,580 Total Enrolled
02 Oct 2026 Last Updated
Enroll Now
Full-stack web development Level 1 course in Goa – React, TypeScript, Node.js and PostgreSQL training at Avanteia Mapusa
2 Months Duration
Certificate On Completion
Level-01 Level
15 Modules Syllabus
2 Months Duration
146 Hours 31 Theory · 115 Practical
English Language

Overview

Web Development Level 1 is a project-based, full-stack course that needs no prior programming experience. You begin with how the web works, semantic HTML, responsive CSS, JavaScript, the DOM and Git, and ship a live Responsive Business Landing Page. You then write modern ES6+ JavaScript and TypeScript, build component-based React apps with routing, custom hooks and Context, and create and deploy a Next.js mini project. On the back end you build Node.js and Express servers, design and test REST APIs, model data in PostgreSQL and add secure registration, login, JWTs and roles. Everything comes together in the main project: a full-stack application with a dashboard, CRUD, search and filtering. Theory is kept short, every practical is submitted and checked, and your full-stack app becomes the base for Level 2.

HTML & CSS JavaScript ES6+ TypeScript React Next.js Node.js & Express REST APIs PostgreSQL Auth & Security Git & GitHub

Learning Outcome

Build responsive websites, typed React and Next.js front ends, REST APIs with Node.js and Express, and a PostgreSQL database with secure authentication — and ship a landing page, a Next.js app and a full-stack application.

Syllabus

Click any module to expand and view topics, hands-on practicals and tools used.

  • How the web works: client and server; websites versus web applications versus web pages
  • Domain, hosting and URL
  • HTTP and HTTPS basics
  • HTML structure, elements and attributes
  • Text, links, images, lists and tables
  • HTML forms
  • Semantic HTML
  • Basic accessibility and SEO-friendly HTML
Hands-on Lab
Set Up VS Code & Inspect Live Sites in DevTools Multi-Section Personal Profile Page Accessible Contact Form Semantic, Accessible & SEO-Friendly Rewrite
Tools Used
VS Code Chrome DevTools W3C Markup Validator Lighthouse
  • CSS fundamentals and selectors
  • Colours, fonts and text styling
  • Box model: margin, padding and borders
  • Display and positioning
  • Flexbox and CSS Grid
  • Pseudo-classes and pseudo-elements
  • CSS variables
  • Transitions and basic animations
  • Responsive design, media queries and mobile-first design
  • Browser developer tools for styling and layout
Hands-on Lab
Style a Page with a Palette, Fonts & CSS Variables Navigation Bar & Cards with Flexbox Photo Gallery & Pricing Section with CSS Grid Hover Effects, Transitions & Animation Mobile-First Testing at Three Breakpoints
Tools Used
VS Code Chrome DevTools Google Fonts Can I Use
  • Introduction to JavaScript
  • Variables and constants, data types and operators
  • Conditions and loops
  • Functions and scope
  • Arrays, objects and strings
  • Array methods and object handling
  • JSON
  • Basic error handling
  • Debugging fundamentals with the console and DevTools debugger
Hands-on Lab
10 Exercises on Variables, Conditions & Loops Temperature Converter, Grade Calculator & String Utilities Student or Product List with Array Methods JSON Parsing with try/catch Debug Three Broken Programs
Tools Used
VS Code Node.js Chrome DevTools
  • DOM fundamentals
  • Selecting and manipulating elements
  • Changing content, styles and attributes
  • Events and event listeners
  • Forms and form validation
  • Dynamic HTML
  • Local Storage and Session Storage
  • Fetch API, JSON data, Promises and Async/Await
  • Basic browser APIs
Hands-on Lab
Interactive To-Do List Contact Form Validation with Clear Errors Save the To-Do List in Local Storage Fetch & Render Public API Data with Loading States Dark-Mode Toggle & Mobile Menu
Tools Used
VS Code Chrome DevTools Live Server Public APIs
  • Version control fundamentals
  • Git and GitHub, repositories and commits
  • Branches
  • Clone, pull and push
  • .gitignore and README
  • Pull requests
  • Basic merge conflicts
  • GitHub collaboration workflow
Hands-on Lab
Create a Repository & Push Five Commits Feature Branch Merged by Pull Request Resolve a Merge Conflict in Pairs .gitignore & README for Your Project Beginner Project: Responsive Business Landing Page
Tools Used
Git GitHub VS Code Source Control
  • Arrow functions and template literals
  • Destructuring, spread and rest operators
  • ES modules
  • Higher-order functions: map(), filter(), reduce() and find()
  • Callbacks, Promises and Async/Await
  • Error handling
  • Advanced API handling: retries and clear errors
Hands-on Lab
Refactor Code with ES6+ & ES Modules 10 Data-Transformation Problems with map, filter & reduce Two-API App with Async/Await & Retries
Tools Used
VS Code Node.js Public APIs
  • Introduction to TypeScript
  • Type annotations and type inference
  • Basic types, arrays and objects
  • Functions
  • Interfaces and type aliases; optional properties
  • Union types and type narrowing
  • Basic generics
  • TypeScript with React
Hands-on Lab
Convert a JavaScript Utility to TypeScript Model App Data with Interfaces & Type Aliases Generic Helper with Union Types & Narrowing Vite React TypeScript Project with Typed Props
Tools Used
TypeScript VS Code Vite
  • Introduction to React and project structure
  • Components and JSX
  • Props and state
  • Events
  • Conditional rendering
  • Lists and keys
  • Forms and controlled components
  • React Hooks: useState and useEffect
  • API integration
Hands-on Lab
Component Library: Button, Card, Navbar & Footer Counter, Toggle & To-Do List with State Product List with Keys & Conditional Rendering Controlled Form with Validation Fetch Data with useEffect & Loading States
Tools Used
React Vite React Developer Tools
  • Reusable components and component composition
  • Custom hooks
  • Context API
  • Client-side routing and protected routes
  • Forms and validation
  • Loading states and error states
  • Search, filtering and pagination
  • Application structure and basic state management concepts
Hands-on Lab
Multi-Page App with React Router Custom Hook (useFetch or useLocalStorage) Shared Theme or User State with Context API Protected Route with Redirect Search, Filtering & Pagination
Tools Used
React Router React Developer Tools Vite
  • What is Next.js and why use it
  • Project structure, routing and layouts
  • Dynamic routes
  • Server and client components
  • Data fetching
  • Route handlers
  • Environment variables
  • Metadata and SEO; image optimisation
  • Basic deployment
Hands-on Lab
Next.js Project with a Shared Layout & Three Routes Dynamic Routes with Data Fetching Route Handler & Environment Variables Metadata, Optimised Images & Deployment Next.js Mini Project: Blog, Portfolio or Catalogue
Tools Used
Next.js TypeScript Vercel or Similar Host
  • Backend fundamentals
  • Node.js, npm and packages; package.json and Node.js modules
  • Environment variables
  • Express.js and creating a server
  • Routes, request and response
  • Middleware
  • HTTP methods and status codes
  • Error handling
Hands-on Lab
Initialise a Node Project & Read Environment Variables Express Server with Five Routes Custom Logging & Request-Check Middleware Centralised Error Handling with Status Codes
Tools Used
Node.js npm Express Nodemon Postman
  • What is an API; REST fundamentals and endpoints
  • GET, POST, PUT/PATCH and DELETE
  • Request body, URL parameters, query parameters and headers
  • JSON and HTTP status codes
  • CORS
  • API error handling
  • API testing with Postman
  • Connecting React to backend APIs
Hands-on Lab
Design an Endpoint Table Full CRUD Routes URL Parameters, Query Search & Validation Errors Postman Collection for Every Endpoint Connect React to the API & Handle CORS
Tools Used
Express Postman React CORS Middleware
  • Database fundamentals and relational databases
  • PostgreSQL: database and table creation, rows and columns
  • Primary keys and foreign keys
  • Relationships: one-to-one, one-to-many, many-to-many
  • SELECT, INSERT, UPDATE, DELETE, WHERE, ORDER BY and GROUP BY
  • INNER and LEFT JOINs
  • Basic database design and ER diagrams
  • Connecting Node.js to PostgreSQL
Hands-on Lab
Create a Database & Three Tables with Keys 15 Queries with SELECT, WHERE, ORDER BY & GROUP BY INNER & LEFT JOIN Queries ER Diagram for the Level 1 Project Connect the Express API to PostgreSQL
Tools Used
PostgreSQL pgAdmin / DBeaver node-postgres (pg) dbdiagram.io
  • Authentication versus authorization
  • User registration, login and logout
  • Password hashing
  • Sessions and tokens; JWT fundamentals
  • Protected routes, user roles and permissions
  • Input validation
  • CORS
  • Awareness of SQL injection, XSS and CSRF
  • Environment variables and basic secure API practices
Hands-on Lab
Registration & Login with Hashed Passwords Issue & Verify JWTs; Protect API Routes Admin & User Roles Input Validation; Fix SQL Injection & XSS Examples
Tools Used
bcrypt jsonwebtoken Zod / Joi Postman OWASP Top 10
  • Stack: React, TypeScript, Node.js, Express, REST API, PostgreSQL and authentication
  • Features: registration and login, dashboard, CRUD, forms, database, API integration, search, filtering, user roles, responsive UI and error handling
  • Example projects (vary by batch):
    • Learning Management System or Student Management System
    • E-Commerce System or Job Portal
    • Inventory Management or Appointment Management System
Hands-on Lab
Plan: Features, ER Diagram & Endpoint Table Database: Tables & Seed Data Backend: Express API with Auth & Roles Frontend: React + TypeScript Pages & Dashboard Integrate: Connect, Errors & Loading States Present: Demo & README
Tools Used
React & TypeScript Node.js & Express PostgreSQL Git & GitHub Postman

What You Will Learn

Responsive Front-End Foundations

Build accessible, responsive websites with HTML, CSS and JavaScript, and manage code with Git and GitHub.

React, TypeScript & Next.js

Build typed, multi-page React apps with routing, hooks and Context, and deploy a Next.js application.

Node.js, Express & REST APIs

Create Express servers with middleware and error handling, and design, test and document REST APIs.

PostgreSQL & Secure Auth

Model relational data in PostgreSQL and add hashed passwords, JWTs, roles and protection against common attacks.

Full-Stack Application

Combine React, TypeScript, Node.js, Express and PostgreSQL into one working app with dashboard and CRUD.

Three Portfolio Projects

Finish with a live landing page, a deployed Next.js mini project and a full-stack application with README.

What Our Students Say

"

The Level 2 course took my skills to a professional level. The Active Directory labs and privilege escalation modules are exactly what I needed to land my first pentesting job. Avanteia's hands-on approach is unmatched.

Vikram Patil Penetration Tester, Mumbai
"

I completed the Beginner course first and immediately enrolled in Intermediate. The malware analysis and reverse engineering modules were eye-opening. The 2-month duration is perfect for working professionals.

Sneha Kadam ethical hacking Analyst, Pune
"

The cloud security and wireless hacking modules are incredibly relevant. I used the skills from this course to secure my company's AWS infrastructure. Highly recommended for anyone serious about ethical hacking.

Rahul Menon Security Engineer, Bangalore

Ready to Launch Your
Web Development Career?

Go from your first web page to a full-stack application with three portfolio projects. Enroll today and get certified on completion.

Enroll Now