100 Days of Code 💻

Day 1: How the web works

• Request and response
• DNS Server and IP address (DNS and IP stand for Domain Name System and Internet Protocol respectively)
• Client and Server (Front-end and Back-end)
• What is URL (Uniform Resource Locator)
• How to create a website

Day 2: First dive into HTML and CSS basics

• What is HTML (HyperText Markup Languague)
• What is CSS (Cascading Style Sheets)
• Understanding HTML Elements
• HTML attributes

Day 3: More about HTML and CSS basics

• Working with CSS colors
• Formatting the code
• Introducing Developer Tools
• Style and Link tags
• CSS Rules
• The anatomy of a valid HTML document (head -> metadata, body -> content)

Day 4: More HTML and CSS concepts

• Pseudo selector: hover
• Multiple CSS rules
• Void elements
• The link element and how the browser works with it
• CSS Size Units

Day 5: More HTML tags and CSS properties

• First contact with img tag
• New CSS properties
• Adding new HTML files
• More styling on the page
• First summary

Day 6: Diving deeper into HTML & CSS

• Lists: <ul>, <ol>
• Inheritance: container/parent element rules apply to descendants
• Cascading: Multiple rules can be applied to the same element
• Specificity: More specific selector's rule wins over less specific rule

Day 7: Semantic HTML and CSS Box Model

• Box Model: content, padding, border and margin
• First contact with semantic HTML elements <header>, <main>, <footer>
• CSS Selectors & Combinators
• Block Elements vs Inline Elements
• Common inline elements <a>, <button>, <img>, <span>

Day 8: More CSS concepts

• Inline elements and how they behave with margin and padding
• Display inline-block
• Margin collapse
• First look at box-shadow
• Replaced and Non-replaced inline elements

Day 9: HTML & CSS Summary (Project Challenge)

• First project with all the content learned so far
• Box Model
• Displays
• Semantic HTML

Day 10: Final part of the first challenge

• New HTML attributes for anchor tags
• Introduced new HTML semantic elements
• Ended first challenge

Day 11: Deployment and Hosting 🎉

• Difference between deployment and hosting
• First deployment! Click here to see the website
• Favicons 👽
• Relative vs Absolute paths
• Git and Github
• Version control

Day 12: Git Basics 🐱

• Working directory
• Repos (All tracked files and folders)
• Commits, branches

Day 13: More Git commands 🐱

• Renaming branches
• Removing files with git rm
• Merge conflicts
• Undoing changes
• Remote repo
• Onwards to Github: What and Why?

Day 14: Github 🐱

• Git clone
• Collaboration and Organizations
• Contributing
• Forks
• Pull requests

Day 15: Understanding HTML & CSS Layouts and Positioning

• Introducing more semantic elements nav
• Start new project "Travel Goals" 🚧
• Flexbox

Day 16: Normal Flow Layout and Positioning

• Using images as backgrounds
• Position: static and relative (Normal Flow)
• Position: absolute and fixed (Removed from the Normal Flow)
• Position: sticky (hybrid of relative and fixed positioning)

Day 17: Understanding the box-sizing 📦

• Working with % unit
• Box-sizing: content-box & border-box
• New inline element: <strong>
• Resizing replaced elements with object-fit

Day 18: Continue to build the Travels Goals website

• Margin collapsing in parent-child relationship
• Colors with linear-gradient();
• Travels Goals second page layout

Day 19: Flexbox challenge and Grid basics

• New CSS property: overflow
• First Flexbox challenge 👾
• CSS Grid basics: grid-template-columns, grid-column
• Tree-structural pseudo-classes: :first-of-type, :nth-of-type()

Day 20: End Travels Goals website & Start module about Responsive Design 🎉

• Grid challenge 👾
• Using unicode into HTML
• Travels Goals deployment 🚀 Click here to see the website
• Introducing Responsive Design 📱
• New HTML Semantic Element: <article>

