TodoList-Apps-Tutorials

TodoList Apps Tutorials

В процессе:

• • > 🔶 Todolist app 5 (v2) : Code | Demo
• • > [новые фичи: 1. Списки задач. 2. Сортировки по полям. 3. Поиск/фильтрация. 4. Вид списков: карточки. 5. Markdown notes. 6. Порядок списков через drag & drop?]
•

Готово:

• • > 🔶 Todolist app 6 (original) : Code | Demo
•
• ▶️ Vue js #13 Vue Todo list часть #1 создаем список дел • ( 🧑 Mario Dev • 👨‍👨‍👧 1,28K • 🕑 26:08 • 👁 1 167 • 📅 25 апр. 2020 )
• Особенности: Хорошо объясняет/комментирует; Отлично для начального туториала; Saas • Интересные фичи:
• ▶️ Vue js #14 Vue Todo list часть #2 localStorage, props, $emit • ( 🧑 Mario Dev • 👨‍👨‍👧 1,28K • 🕑 18:49 • 👁 643 • 📅 3 мая 2020 )
• Особенности: Хорошо объясняет/комментирует; Отлично для начального туториала; • Интересные фичи: localStorage

• • > 🔶 Todolist app 5 (original) : Code | Demo
•
• ▶️ Разбор задачи на собеседование по VueJS (создание SPA) • ( 🧑 Владилен Минин • 👨‍👨‍👧 136K • 🕑 1:20:17 • 👁 37 425 • 📅 30 апр. 2019 )
• Особенности: Vue-cli, npm, Vuex, router, materialize, localStorage.
• Интересные фичи: 1. Дата/срок задачи. 2. Статус (active, completed, outdated) с фильтрацией. 3. Теги. 4. Вывод части description. 5. Редактирование задачи на отдельной странице.

• • > 🔶 Todolist app 4 (original) : Code | Demo
•
• ▶️ Build Todo List App in Vue JS + Vuex • ( 🧑 neecoder x • 👨‍👨‍👧 1,5K • 🕑 17:21 • 👁 2 844 • 📅 12 июн. 2020 )
• Особенности: vue-cli, export/import components (.vue), vuex (state, mutations, actions, modules), bootstrap, babel
• Интересные фичи: 1. Редактирование заголовка задачи на месте через input (v-if, v-else h3/input)

• • > 🔶 Todolist app 3 (v2) : Code | Demo
• • > [новые фичи: 1. Завершённые задачи передвигаются вниз списка. 2. Счётчики задач для списков. 3. Редактирование названия и описания уже созданных задач (через promt и/или input/textarea). 4. Фильтр/поиск по задачам. 5. Добавление/удаление списков. 6. Смена порядка списков и задач.]
•
• • > 🔶 Todolist app 3 (original) : Code | Demo
•
• ▶️ Пишем список задач(todo list) на Vue.js • ( 🧑 Лукьянов Артём • 👨‍👨‍👧 1,1K • 🕑 27:05 • 👁 7 411 • 📅 28 апр 2019 )
• Особенности: Vue, Vue.component. • Интересные фичи: 1. Поле описания/description для задачи.

• • > 🔶 Todolist app 2 (v2) : Code | Mindmap Code | Demo
• • > [новые фичи: 1. Фон выполненной задачи помечается серым. 2. Счётчик всех и выполненных задач. 3. Подтверждение удаления. 4. Удаление всех выполненных/отмеченных задач.]
•
• • > 🔶 Todolist app 2 (original) : Code | Demo
•
• ▶️ [VUE.JS] TODO APP • ( 🧑 Edward Lance Lorilla LAB • 👨‍👨‍👧 3,61K • 🕑 10:55 • 👁 1 718 • 📅 6 окт 2016 )
• Особенности: Vue 1.0.12 • Интересные фичи: 1. Кнопка “Clear List”. 2. Кнопка “удаление задачи (Х)” появляется только при наведении мышью на строку задачи. 3. Общий чекбокс, отмечающий все задачи

