Here's a repository for storing my notes of learning the full stack knowledges as a web developer in 100 Days.
Web development is something what I want to try and mastery for a long time, here I'll learn the basis of building a website with HTML
, CSS
and Javascript
. Then the knowledge of backend with node.js
/ express.js
, to host a server for handling requests and functions like routing, sessions, authentication, and many others. Most importantly, how to interact with the database and not only SQL server but NoSQL as well. At the end, I wish I could finish a real life project that functional in backend as well as a proper CSS styling.
Day | Content | Notes | Finish Date |
---|---|---|---|
Day 1 | Get to know how Website works | Link | 8 May 2022 |
Day 2 | Set up a proper local development environment and a bit HTML | Link | 9 May 2022 |
Day 3 | Dive deeper into CSS and HTML - Styling | Link | 10 May 2022 |
Day 4 | Basic CSS Styling - Pseudo Selector, ID Selector | Link | 11 May 2022 |
Day 5 | More HTML Structure and share CSS File | Link | 12 May 2022 |
Day 6 | Live Server, Container, Inheritance and Lists | Link | 13 May 2022 |
Day 7 | CSS Box Model and Class | Link | 14 May 2022 |
Day 8 | Inline vs Block element and Margin Collapsing | Link | 15 May 2022 |
Day 9 | Finish Task 1 to solidate previous knowledge | Link | 16 May 2022 |
Day 10 | Website Favicon and Introduction of Git | Link | 17 May 2022 |
Day 11 | Basic Concepts and Operations of Git | Link | 18 May 2022 |
Day 12 | Git Operation: Branch, Merge, Delete, Revert | Link | 19 May 2022 |
Day 13 | Git Concept: Clone, Collaboration, Contributing | Link | 20 May 2022 |
Day 14 | Self-Work: Layout of a Book Editing System | Link | 21 May 2022 |
Day 15 | Basic concept to CSS Flexbox | Link | 22 May 2022 |
Day 16 | Intro to CSS Document Flow and Positioning | Link | 23 May 2022 |
Day 17 | Units-%, Image object-fit, Flex Container with grow, basis and shrink | Link | 24 May 2022 |
Day 18 | More on Margin Collapsing, Linear Gradient Function | Link | 25 May 2022 |
Day 19 | Introduction to CSS Grid and nth-of-type pseudo-class | Link | 26 May 2022 |
Day 20 | Finished Project-2 and Introduce Responsive Design | Link | 27 May 2022 |
Day 21 | Problems with Pixels and Intro to other Units | Link | 28 May 2022 |
Day 22 | Differences between Sizing Units and Media Query | Link | 29 May 2022 |
Day 23 | Implementing Media Query, Learn internal link & Target Selector | Link | 30 May 2022 |
Day 24 | CSS Target Selector, z-index, finish Task-2 | Link | 31 May 2022 |
Day 25 | CSS Variables, Transformation, Transition, SVG | Link | 1 June 2022 |
Day 26 | HTML Form attribute, Radio & Button | Link | 2 June 2022 |
Day 27 | HTML Form label & Input, Styling form and input | Link | 3 June 2022 |
Day 28 | Form Validation, Boolean Attributes, Common Attributes for inputs | Link | 4 June 2022 |
Day 29 | Finish Task-4, Intro to JavaScript Variables | Link | 5 June 2022 |
Day 30 | JavaScript Data Type: String, Array, Object | Link | 6 June 2022 |
Day 31 | JavaScript Backtick String, Object Property Accessor, Function | Link | 7 June 2022 |
Day 32 | JavaScript Methods, Operators, Console Log | Link | 8 June 2022 |
Day 33 | JavaScript DOM, Global Window Object, Document Object | Link | 9 June 2022 |
Day 34 | JavaScript DOM Tree & Traversal, Nodes and Elements, Query | Link | 10 June 2022 |
Day 35 | JavaScript DOM Insert, Delete, Move Elment, Event Listener | Link | 11 June 2022 |
Day 36 | JavaScript Constant, Styling, CSS Class, Finish Task-5 | Link | 12 June 2022 |
Day 37 | JavaScript Boolean, Control Structures, Triple Equals | Link | 13 June 2022 |
Day 38 | JavaScript Boolean, Looping Statement, for-in/of, while | Link | 14 June 2022 |
Day 39 | JavaScript Lexical Scope, Closure | Link | 15 June 2022 |
Day 40 | JavaScript Project-3, Basic Structure of HTML, Basic CSS | Link | 16 June 2022 |
Day 41 | JavaScript Project-3, Click Evenlistener for styling | Link | 17 June 2022 |
Day 42 | JavaScript Project-3, JS FormData Object, HTML data-* | Link | 18 June 2022 |
Day 43 | JavaScript Project-3, JS Tag Name, EventListener on elements | Link | 19 June 2022 |
Day 44 | JavaScript Finished Project-3 | Link | 20 June 2022 |
Day 45 | Third-Party Package / Library for CSS and JavaScript, Bootstrap | Link | 21 June 2022 |
Day 46 | Intro to Backend, Fullstack, NodeJS, Static & Dynamic Website | Link | 22 June 2022 |
Day 47 | NodeJS executing and Setup a Server ( Requests & Responds ) | Link | 23 June 2022 |
Day 48 | NodeJS Third-Party Package, Express.js, Parse and Store data | Link | 24 June 2022 |
Day 49 | NodeJS using nodemon to auto restart node server | Link | 25 June 2022 |
Day 50 | NodeJS EJS template engine, Serving Static file | Link | 26 June 2022 |
Day 51 | ExpressJS Include Partial Content, Dynamic Routes, UUID | Link | 27 June 2022 |
Day 52 | ExpressJS 404, 500 Pages, Handling Status Code | Link | 28 June 2022 |
Day 53 | ExpressJS Splitting Files, Router, Query & Route Parameters | Link | 29 June 2022 |
Day 54 | JavaScript Rest Parameters, Spread Operator, Primitive & Reference | Link | 30 June 2022 |
Day 55 | JavaScript Error Handling, Class, Array & Object Destructuring | Link | 1 July 2022 |
Day 56 | JavaScript Callbacks, Promises, Async Await Error Handling | Link | 2 July 2022 |
Day 57 | Database DBMS, RDBMS, Non RDBMS, MySQL | Link | 3 July 2022 |
Day 58 | Database Table Properties, Insert, Select, Update, Delete | Link | 4 July 2022 |
Day 59 | Database Complex DB Structures, ERD, JOIN Tables, Filtering | Link | 5 July 2022 |
Day 60 | Database Project-4 -> Blog Website | Link | 6 July 2022 |
Day 61 | Database Project-4 -> Fetch data, INSERT POST request data | Link | 7 July 2022 |
Day 62 | Database Project-4 -> Update & Delete data, toLocaleDateString | Link | 8 July 2022 |
Day 63 | NoSQL, MongoDB, Create DB, Inserting data | Link | 9 July 2022 |
Day 64 | MongoDB, Read, Filtering, Update & Delete Documents, Projection | Link | 10 July 2022 |
Day 65 | MongoDB version of Project-4, inserting documents | Link | 11 July 2022 |
Day 66 | Finished Project-4, Read, Update & Delete Documents | Link | 12 July 2022 |
Day 67 | Image Picker -> HTML, Node.js/Express, Javascript | Link | 13 July 2022 |
Day 68 | AJAX, XMLHttpRequest, Fetch | Link | 14 July 2022 |
Day 69 | AJAX, GET & POST Requests with JSON data | Link | 15 July 2022 |
Day 70 | AJAX, Improved Project-4, Details on Comments, Error Handling | Link | 16 July 2022 |
Day 71 | Authentication, User login & logout, Validating input, Project-5 | Link | 17 July 2022 |
Day 72 | Authentication, Cookies & Sessions, stores temporary data | Link | 18 July 2022 |
Day 73 | Authorization, Custom Middleware, res.locals property in templates | Link | 19 July 2022 |
Day 74 | Web Security, CSRF Attacks, CSRF Token, XSS Attacks | Link | 20 July 2022 |
Day 75 | Web Security, SQL Injection, Code Refactoring Concepts & Methods | Link | 21 July 2022 |
Day 76 | MVC architecture, Model Component for Data manipulate with DB | Link | 22 July 2022 |
Day 77 | MVC, Controller actions, CSRF & Route Protecting Middleware | Link | 23 July 2022 |
Day 78 | Node Final Project - Online Shop, Initialization, Project Structure | Link | 24 July 2022 |
Day 79 | Final Project, EJS Template Engine, Static files, CSS Variables | Link | 25 July 2022 |
Day 80 | Final Project, CSS Styling, Config and Connect to Database | Link | 26 July 2022 |
Day 81 | Final Project, User Model, Encrypt Password, CSRF Middleware | Link | 27 July 2022 |
Day 82 | Final Project, Authentication Session & Middleware, Validation | Link | 28 July 2022 |
Day 83 | Final Project, Caching w/ Session, Check Admin, Styling Navigation | Link | 29 July 2022 |
Day 84 | Final Project, Responsive Website Design, Mobile Menu Toggle | Link | 30 July 2022 |
Day 85 | Final Project, Admin Routes, Styling, Upload Image, Multer & Csurf | Link | 31 July 2022 |
Day 86 | Final Project, Styling Product card, Managing w Model, Controller | Link | 1 Aug 2022 |
Day 87 | Final Project, Image Preview, Delete Request for Product, AJAX | Link | 2 Aug 2022 |
Day 88 | Final Project, Protect Routes, Error Handling, Get Products & Details | Link | 3 Aug 2022 |
Day 89 | Final Project, Cart styleing Badge, Model, Middleware, Controller | Link | 4 Aug 2022 |
Day 90 | Final Project, Styling, Update Cart Items, MVC, Ready for AJAX | Link | 5 Aug 2022 |
Day 91 | Final Project, Working on Orders MVC, Status of all the Orders | Link | 6 Aug 2022 |
Day 92 | Final Project, Finsh the Project, Order MVC, AJAX update view | Link | 7 Aug 2022 |
Day 93 | Services & APIs, Stripe, add Stripe API to the Final Project | Link | 8 Aug 2022 |
Day 94 | Deploy Website, Static & Dynamic, Database Server, Testing, SEO | Link | 9 Aug 2022 |
Day 95 | Deploy Website, Optimize Website Performance, APIs, Services | Link | 10 Aug 2022 |
Day 96 | RESTful API, Build a simple GET Request RESTful API | Link | 11 Aug 2022 |
Day 97 | Complex REST API, Decoupled Web Architecture, Configure CORS | Link | 12 Aug 2022 |
Day 98 | Frontend JavaScript Frameworks, Vue.js, String Interpolation | Link | 13 Aug 2022 |
Day 99 | Vue.js, Directives, Events Handling, List Rendering, Conditioning | Link | 14 Aug 2022 |
Day 100 | Last day of the process, An Overview and Rewind on what I've learn | Link | 15 Aug 2022 |