Day 21: Styling Webfood 🍔 & Responsive Design Concepts

• What is Responsive Design?
• Comparing Units (Specifically for font-size)
• Absolute and Relative Units

Day 22: Different size units & First approach at Media Queries

• Difference between "%", "em" and "rem"
• Desktop First 💻
• Mobile First 📱
• What is a Media Query?

Day 23: Using Media Queries 📱

• Media types: all, screen, print & Media features: width, orientation...
• Media Query Syntax
• First Media Queries challenge 👾
• Creating the Hamburger Icon & Side Drawer with new HTML Semantic Element <aside>

Day 24: Finishing Webfood page 🍔

• Target pseudo-class 🎯
• Responsive Design module summary
• Third deployment 🚀 click here to see the website
• Starting new module: Tips & Tricks to create a good website 🎉

Day 25: CSS Custom Properties / Transform & Transition ✨

• How to create custom properties
• Difference between html, :root and *
• Adding transitions on the website 💫
• SVG (Scalable Vector Graphics)

Day 26: Understanding "Webforms"

• What are web forms?
• Key form elements: <input type="...">, <select>, <textarea>, <button>
• Form element
• Action & Method attributes

Day 27: Working with different input types 💬

• Label element and for attribute
• Input type: text, number, email, password, etc.
• Styling inputs 💄
• How data is sent to the server with inputs

Day 28: More form input types and attributes

• Checkbox, dropdown and textarea
• Different button types 🖱️
• Default validation

Day 29: Form challenge & Start JavaScript Module 🎉

• Form challenge 👾
• Form challenge deployment! click here to see the website 🚀
• What is Javascript?
• What are variables?

Day 30: Basic JavaScript concepts

• Variables
• Arrays: ['this', 'is', 'an', 'array']
• Objects: { this: 'is', an: 'object' }
• Using the alert() function

Day 31: Basic JavaScript concepts pt.2

• Accessing obejcts properties
• Introducing functions 🎉
• Returning values in functions
• Shadowing

Day 32: Math operations and strings 🧮

• Objects & Methods
• Basic math operations
• String operations & methods

Day 33: Working with the DOM 🎉

• Data representation of the parsed HTML Code
• Nodes
• Defer attribute
• The DOM Tree of Nested Objects 🌲

Day 34: Drilling into the DOM

• Querying elements
• First DOM challenge 👾
• Creating elements via JS

Day 35: textContent vs innerHTML & Events 📢

• Working with innerHTML
• Introducing events
• First 'click' event 🖱️
• More events

Day 36: Constants & Second DOM challenge 👾

• What is a constant variable?
• Changing elements style with JavaScript
• Managing CSS classes with JavaScript

Day 37: Third DOM challenge & Control Structures 👾

• If statements
• Boolean values
• Comparison & Logical operators

Day 38: Else-If & Loops 🔁

• Flag variables 🚩
• Traditional For loop
• For-of
• For-in
• While

Day 39: All loops exercise 🔁

• Traditional For loop
• For-of
• For-in
• While

Day 40: Tic-Tac-Toe Project 👾

• Base game structure
• Finish general element styles 🎨

Day 41: Tic-Tac-Toe Project Pt.2 👾

• Finish all game styling
• Start working on player settings with JavaScript

Day 42: Tic-Tac-Toe Project Pt.3 👾

• Continue working on player settings
• Create new CSS rule for error messages
• Add more CSS custom properties

Day 43: Tic-Tac-Toe Project Pt.4 👾

• Store players' data
• Start game
• Store players' selected fields

Day 44: Tic-Tac-Toe Project Pt. Final 👾

• Create game logic
• End game with a winner or draw
• Reset all game status
• Game deployment, click here to see the game! 🚀

Day 45: Third-Party Packages 🎉

• What are third-party packages?
• Using Bootstrap
• Third-Party x Custom Code

Day 46: Onwards to Backend 💻