• • > 🔶 Todolist app 1 (v2) : Code | Demo
• • > [новые фичи: 1. Корзина (удаление, восстановление). 2. Дата/время добавления задач.]
•
• • > 🔶 Todolist app 1 (original) : Code | Demo
•
• ▶️ ПРИЛОЖЕНИЕ на Vue 3 Делаем ToDo List с нуля на практике [2021] • ( 🧑 Анна Блок • 👨‍👨‍👧 53,4K • 🕑 30:12 • 👁 11 094 • 📅 2 фев 2021 )
• Особенности: Vue 3; Отлично для начального туториала

Структура подпроектов:

  1. Todolist app N - оригинальный код из пройденного туториала
  2. Todolist app N (v2) - доработка кода (см. чеклист нач. кодера) + пара новых фич + фича от заказчика + Code Review

Видеоинструкции:

Vue

• ▶️ Todo app (список задач) на Vue 3 + Composition API / Vue практика • ( 🧑 Лукьянов Артём • 👨‍👨‍👧 1,1K • 🕑 25:46 • 👁 3 132 • 📅 7 окт. 2020 )
• Особенности: Vue 3 + Composition API; хорошее объяснение/комментарии • Интересные фичи:

• ▶️ How to create a To-Do List Web App with Vue JS • ( 🧑 Webnoob • 👨‍👨‍👧 4,46K • 🕑 26:06 • 👁 3 982 • 📅 12 апр. 2019 )
• Особенности: стиль Wunderlist, .vue components • Интересные фичи: 1. Favorite status
• Github

• ▶️ Learn Vue - Build your first app - to-do list example - underpinning knowledge - vue js tutorial • ( 🧑 Very Academy • 👨‍👨‍👧 7,75K • 🕑 26:57 • 👁 446 • 📅 4 июн. 2020 )
• Особенности: Build and start a new vue project (npm); Bootstrap; Start the server; • Интересные фичи: local storage; hide completed;

• ▶️ To-Do List Application In Vue.JS With Source Code | Source Code & Projects
• Особенности: Демонстрация работы To-Do List App и ссылка на код • Интересные фичи: Возможность создавать несколько списков, оформленных в виде карточек.
• Код

• ▶️ VueJS Build A Todo App | Code On-The-Fly • ( 🧑 Liz Chow • 👨‍👨‍👧 356 • 🕑 16:47 • 👁 5 683 • 📅 18 сент. 2019 )
• Особенности: 🔥🔥🔥 • Интересные фичи: Несколько списков задач; мобильный интерфейс; процент завершённых задач в списке

• ▶️ Vuetify: Create an App with Vue JS - in 30 MINUTES! • ( 🧑 Make Apps with Danny • 👨‍👨‍👧 8,14K • 🕑 38:54 • 👁 20 713 • 📅 21 окт. 2020 )
• Особенности: 🔥🔥🔥🔥🔥 Vuetify (Material Framework) • Интересные фичи:

• ▶️ Build a Realtime Full-stack ToDo App in 15 Minutes with Vue, Vuetify, VueFire, and Firebase • ( 🧑 Diligent Dev • 👨‍👨‍👧 1,63K • 🕑 15:50 • 👁 3 858 • 📅 1 июн. 2020 )
• Особенности: Vue, Vuetify, VueFire, and Firebase • Интересные фичи:

• ▶️ Vue.js Todo App (playlist: 12 vids, ~6,5 hours)

• ▶️ №2 Создаем список задача (ToDo) на Vue, React, Svelte, Angular • ( 🧑 Archakov Blog • 👨‍👨‍👧 29,8K • 🕑 4:22:33 • 👁 4 872 • 📅 12 авг. 2020 )
• Особенности: Vue, React, Svelte, Angular • Интересные фичи:

• ▶️ Full Stack Todo List Tutorial using Vue.js & AdonisJs • ( 🧑 freeCodeCamp.org • 👨‍👨‍👧 3190K • 🕑 3:48:57 • 👁 45 034 • 📅 23 мая 2018 )
• Особенности: Vue.js, Full Stack, REST API, AdonisJs, register/login/auth, • Интересные фичи:

