100DaysOfCode

My 100DaysOfCode process of learning web development

The recommended day-by-day activities are as follows:

• Days 1–8: HTML
• Days 9–16: CSS
• Days 17–24: JavaScript
• Days 25–27: jQuery
• Days 28–33: Responsive Web Design
• Days 34–36: Accessibility
• Days 37–39: Git
• Days 40–44: Node and NPM
• Days 45–50: Sass
• Days 51–54: Bootstrap
• Day 55: BEM
• Days 57–61: Gulp
• Days 62–65: Webpack
• Day 66: ESLint
• Days 68–83: React
• Days 84–89: Redux
• Days 90–94: Jest
• Days 95–97: TypeScript
• Days 98–100: NextJS

Extra activities:

• Days 100-120: Vue
• Days 120-140: Angular
• Days 140-160: Markdown
• Days 140-160: UI-UX
• Days 160-180: Pug

HTML

Projects:

• custom-elements

Back ⇧

CSS

Projects:

• hamburger-icon
• interviewQuestion-card
• bg-image-gradient
• codyhouse-framework-learning
• clip-path
• irregular-shadows
• color-tinting
• blend-mode
• frosted-glass
• svg
  • svg-transform
  • svg-stroke
  • svg-markers
  • svg-gradients
  • svg-pattern
• just-pagination
• folded-corner
• autosized-columns
• simple-animation
• tailwind-learn
  • first-glance
• bem-learn
  • simple-card
• multilevel-menu
• sticky-navigation
• masonry-layout

Back ⇧

JavaScript

Projects:

• color-clock
• compare-objects
• equality-arrays
• es6-modules
• generate-table
• modal-onload
• top-button
• click-counter
• color-kaleidoscope
• scroll-magic
• fibonacci-memoization
• eslint-prettier-airbnb
• awesome-context
• compare-arrays
• map-datastructure
• proxy-object
• get-names
• drag-and-drop
• send-request
• mutation-observer
• cache-weakmap
• intersection-arrays
• hackerrank-challenges
  • loop-challenge
  • factorial-challenge

Back ⇧

jQuery

Projects:

• loading-image
• traverse-dom
• add-node
• enumeration-elements
• event-bubbling
• event-delegation
• event-propagation

Back ⇧

Responsive Web Design

Projects:

• accordion

Back ⇧

Git

Projects:

• stash-commits
• udacity-git-course

Back ⇧

Node-and-NPM

Projects:

• first-server
• html-render
• reading-file
• server-babel
• hide-envvars
• handle-errors
• eslint-cliengine
• weatherapp-express
• multipage-ejs
• file-sharing

Back ⇧

Gulp

Projects:

• compile-sass
• gulp-1.01
• partial-imports
• compress-images

Back ⇧

Webpack

Projects:

• start
• separate-apps

Back ⇧

React

Projects:

• evergreenui
• filter-search
• helloworld
• todo
• tooltips
• conditional-render
• table-rendering
• react-sample
• formik-library
• use-bootstrap
• ts-app
• styling-ways
  • simple-form
• context-example
• another-todo

Back ⇧

Redux

Projects:

• clicker
• todo

Back ⇧

Jest

Projects:

• first-test
• learn-matchers
• mock-functions

Back ⇧

TypeScript

Projects:

• typescript-gulp
• types-basics
• ts-interfaces
• ts-enum
• ts-functions
• ts-classes
• ts-guards
• ts-generics
• ts-operators
• basics
  • sum-function
  • object-types
  • array-type
  • tuple-type
  • enum-type
  • any-union-type
  • function-type
  • unknown-type
  • never-type
  • modules
    • export-declaration
    • import-declaration
• compile-dist

Back ⇧

Vue

Projects:

• express-learning
• get-positive-sum
• get-double
• product-showcase
• russian-flag
• simple-watcher
• just-component
• filter-data
• ref-attr
• click-counter
• event-modifiers
• key-modifiers
• lifecycle-hooks
• [custom-directive](