• Static vs Dynamic websites
• Frontend, Backend and Fullstack
• How do we write server-side code?

Day 47: Introducing Node.js

• What is Node.js?
• Creating a custom server with Node 🖥️
• Handling Requests & Creating custom Responses

Day 48: Enhancing Node.js with Express

• NPM
• Handling requests and responses
• Parsing user data and storing data in files with FS

Day 49: Static & Dynamic Content

• First exercise with express 👾
• Serving HTML files with Express

Day 50: Dynamic Content 💫

• Serving static files
• Adding EJS Template Engine <%= hello %>
• Rendering dynamic content with templates

Day 51: Partial Content & Dynamic Routes

• EJS include
• Dynamic Routes /something/:uid
• Managing data with uid

Day 52: Handling Errors & Status Codes 🔴

• Page Not Found (404)
• Server-Side errors (500)
• Working with status codes
• Code refactoring

Day 53: Refactoring and using express.Router()

• Importing and Exporting with Node.js
• Splitting routes in different files
• Query params

Day 54: New module: Advanced Javascript 🎉

• Introduction
• Functions & Default parameters
• Rest parameter

Day 55: Closer look at functions and Objects

• Default parameters & Rest parameters
• Primitive vs Reference Data Types
• Scoping
• Constructor Functions & Classes

Day 56: Asynchronous Javascript & Introducing Databases

• Callbacks
• Promises
• Async-await
• What are databases?

Day 57: SQL Databases vs NoSQL Databases

• Difference between the two databases systems
• What is SQL?
• MySQL
• Creating database with MySQL

Day 58: Creating Tables & CRUD Operations

• Inserting data into a table
• Reading data
• Updating data
• Deleting data

Day 59: Relating Data

• One-To-Many
• One-To-One
• Many-To-Many
• Joining tables

Day 60: NodeJS with MySQL 🐬

• Start new project with node and mysql 🎉
• Creating database structure
• Creating first routes

Day 61: Connecting to database using MySQL2

• Connecting to database
• Inserting data with placeholders
• Fetching & displaying a list of blog posts

Day 62: Fetching & Displaying a Single Blog Post

• Formatting Data
• Updating posts
• Deleting posts

Day 63: NoSQL & MongoDB 🍃

• The Idea Behind NoSQL Databases
• Introducing MondoDB
• Inserting data with MongoDB

Day 64: CRUD with MongoDB

• Reading & Filtering documents
• Updating documents
• Deleting documents
• Practicing

Day 65: NodeJS and MongoDB 🍃

• Planning database structure
• Connecting to MongoDB
• Fetching & Displaying authors' data
• Inserting new documents

Day 66: Updating & Deleting with MongoDB and NodeJS

• Fetching and Displaying projected data
• Transforming the createdAt field
• Updating documents
• Deleting documents

Day 67: Adding File Upload 📁

• Two Sides of Uploading files
• Parsing incoming file with multer package
• How to store files on a backend
• Configuring Multer In-Depth

Day 68: Serving uploaded files and Introducing AJAX

• Adding an image preview feature
• Why would we need AJAX?
• What is AJAX?

Day 69: Get & Post with fetch()

• Sending a GET request with ajax
• Updating the DOM based on the response
• Sending a POST request with ajax

Day 70: Handling Errors & Start Authentication module

• Handling errors with ajax requests
• More HTTP methods: PUT, PATCH and DELETE
• What is user authentication?
• Basic Signup Functionality

Day 71: Working with sessions

• Hashing Passwords
• Login functionality
• Validating Signup Information
• Introducing Sessions & Cookies 🍪

Day 72: Sessions & Cookies 🍪

• Storing authentication data in sessions
• Using sessions and cookies for controlling access
• Closer look at cookies
• Sessions beyond authentication (e.g. flash messages)

Day 73: More about session & Using res.locals

• Authentication vs Authorization
• Practicing with sessions
• Custom middlewares + res.locals