Angular
Angular 5 To Do List App Within 30 minutes
Angular Task List app using Firebase : Angular 2 and above
Angular To do list - explained
Angular Todo App - Basics - Part 1
Angular Todo App за 10 минут. Работаю с готовым backend на NestJs. Практика Ajax запросов
AngularJS : Create a ToDo App
Aprenda Angular 8 - Criando um TO-DO List - #12
Build Your First ANGULAR Web app ~ Beginner Angular Todo app
Creating a simple Todo List App in Angular
Full Tutorial Coding 4 Angular Apps in 8 Minutes! Todo App, Calculator, Quiz, and Weather
How to create todo List Using HTML , CSS & Angular(2020) | Product Todo-List using angular
To-do List with AngularJS and Local Storage
Todo App Tutorial with Angular 8 - In Hindi
Todo List App (Angular Beginner)
Todo List Tutorial - Angular 4 and Redux

React
14. Building a Todo List App in React - YouTube
5 Minute Coding Challenge | To Do List App | ReactJS
Build A Todo App With REACT | React Project For Beginners (FULL).
Build To Do App with React JS + Hooks + Redux
Build a Todo App with React Js | Using React Hooks
Building a React Todo App w/ Authentication - Redux & Firebase (playlist: 9 vids, ~10 hours)
Building a Todo List with React Hooks useState
Building a todolist with React (playlist)
Code your first React app | Beginner React app | To Do List
CodeLibrary #1 - Пишем приложение на React, Redux и Firebase
Coding a Todo List in React.js - Part 15
Complete React Tutorial (& Redux) #23 - Todo App (part 1)
Creating a Todo List App in React using Typescript (Part 1) How to Build a TODO app with React + Firebase (LIVE)
How to make an app - React Native Tutorial - Create a Todo App in 25 minutes
React & Redux #22 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part I)
React & Redux #23 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part II)
React & Redux #24 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part III)
React - Simple To Do List
React Project using Material UI Free Code: Create ToDo List App in React in Hindi in 2020 #45
React Todo List App Tutorial - Beginner React JS Project Using Hooks
React Todo на React, Redux и Firebase #1
React Todo на React, Redux и Firebase #2
React Todo на React, Redux и Firebase #3
React Todo на React, Redux и Firebase #4
React Todo на React, Redux и Firebase #5
React for Beginners - Build a Todo-List App
To Do App in React (Adding, Editing and Deleting items) | Deploy in Github for freeTutorial
Todo List React App | Part 1
Todo List React App | Part 2
Todo List with React, Node, and Express - Part 1
ПИШЕМ ПРОСТОЙ TODO LIST НА REACT ЗА 10 МИНУТ
Пишем TodoList на React
Пишем свой To-Do list с нуля на REACT JS
Пишем список задач(todo app) на React
Разработка списка задача на ReactJS (ToDo) #1

Vanila JS
Awesome Todo List Using HTML & CSS & JavaScript (2020)
Beginner Vanilla Javascript Project Tutorial
Building A Vanilla JavaScript Todo App From Start To Finish | EP 1: Introduction & Project Setup
Building A Vanilla JavaScript Todo App From Start To Finish | EP 4: Adding Todos
Building a TODO list with Vanilla JS - LIVE class recording at Coding Bootcamp
Create a to do list app using JavaScript
Creating a better todo app - the HTML and CSS - YouTube
How To Code :: Javascript :: Todo App
How to Code A Better To-Do List - Tutorial
How to Make a To-Do List using HTML CSS JavaScript (2020)
How to create a todo list in javascript | Hindi | Javascript Mini Project
JavaScript BookList App | No Frameworks
JavaScript Tutorial TO-DO List App
Learn to code a to-do list app in JavaScript - Part 1
Let’s make a TO DO LIST using Javascript
Making a ToDo List app with Local Storage!
Minimal To-do List using HTML CSS & Javascript | CodingNepal
Reactive Todo App in Vanilla JS | Intermediate Tutorial
To Do List App in JavaScript beginners
To Do List app in JavaScript for beginners
To Do List | Javascript Beginner Project Tutorial
To Do list using css and javascript
To-do List App - JavaScript Tutorial for Beginners
ToDo List - Vanilla JavaScript
ToDo List на JavaScript
ToDo Today Web App - Reviewing and Making Tutorial - Vanilla JavaScript Project - YouTube
Todo App With Vanilla JS | Separate list for every user | Using Firebase Auth & Firebase Firestore
Todo List application in JavaScript 2020 || CRUD operation in Javascript || Uses of local storage
Todo List App in JavaScript | JavaScript Project | How to create a todo list in Vanilla JavaScript.
Todo List App using HTML CSS & JavaScript | Todo List in JavaScript
Todo List Using HTML & CSS & JavaScript
Todolist with Vanilla JavaScript & Local Storage - Speed Coding - YouTube
Vanilla JS todo App
Vanilla JavaScript Todo App - YouTube (playlist)
Интенсив JS: Todo приложение 1-й день
Интенсив JS: Todo приложение 2-й день
Интенсив JS: Todo приложение 3-й день
Как просто создать to do list на JavaScript [GeekBrains]
Пишем на javascript простой todo list
Пишем приложение на голом JS с авторизацией без фреймворков
Практика JavaScript — пишем туду лист на JavaScript | Уроки для новичков
Создаём свой To Do List на чистом JavaScript
Создание приложения на JavaScript, Часть 1
Список дел | Todo list | vanilla javascript
Учим JavaScript 33. Создаем ToDo список дел
Практика JavaScript. Задача #2. ToDo List.
Уроки JavaScript Практика #17 To Do приложение на js

