SumitK27 / 100-Days-of-Code-Web-Dev

Journey of my #100DaysOfCode Challenge through Academind

Time spent on the Repo:

Table of Content

1. Day 1
2. Day 2
3. Day 3
4. Day 4
5. Day 5
6. Day 6
7. Day 7
8. Day 8
9. Day 9
10. Day 10
11. Day 11
12. Day 12
13. Day 13
14. Day 14
15. Day 15
16. Day 16
17. Day 17
18. Day 18
19. Day 19
20. Day 20
21. Day 21
22. Day 22
23. Day 23
24. Day 24
25. Day 25
26. Day 26
27. Day 27
28. Day 28
29. Day 29
30. Day 30
31. Day 31
32. Day 32
33. Day 33
34. Day 34
35. Day 35
36. Day 36
37. Day 37
38. Day 38
39. Day 39
40. Day 40
41. Day 41
42. Day 42
43. Day 43
44. Day 44
45. Day 45
46. Day 46
47. Day 47
48. Day 48
49. Day 49
50. Day 50
51. Day 51
52. Day 52
53. Day 53
54. Day 54
55. Day 55
56. Day 56
57. Day 57
58. Day 58
59. Day 59
60. Day 60
61. Day 61
62. Day 62
63. Day 63
64. Day 64
65. Day 65
66. Day 66
67. Day 67
68. Day 68
69. Day 69
70. Day 70
71. Day 71
72. Day 72
73. Day 73
74. Day 74
75. Day 75
76. Day 76
77. Day 77
78. Day 78
79. Day 79
80. Day 80
81. Day 81
82. Day 82
83. Day 83
84. Day 84

Day 1

Navigate to Day 1

• What is Web Development?
• How does the Web works
• What is a URL
• What is DNS
• Three Key Programming Languages
• Creating very First HTML Page

Day 2

Navigate to Day 2

• Setting up the environment for Web Development.
• HTML Element, Tags and Attributes.
• Started with CSS (Inline styling)

Day 3

Navigate to Day 3

• Colors in CSS
• Code Formatting
• Developer Tools
• Adding Links to external resources
• Nesting Elements
• CSS Rules
• Structure of HTML
• History of HTML (versions)

Day 4

Navigate to Day 4

• Overwriting Default CSS Rules
• Using CSS Pseudo Selector
• External CSS File
• Void Elements
• How Browser Handles Multiple Requests
• Using CSS ID Selectors
• Different Size Units in CSS
• Using External Fonts

Day 5

Navigate to Day 5

• Adding images to the webpage.
• Styling Images.
• Adding Background Overlay.
• Linking different pages.
• Sharing the CSS files across multiple pages.
• Organizing your project.

Day 6

Navigate to Day 6

• Using Lists.
• Types of Lists.
• Comments.
• Ordering of CSS Rules.
  • Inheritance.
  • Cascading.
  • Specificity.

Day 7

Navigate to Day 7

• CSS Box Model
  • Content
  • Padding
  • Border
  • Margin
• Adding Structure to a Web Page
  • Header
  • Main
  • Footer
• Selectors
  • Type Selector
  • ID Selector
  • Class Selector
  • Group Selector
• Combinators
  • Descendant Combinator
  • Child Combinator
• Block Elements
• Inline Elements

Day 8

Navigate to Day 8

• Limitations with Inline Elements
• Display Property
  • Block
    • Margin Collapsing
  • Inline-Block
• Box Shadow Property
• Non Semantic Elements
  • Span
  • Div
• Inline Element Types
  • Replaced Inline Elements
  • Non Replace Inline Elements

Day 9

Navigate to Day 9

• Refer to an image and create an identical webpage.

Day 10

Navigate to Day 10

• Refer to an image and create an identical webpage.
• Target Attribute of the Anchor tag
• Making Text Bold
  • Using CSS
  • B tag
  • EM tag
  • Strong tag

Day 11

Navigate to Day 11

• Deploying
• Hosting
  • Hosting a Static Site
• Favicon
  • Generating a Favicon
  • Adding a Favicon
• Paths
  • Relative Paths
  • Absolute Paths
• What is Version Management/Control?
  • Git
  • GitHub
• Interaction with Computers
  • GUI
  • CLI

Day 12

Navigate to Day 12

