Welcome to the Beginner Friendly Web Development Learning Resource By DevKay repository! This is a curated collection of tutorials, articles, and resources to help you get started and master various web development technologies, including HTML, CSS, JavaScript, React, Vue.js, Node.js, TypeScript, Web Performance, and more.
- HTML
- CSS
- JavaScript
- TypeScript
- React
- Vue.js
- Angular
- Node.js
- Web Performance
- Responsive Web Design
- Modern JavaScript Frameworks
- Testing
- DevOps & Deployment
- Web Security
- Accessibility
- Progressive Web Apps (PWAs)
- General Web Development
| Title | Description | Link |
|---|---|---|
| HTML Introduction | A beginner's guide to HTML, covering tags, attributes, and structure. | W3Schools |
| HTML5 Documentation | Official Mozilla Developer Network (MDN) guide to HTML5. | MDN |
| HTML5 Semantic Elements | Learn about semantic HTML elements and their role in SEO and accessibility. | Web.dev |
| HTML Forms Guide | Comprehensive guide to creating and validating HTML forms. | MDN |
| HTML Accessibility | Best practices for making HTML accessible to all users. | WebAIM |
| Title | Description | Link |
|---|---|---|
| CSS Basics | Introduction to CSS, styling text, images, and layout. | W3Schools |
| CSS Flexbox Guide | A comprehensive guide to mastering Flexbox for layout design. | CSS Tricks |
| CSS Grid Layout | Complete guide to CSS Grid for two-dimensional layouts. | CSS Tricks |
| Modern CSS | Google's comprehensive CSS learning course covering modern techniques. | Web.dev |
| CSS Container Queries | Learn about container queries for responsive component design. | MDN |
| CSS Custom Properties | Guide to using CSS variables for maintainable stylesheets. | MDN |
| Tailwind CSS | Utility-first CSS framework for rapid UI development. | Tailwind CSS |
| Title | Description | Link |
|---|---|---|
| JavaScript.info | Modern JavaScript tutorial from basics to advanced topics. | JavaScript.info |
| JavaScript MDN | Comprehensive JavaScript reference and tutorials. | MDN |
| ES6+ Features | Complete guide to modern JavaScript features (ES6 and beyond). | GitHub |
| JavaScript Algorithms & Data Structures | FreeCodeCamp's comprehensive course on JS algorithms and data structures. | FreeCodeCamp |
| You Don't Know JS | Deep dive book series into JavaScript's core mechanisms. | GitHub |
| JavaScript Design Patterns | Modern JavaScript design patterns and best practices. | Patterns.dev |
| Title | Description | Link |
|---|---|---|
| TypeScript Handbook | Official TypeScript documentation and tutorials. | TypeScript |
| TypeScript Deep Dive | Comprehensive guide to TypeScript concepts and patterns. | GitBook |
| Type Challenges | Collection of TypeScript type challenges to improve your skills. | GitHub |
| Total TypeScript | Advanced TypeScript tutorials and courses. | Total TypeScript |
| Title | Description | Link |
|---|---|---|
| React Documentation | Official React documentation with modern practices and hooks. | React |
| React Tutorial | Updated official React tutorial for building interactive applications. | React |
| React Patterns | Modern React patterns and best practices. | Patterns.dev |
| Next.js Documentation | Full-stack React framework for production applications. | Next.js |
| React Query (TanStack Query) | Powerful data synchronization for React applications. | TanStack Query |
| Zustand | Simple, modern state management for React. | GitHub |
| Title | Description | Link |
|---|---|---|
| Vue.js 3 Guide | Official Vue.js 3 documentation with Composition API. | Vue.js |
| Vue.js Examples | Collection of Vue.js examples and mini-projects. | Vue.js |
| Pinia State Management | Modern state management library for Vue.js applications. | Pinia |
| Nuxt.js | Full-stack Vue.js framework for building web applications. | Nuxt.js |
| Vue Router | Official router for Vue.js applications. | Vue Router |
| Title | Description | Link |
|---|---|---|
| Angular Documentation | Official Angular documentation with modern practices. | Angular |
| Angular Tutorial | Step-by-step tutorial for building Angular applications. | Angular |
| Angular Style Guide | Official style guide for Angular development. | Angular |
| NgRx | Reactive state management for Angular applications. | NgRx |
| Title | Description | Link |
|---|---|---|
| Node.js Documentation | Official Node.js documentation and API reference. | Node.js |
| Node.js Best Practices | Comprehensive guide to Node.js best practices. | GitHub |
| Express.js | Fast, minimalist web framework for Node.js. | Express.js |
| Fastify | Fast and low overhead web framework for Node.js. | Fastify |
| NestJS | Progressive Node.js framework for building scalable applications. | NestJS |
| Title | Description | Link |
|---|---|---|
| Web Performance | Comprehensive guide to web performance optimization. | Web.dev |
| Core Web Vitals | Essential metrics for measuring user experience. | Web.dev |
| Lighthouse | Tool for auditing web app performance and quality. | Google Developers |
| WebPageTest | Website performance testing tool with detailed analysis. | WebPageTest |
| Performance Budget | Guide to setting and maintaining performance budgets. | Web.dev |
| Title | Description | Link |
|---|---|---|
| Responsive Design | Modern responsive design principles and techniques. | Web.dev |
| CSS Container Queries | Using container queries for component-based responsive design. | Web.dev |
| Responsive Images | Best practices for responsive and optimized images. | Web.dev |
| Mobile-First Design | Principles of mobile-first responsive design. | Brad Frost |
| Title | Description | Link |
|---|---|---|
| Svelte | Cybernetically enhanced web apps with compile-time optimizations. | Svelte |
| SvelteKit | Full-stack framework built on Svelte. | SvelteKit |
| Solid.js | Simple and performant reactivity for building user interfaces. | Solid.js |
| Qwik | Resumable framework for instant loading web applications. | Qwik |
| Astro | Modern static site builder for content-focused websites. | Astro |
| Title | Description | Link |
|---|---|---|
| Vitest | Fast unit testing framework powered by Vite. | Vitest |
| Jest | JavaScript testing framework with focus on simplicity. | Jest |
| Testing Library | Simple and complete testing utilities for DOM testing. | Testing Library |
| Cypress | End-to-end testing framework for modern web applications. | Cypress |
| Playwright | Fast and reliable end-to-end testing for modern web apps. | Playwright |
| Storybook | Tool for building UI components and pages in isolation. | Storybook |
| Title | Description | Link |
|---|---|---|
| Vercel | Platform for frontend developers with instant deployments. | Vercel |
| Netlify | Platform for deploying and hosting modern web projects. | Netlify |
| Docker | Containerization platform for consistent deployments. | Docker |
| GitHub Actions | CI/CD platform for automating workflows. | GitHub |
| AWS for Frontend | Deploying frontend applications on AWS. | AWS |
| Title | Description | Link |
|---|---|---|
| Web Security | Comprehensive guide to web application security. | Web.dev |
| OWASP Top 10 | Top 10 web application security risks. | OWASP |
| Content Security Policy | Guide to implementing CSP for XSS protection. | MDN |
| Web Authentication | Modern authentication with WebAuthn and FIDO2. | WebAuthn Guide |
| Title | Description | Link |
|---|---|---|
| Web Accessibility | Complete guide to making websites accessible. | Web.dev |
| WCAG Guidelines | Web Content Accessibility Guidelines quick reference. | W3C |
| A11y Project | Community-driven effort to make digital accessibility easier. | A11y Project |
| axe DevTools | Browser extension for accessibility testing. | Deque |
| Title | Description | Link |
|---|---|---|
| PWA Guide | Complete guide to building Progressive Web Apps. | Web.dev |
| Service Workers | MDN guide to Service Workers for offline functionality. | MDN |
| Workbox | JavaScript libraries for adding offline support to web apps. | Google Developers |
| PWA Builder | Microsoft's tool for building and packaging PWAs. | PWA Builder |
| Title | Description | Link |
|---|---|---|
| The Odin Project | Full-stack curriculum teaching modern web development. | The Odin Project |
| freeCodeCamp | Free platform with comprehensive web development curriculum. | freeCodeCamp |
| MDN Web Docs | Comprehensive documentation for web technologies. | MDN |
| Web.dev | Google's resource for modern web development guidance. | Web.dev |
| Frontend Masters | Expert-led courses on frontend development. | Frontend Masters |
| Scrimba | Interactive coding courses with hands-on practice. | Scrimba |
| CSS-Tricks | Tips, tricks, and techniques on using CSS. | CSS-Tricks |
| JavaScript Weekly | Weekly newsletter with JavaScript news and articles. | JavaScript Weekly |
Feel free to contribute to this repository by submitting pull requests with new resources or corrections. When adding resources, please ensure they are:
- Up-to-date and actively maintained
- High-quality and well-regarded in the community
- Accessible and beginner-friendly where appropriate
- Properly categorized
If you find broken links or outdated content, please create an issue or submit a pull request with updates.
This repository is licensed under the CC BY-NC 4.0 License - see the LICENSE file for details.
Latest Update: Updated all links to current resources, added TypeScript section, expanded testing and security sections, added modern frameworks like Svelte and Solid.js, included PWA resources, and reorganized content for better navigation.