Web Basics

Getting started with Web Basics.

View Demo . Report Bug . Request Feature

         

📘 Introduction

This is a curated step-by-step learning path covering everything from basic web development to modern fullstack apps using tools like Vue.js, Supabase, and PostgreSQL. The goal: build real skills, not just follow tutorials.

Whether you're reviewing fundamentals or pushing into real-time apps, this repo captures one developer’s personal journey—openly shared, continually evolving.

Audience

This tutorial has been prepared for:

• Beginners looking for a clean, modern intro to web development.
• Developers revisiting fundamentals with a focus on real-world workflows.
• Anyone curious about integrating Vue.js with Supabase and PostgreSQL.

Prerequisites

Before you start practicing various types of examples given in this reference, we assume that you are already aware about GitHub and the Git Version Control System.

🧭 Learning Roadmap

Phase 1: Web Fundamentals

These are the core web building blocks:

• HTML5: Tags, elements, forms, semantics
• CSS3: Layouts, Flexbox, Grid, animations
• JavaScript (ES6+): DOM, functions, events, objects, APIs
• JSON: Data interchange format used in APIs
• Bootstrap: UI framework for rapid prototyping
• Tailwind CSS: Utility-first CSS framework for custom UIs

Explore inside: fundamentals/ 📂

Phase 2: Frontend Framework – Vue JS

Lightweight, reactive, component-driven frontend framework

• Introduction to Vue
• Vue directives, events, and computed properties
• Props and state management
• Reusable components
• Todo App as capstone
• Capstone Project: Task manager with local storage

Explore inside: vue_tutorials/ 📂

Phase 3: Backend & Databases

Here we focus on backend learning without getting lost in boilerplate

• SQL with PostgreSQL: Core CRUD operations, schema design, joins, indexes
• Supabase SDK:
  • Instant Auth (email/password, OAuth)
  • Hosted PostgreSQL database
  • Auto-generated RESTful and real-time APIs
  • Row-level security
  • Capstone Project: Fullstack app with auth and CRUD

Explore inside: backend/ 📂

🚀 Getting Started

Requirements

Before diving in, ensure you have:

• Basic understanding of programming concepts
• Git installed
• Code editor (Sublime Text recommended)
• Modern web browser (Google Chrome recommended)
• Node.js installed for Vue.js projects

Folder Structure

Each topic is organized by folder. Start with /fundamentals/01_html and progress through the folders in order.

web-basics/
├── .github/                        # Contribution guidelines
│   ├── issue_template/
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   ├── CODE_OF_CONDUCT.md
│   ├── CONTRIBUTING.md
│   └── PULL_REQUEST_TEMPLATE.md
├── assets/
│   ├── css/
│   ├── img/
│   └── js/
├── backend/                        # Server-side technologies
│   ├── 01_postgresql/              # Database fundamentals
│   └── 02_supabase/                # Supabase fundamentals
│       ├── 01_auth/                # Supabase Auth
│       ├── 02_crud/                # Supabase APIs
│       └── 03_realtime/            # Supabase Realtime
├── fundamentals/                   # Core web technologies
│   ├── 01_html/                    # Semantic markup examples
│   ├── 02_css/                     # Layouts, animations, responsive
│   ├── 03_js/                      # Modern JS patterns
│   ├── 04_json/                    # JavaScript Object Notation
│   ├── 05_bootstrap/               # Component-based prototyping
│   └── 06_tailwind/                # Utility-first CSS workflows
├── vue_tutorials/                  # Vue.js ecosystem
│   ├── 01_intro/                   # Core concepts
│   ├── 02_components/              # Reusable patterns
│   ├── 03_reactivity/
│   └── 04_project_todo/            # Practical application
├── .codacy.yaml
├── .editorconfig
├── .gitattributes
├── .gitignore
├── 404.html
├── CHANGELOG.md
├── LICENSE
├── README.md
├── favicon.ico
├── icon.png
├── icon.svg
├── index.html
├── package.json
├── package-lock.json
├── robots.txt
├── site.webmanifest
├── webpack.common.js
├── webpack.config.dev.js
└── webpack.config.prod.js

Usage

• Fork repository and clone it locally
• Explore learning paths by customizing the content inside fundamentals/, vue_tutorials/ and backend/ as per your requirements or intention

Please share the goodness & don't forget leaving a ⭐ on the repository.

🧩 Contributing

This is an open source example template, therefore developers are encouraged to contribute and help maintain the project throughout its life cycle. Any contributions will be highly appreciated.

Looking to contribute something to this template?

Please read through the contributing guidelines, included are directions for opening issues, coding standards, and notes on development.

🐛 Bugs and Feature Requests

Have a bug or a feature request? Here is to how you can help:

• Having problems with the tutorial? Please report a bug
• Is your problem or idea you would wish implemented not addressed yet? Please request a feature

🙌 Acknowledgements

• Bootstrap for a powerful, feature-packed frontend toolkit.
• Tailwind Labs for incredible dev ergonomics
• Vue core team for building something simple yet powerful
• Supabase team for simplifying backend