• Interacting with CLI (Command Line Interface)
  • MacOS
    • Show the current directory path
    • Show All files in a directory
    • Changing the directory
    • Clearing your Terminal output
    • Creating a Folder/Directory
    • Creating a File
    • Deleting Files and Folders
  • Windows
    • Show All files in a directory
    • Changing the directory
    • Clearing your Terminal output
    • Creating a Folder/Directory
    • Creating a File
    • Read a File
    • Deleting Files and Folders
• Installing Git
  • MacOS
  • Windows
• Git Basics
  • Repository
    • Initializing Git
    • Status
    • Staging
      • Individual files
      • Multiple files
    • Commit
      • First Commit
      • Commit after modification & creation of file
    • Git Config
      • Edit Git Configs for a System
      • Getting User Name
      • Updating User Name
      • Getting Email
      • Updating Email
    • Git Logs
  • Branch

Day 13

Navigate to Day 13

• Branch
  • Get the current branch
  • Get all the branches
  • Rename a branch
  • Creating a branch
  • Merging branches
    • Merge Conflict
  • Deleting files
    • Manual deletion
    • Delete by Git
  • Deleting Branches
  • Deleting Commits
  • Revert Staged Changes
  • Revert Un-staged Changes
• Why to use GitHub?
  • As a Single User
  • As a Team
• Creating a GitHub Account
• Connecting Git with GitHub
  • Create a New Remote Repository
  • Adding your Local Repository to the Remote Repository.

Day 14

Navigate to Day 14

• Local Repository => Remote Repository
  • Creating Personal Access Token
  • Using the token
  • Push Local Repo to GitHub
  • Erasing the GitHub Credentials
  • Pre-requisite for Cloning Repository
• Remote Repository => Local Repository
  • Cloning a remote repository
  • Modifying Repository
• Collaboration
  • Create a Private Repository
  • Adding a Collaborator
  • Collaborator Side
  • Fetching Updated Repository
• Contribution
  • Pre-requisite
  • Contributing to Someone's Project
  • Owner's side
• Summary

Day 15

Navigate to Day 15

• Nav
• Text Properties
  • Text Align
  • Text Decoration
  • Text Transform
  • Text Shadow
• CSS Flexbox
  • Display
  • Flex Direction
  • Flex Wrap
  • Flex Flow
  • Align Items
  • Justify Content

Day 16

Navigate to Day 16

• Background Properties
  • Background Image
  • Background Position
  • Background Size
• Document Positioning
  • Static
  • Relative
  • Absolute
  • Fixed

Day 17

Navigate to Day 17

• CSS Unit
  • Percentage
• Box Sizing
  • Content Box
  • Border Box
• Object Fit
  • Fill
  • Contain
  • Cover

Day 18

Navigate to Day 18

• CSS Function
  • Linear Gradient

Day 19

Navigate to Day 19

• Overflow
  • Visible
  • Hidden
• CSS Grid
  • Display Grid
  • Grid Template Columns
    • Using Pixels
    • Using Fraction
  • Gap
  • Grid Column
• CSS Pseudo Selector
  • First of Type
  • Nth Type

Day 20

Navigate to Day 20

• Working with Unicode
  • Unicode
  • UTF-8
  • Adding a Character
• Responsive Design

Day 21

Navigate to Day 21

• Responsive Design
• CSS Units
  • Pixels (px)
  • Percentages (%)
  • Emphemeral Unit (em)
  • Root Emphemeral Unit (rem)
  • Difference Between Units

Day 22

Navigate to Day 22

• Percentage vs EM vs REM
  • Percentage
  • EM
  • REM
• Desktop First Design vs Mobile First Design
  • Desktop First Design
  • Mobile First Design
• Media Query
  • Common Breakpoints
    • Portrait
    • Landscape

Day 23

Navigate to Day 23

• Media Queries
• Side Drawer
  • Structure
  • Internal Links
  • Target Selector

Day 24

Navigate to Day 24

• Things to Remember
  • Step-by-step Features
  • Think the Core Information
  • Less is More
• Sizing & Spacing
• Right Font
  • Font Family
  • Font Size
  • Font Weight
• Colors
  • Grey
  • Primary Color
  • Accent

Day 25

Navigate to Day 25