Other Frameworks
Svelte v3 - Basics - Todo App

Node.JS
Youtube search: node js

Blazor (.NET Core)
Youtube search: todo Blazor

Drag & Drop
Drag & Drop With Vanilla JS
Drag and Drop Todo List Using Vuejs & Firebase Part 1 (playlist)
Easy Drag n Drop with JavaScript - how to code tutorial
Todo App + Drag&Drop in Vanilla JS

Notes app
Creating the UI (Angular) - [2] Build a Notes App w/ Angular
Create notes app in plain Javascript
Youtube search: notes javascript
Youtube search: notes js
Youtube search: notes react
Youtube search: notes angular
Youtube search: notes vue

OutLiners
SuperCool Outliner
Outliner Alpha

Android / Mobile
Android. Пишем приложение - список дел, с использованием архитектурных компонентов от Google.
How To Code Your First Mobile App Using Vue Native

ASP.NET
ASP.NET Core 3 CRUD Project - TO DO list

Search projects
codepen.io : todo
codepen.io : notes
codepen.io : mindmap
github.com : todo
github.com : note taking
github.com : outliner
github.com : mindmap
sourceforge.net : notes
sourceforge.net : outliner
sourceforge.net : todo
sourceforge.net : mindmap
code-projects.org : js

GitHub projects vuetify-todo-pwa

Малополезные, дублирующие туториалы (мусорка)

Build a todo list with VueJS in 15 minutes
Code your first VUE JS App | Coding for Beginners | To Do List
Create A Todo List Using HTML, CSS And Vue js
Creating To-Do List Application with Using Materialize CSS and Vue.js
• ▶️ Intro to Vue.js: Build a Todo App • ( 🧑 Coding Garden • 👨‍👨‍👧 103K • 🕑 18:51 • 👁 22 704 • 📅 26 апр. 2018 ) • Особенности: Хорошая подача. Отлично для начального туториала • Интересные фичи: 1. Отметить все • Github ~~
~~Vue.js Todo Task List App Tutorial
(Arabic) Vue.js Tutorials - How To Create To-Do List
Уроки Vue js практика - Task list
• ▶️ Learn To Build A Vue.js Todo App With Local Storage Part 1 ( 🧑 Program With Erik • 👨‍👨‍👧 62,7K • 🕑 14:11 • 👁 12 620 • 📅 30 авг. 2017 )
• ▶️ Build A Vue.js App Using Local Storage Part 2 ( 🧑 Program With Erik • 👨‍👨‍👧 62,7K • 🕑 13:25 • 👁 7 759 • 📅 6 сент. 2017 )
• ▶️ Learn To Build A Vue.js Todo App With Local Storage Part 3 ( 🧑 Program With Erik • 👨‍👨‍👧 62,7K • 🕑 11:30 • 👁 2 651 • 📅 13 сент. 2017 )

Шаблоны:

• • > [14/02] 🔶 Todolist app x (origin) : Code | Demo
•
• ▶️ xxxxxxxxxxxxx • ( 🧑 Channel • 👨‍👨‍👧 0000K • 🕑 00:00 • 👁 000000 • 📅 6 окт 2016 )
• Особенности: • Интересные фичи:

Внедрённые фичи

Будущие фичи

Чеклист начинающего кодера