Day 74: Website Security

• Authentication vs Website Security
• Attacker pov 🥷
• Understanding CSRF Attacks
• Understanding XSS Attacks

Day 75: SQL Injection and Introducing MVC Pattern

• Understanding SQL Injection Attacks
• Protecting against SQL Injection
• Introducing MVC (Model-View-Controller)

Day 76: MVC and Refactoring

• Creating Middlewares
• Creating Models
• Spliting code into different files
• Add crud functionalities to Model

Day 77: Controllers & More Refactoring ♻️

• Adding a first controller
• Refactoring sessions & input validations
• Adding double csrf token protection

Day 78: Protecting routes & Starting the main project of the course

• Protecting routes with custom middlewares
• Planning the project
• Course project setup

Day 79: First view & Start working on CSS base styles

• Adding EJS and First Views
• Structuring First View & Creating general includes
• Creating base CSS files
• Adding CSS Custom Properties

Day 80: Sign Up View & Connecting with database

• End general styles
• Style sign up form
• Connect to mongodb with mongoose

Day 81: Sign Up/Login & CSRF

• Adding user signup
• Protecting signup and login routes with csrf token
• Using the default express error handler
• Introducing sessions

Day 82: Configuring sessions & Implementing authentication

• Checking the user authentication status with a middleware
• Adding logout functionality
• Handling errors in async code
• Validating user inputs

Day 83: Flashing errors to users

• Displaying error messages and saving user input
• Admin authorization and protected navigation
• Setting up base navigation styles

Day 84: Making the website responsive 📱

• Building a responsive website
• Frontend JavaScript for toggling the sidebar
• Adding a Product Admin page & Forms

Day 85: Image Upload

• Adding the image upload functionality
• Adding a Product Model & Storing products in the database
• Fetching & Outputting Product Items

Day 86: Working on product items

• Styling product items
• Adding product details view
• Updating product (as admin)

Day 87: Image preview & Making products deletable

• Adding a File Upload preview
• Making Products Deletable
• Using AJAX & Updating the DOM

Day 88: Various fixes & Proper route protection

• Protecting admin routes
• Outputting products for customers
• Outputting product details

Day 89: Cart Logic

• Adding a Cart Model
• Working on the shopping cart logic
• Adding cart items via AJAX requests

Day 90: Start working on Cart

• Adding a cart page
• Styling the cart page
• Updating cart quantities via AJAX requests

Day 91: More DOM & Start working on Orders

• Updating the DOM after Cart Item updates
• Adding the Order Controller & Model
• Saving Orders in the database

Day 92: Ending project

• Displaying Orders (for Customers & Admins)
• Managing Orders as an Admin
• Keeping cart items information always updated
• End project. Repo link here

Day 93: Adding Stripe Payments 💸

• What are Services and APIs
• Introducing Stripe (Payments Service)
• Configuring the Stripe request & Handling Payments

Day 94: Deploying websites

• Static vs Dynamic Websites
• Hosting databases
• Testing & Env Variables
• Cross Browser Support & SEO

Day 95: Finish module about Deployment & Introducing APIs

• Improving performance and shrinking assets
• API & Services: What & Why
• JS Packages VS URL-based APIs
• API vs Traditional Websites

Day 96: Creating a REST API

• Introducing REST APIs
• Building a first basic REST API
• Enhacing the API & Making it more realistic
• Starting another API example

Day 97: Ending the REST API

• Finishing endpoints
• Testing with insomnia
• Using a decoupled frontend website (SPA)
• Fixing CORS errors

Day 98: Introducing Javascript Web Frameworks

• Why use web frameworks?
• Getting started with Vue.js
• Listening to events & Updating data

Day 99: Managing data with Vue.js

• Outputting lists of data
• Displaying content condtionally
• Sending HTTP requests

Day 100: Course completed 🎉

• Now it's time to focus on creating projects!