• CSS Variables / Custom Properties
• Root vs Html vs Selectors
  • html
  • :root
  • *
• CSS Transformation
• CSS Transition
• Using SVGs

Day 26

Navigate to Day 26

• Forms
  • What & Why?
  • Examples of Forms
• HTML Elements
  • Input
  • Textarea
  • Select
  • Button
  • Using Forms
• Types of Requests
  • GET
  • POST

Day 27

Navigate to Day 27

• Styling Inputs
• Label
• Types of Inputs
  • Text
  • Email
  • Number
  • Password
  • Date
  • Radio
  • Checkbox
  • File
  • Other Types of Inputs

Day 28

Navigate to Day 28

• More on Inputs
  • Checkbox
    • Single Select
    • Multi-select
  • Text Area
  • Dropdown
• Adding Semantics to the Form
• Buttons
• Validation Attributes
  • Excluding Form Validations
  • Required Field
  • Length
    • Min Length
    • Max Length
  • Value
    • Min
    • Max
• Other Attributes
  • Placeholder
  • Rows
  • Resizing Textarea

Day 29

Navigate to Day 29

• HTML Form Challenge with Validation
• What is JavaScript
• Why JavaScript
• JavaScript Applications & Use-Cases
• Core Features
  • Values
    • String (Text)
    • Numbers
    • Other types
  • Variables

Day 30

Navigate to Day 30

• Adding JavaScript to HTML
  • Inside Head
  • Inside Body
  • External JavaScript File
• Values
  • Strings
  • Numbers
  • Arrays
  • Objects
• Variables
  • let
• Syntax & Conventions

Day 31

Navigate to Day 31

• Operations
  • Addition
  • Subtraction
  • Multiplication
  • Division
• Function
  • Scope
  • Return
  • Parameters
• Exercise

Day 32

Navigate to Day 32

• Console Log
• Methods
• Math Operations
  • Addition
  • Subtracting
  • Multiplication
  • Division
  • Modulus
  • Rules
• Shorthand Operations
  • Increment
  • Decrement
  • Addition
  • Subtraction
  • Multiplication
  • Division
• String Operations
  • Concatenation
  • Length
  • Upper Case
  • Lower Case
  • Character At

Day 33

Navigate to Day 33

• Array Operations
• Global Objects
  • Window
  • Document
• DOM
• Traversing Document Tree
  • HTML Document
  • DOM Tree Structure
  • JavaScript
    • Drilling into Elements
    • Query Elements

Day 34

Navigate to Day 34

• Selecting first child element
  • Index
  • firstChild
  • firstElementChild
  • Child Node
• Ways of Selecting Elements
  • getElementById
  • querySelector
  • querySelectorAll
• Exercise
• Adding an Element
  • Create a New Element
  • Getting a parent element
  • Appending the new element to the parent

Day 35

Navigate to Day 35

• Remove an Element
• Move an Element
• InnerHTML
• Events
  • Click Event
  • Input Event
  • Other Events
  • Event Object

Day 36

Navigate to Day 36

• Variables
• Constants
• Styling with JavaScript
  • Text Align
  • Font Size
  • Color
  • Background Color
  • Class Name
  • Class List

Day 37

Navigate to Day 37

• Exercise on DOM
• Control Structures
• Boolean Values
• Types of Operators
  • Math
  • Concatenation
  • Comparison
    • Equality
    • Greater/Lesser
    • Negation
  • Logical
    • &&
    • ||
• Types of Control Structures
  • Conditions
    • If
  • Loops

Day 38

Navigate to Day 38

• Types of Control Structures
  • Conditions
    • If
    • If Else
    • If Else If
  • Loops
    • For
    • For of
    • For in
    • While
• Truthy & Falsy Value
  • String
  • Numeric
  • Boolean

Day 39

Navigate to Day 39

• For Loop
• For In Loop
• For Of Loop
• While Loop
• Select Elements using Query Selectors and IDs
• Event Listeners
• Accessing Input Values
• Working with Arrays and Objects
• Checking Conditions
• Creating and Adding HTML elements
• Using Math Object
• Modifying Styles using JavaScript

Day 40

Navigate to Day 40

• Started with Tic-Tac-Toe as a Milestone Project
• Completed the UI

Day 41

Navigate to Day 41

• Toggling the config overlay form.

Day 42

Navigate to Day 42

• Preventing Default behavior of form submission.
• Using FormData object.
• Working with data properties.
• Completed player configuration section.

Day 43

Navigate to Day 43

• Verify if usernames are valid before starting a new game.
• Displaying game board only after starting a game.
• Switching turns and notifying the user.
• Avoid selecting a selected block.
• Storing the game progress.
• Working with two-dimensional arrays.

Day 44

Navigate to Day 44

• Adding winning and draw logic.
• Checking for the winning player.
• Displaying a message for winning and draw state.
• Ending the current game.
• Adding Reset Logic.
• Avoid selection after the game has ended.

Day 45

Navigate to Day 45

• Third Party Packages
  • What?
  • When & Why?
• Third Party Package Example
  • CSS
  • JavaScript
• Third-Party vs Custom Code
• Bootstrap
  • Starting with Bootstrap
• Parallax
  • Adding Parallax Effect

Day 46

Navigate to Day 46

• Backend
  • What?
  • Why?
  • Browser Instructions
  • Frontend vs Backend
    • Frontend
    • Backend
  • Languages
• NodeJS

Day 47

Navigate to Day 47

• Command Line
• NodeJS
  • What is NodeJS
  • Installing NodeJS
  • Writing NodeJS Code
  • Custom NodeJS Server
  • Different responses based on Routes

Day 48

Navigate to Day 48

• NPM
• ExpressJS
  • Installing Express
  • NodeJS vs ExpressJS Code
  • Parsing User Data
  • File Manipulation

Day 49

Navigate to Day 49

• Dynamic HTML Pages with NodeJS
• NODEMON
• Migrating Static HTML to Express Pages
  • Serve Static Pages
  • Adding Styles and Scripts to our Pages

Day 50

Navigate to Day 50

• Handling Form Inputs
• HTML Templates
  • Installing EJS
  • Adding EJS to your Express app
  • Converting HTML to EJS
  • Adding Dynamic Data to EJS files
  • Passing Data to inject in Template
  • Conditional Rendering

Day 51

Navigate to Day 51

• Partial Includes
  • Static Data
  • Dynamic Data
• Dynamic Routes
  • Adding Unique IDs
  • Passing Dynamic Data
  • Accessing Data

Day 52

Navigate to Day 52

• Error Handling (Routes/Middleware)
  • 404
    • Specific Use case
    • General Use case (Custom Middleware)
  • 500
• Refactoring Code

Day 53

Navigate to Day 53

• Splitting Routes
• Using Query Parameters

Day 54

Navigate to Day 54

• Functions
  • No Parameter
  • With Parameter
  • Default Parameter
• Operators
  • Rest
  • Spread
• Functions are Objects
• Template Literal
• Primitive vs Reference Values
  • Primitive Values
  • Reference Values

Day 55

Navigate to Day 55

• Error Handling
• Scoping & Shadowing
  • Scoping
  • Shadowing
• Classes and Objects
• Destructuring
  • Array
  • Object

Day 56

Navigate to Day 56

• Synchronous
• Asynchronous
  • Callback Hell
  • Promise
  • Error Handling
  • Async-Await
• Database
  • Need?
  • Types

Day 57

Navigate to Day 57

• Introduction
  • SQL Databases
  • NoSQL Databases
  • SQL vs NoSQL
• SQL Databases
  • What?
  • Setting Up
    • Installation
    • Start/Stop the Server
    • Usage
  • Database Systems vs Databases
  • Creating Schema

Day 58

Navigate to Day 58

• Tables
  • Create Table
  • Adding Fields
  • Inserting Data
  • Display Data
    • Select All
    • Select specific Columns
    • Select Conditionally
  • Update Data
  • Delete Data
  • Delete Table
• Aggregate Functions
  • Count
  • Sum
  • Average
• Complex Structure

Day 59

Navigate to Day 59

• Foreign Key
• Default Values
• Inserting Related Data
• Joining Related Data
• Alias
• Relation Types
  • One to One
  • One to Many
  • Many to Many

Day 60

Navigate to Day 60

• Why Connect the Database on the Backend?
• Using MySQL with NodeJS: Blog
  • Creating Database Schema
  • Inserting Initial Sample Data
  • Creating Routes

Day 61

Navigate to Day 61

• Connecting With Database
  • Installing Package
  • Database Connectivity
  • Getting Data
  • Storing Data

Day 62

Navigate to Day 62

• Displaying Data
• Format Data
• Update Data
• Deleted Data

Day 63

Navigate to Day 63

• NoSQL Introduction
• Installation
  • MongoDB Server
  • Testing the Installation
  • MongoDB Shell
• Using MongoDB
  • Creating Database
  • Inserting Data

Day 64

Navigate to Day 64

• Reading
  • All Documents
  • Filter Documents
  • Specific Field
  • One Document
• Updating
  • One Document
  • All Documents
• Delete
  • One Document
  • All Documents
• Operators
  • Arithmetic Operators
  • Logical Operator
• Database Planning
  • Types
  • Restaurants
  • Reviews

Day 65

Navigate to Day 65

• Creating Blogs Website
  • Planning Database
  • Creating Database Structure
  • Connecting to Database
  • Fetching Data
  • Inserting Data

Day 66

Navigate to Day 66

• Creating Blogs Website
  • Fetching Posts
  • Fetch Individual Post
  • Updating Post
  • Delete Post
  • Error Handling

Day 67

Navigate to Day 67

• Two Sides of File Uploading
  • Client-Side
    • Input Type
    • Form
  • Server-Side
    • Parsing Incoming File
    • Storing Files
    • File Storage with Custom Config

Day 68

Navigate to Day 68

• File Uploading
  • Server-Side
    • Storing File Path
    • Serving Files
  • Client-Side
    • Adding File Preview
• XML
• JSON
• Ajax
  • What?
    • XMLHttpRequest
    • fetch()
  • Why?
    • Without AJAX
    • With AJAX

Day 69

Navigate to Day 69

• AJAX Requests
  • Server-Side Changes
  • GET Request
  • POST Request
  • Error Handling
    • Server-Side Error
    • Client-Side Error
• HTTP Methods
  • GET
  • POST
  • PUT
  • PATCH
  • DELETE

Day 70

Navigate to Day 70

• What is Authentication?
• User Sign Up
• Encrypting Passwords

Day 71

Navigate to Day 71

• User Sign In
• Adding Sign Up Validation
• Sessions & Cookies

Day 72

Navigate to Day 72

• Storing Sessions
• Checking Session
• Clear Session
• Storing Data Temporary in Sessions

Day 73

Navigate to Day 73

• Authentication
• Authorization
• Adding Authorization
• Passing Data Globally

Day 74

Navigate to Day 74

• Authentication vs Security
• Attack Patters
  • CSRF Attacks
    • Implementation
    • Same-Site Cookie
    • Protection
  • XSS Attacks
    • Implementation
    • Protection
      • Escaping
      • Sanitizing

Day 75

Navigate to Day 75

• SQL Injection
  • Implementation
  • Protection
• NoSQL Injection
• Server-side mistakes to avoid
  • Static Files
  • Errors
• Refactoring

Day 76

Navigate to Day 76

• Clean Code
• MVC Pattern
  • Model
  • View
  • Controller
• Creating Model

Day 77

Navigate to Day 77

• Adding Controller
• Refactoring Controllers
• Problems with Asynchronous Functions
• Route Protection

Day 78

Navigate to Day 78

• Project Planning
  • Views
  • Models
• Project Structure
• Installing Dependencies

Day 79

Navigate to Day 79

• Installing EJS
• Creating Views
• Importing EJS in Express App
• Serving EJS files as response
• Serving Static Content
• Defining CSS Variables

Day 80

Navigate to Day 80

• Using CSS Variables
• Styling Form Elements
• Setting Database Connection

Day 81

Navigate to Day 81

• User SignUp
• CSRF Protection
• Error Handling
• Configuring Session

Day 82

Navigate to Day 82

• User Authentication (Login, Logout)
• Error Handling with Asynchronous Code
• User Input Validation

Day 83

Navigate to Day 83

• Flashing Error Messages
• Admin Authentication with Nav Protection
• Navigation Bar with Base Styling

Day 84

Navigate to Day 84

• Responsive Navbar UI
• Hamburger Menu for Mobile Navbar
• Views for Admin-side Product Management and Adding Products