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
• gradient-shadow
• animated-navbar
• text-gradient-animation

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
  • ifelse-challenge
  • arrays-challenge
  • arrowfunc-challenge
  • switch-challenge
  • throw-challenge
  • inheritance-challenge
  • bitwise-challenge
  • dates-challenge
  • regexpvowels-challenge
  • regexpMr-challenge
• dependency-observer
• simple-slider
• object-iterator
• random-pool
• async-await
  • base-example
  • several-outputs
  • yet_another-example
• draw-canvas
• generate-names
• taged-templates
• implement-classes
• style-delegation
• learn-rxjs
  • click-timer
  • use-scheduler
  • search-app
  • first-observer
  • emit-async
  • understand-observables
• learn-promises
  • promise-all
  • fetch-render
  • custom-promise
• learn-regexp
  • whitespace_regex-js2019
  • LookAhead-LookBehind
• generator-iterator
• composition-inheritance
• split-text
• custom-progress-bar
• jetbrains-academy
• checktime-bubblesort
• optional-chaining-ava
• hamburger-button
• toast-notification
• autowrite-text
• modal-window
• heart-rain
• background-changer
• dark-mode
• loop-carousel
• sound-board
• todo-app
• notes
• fetching-data
• vertical-gallery
• simple-trello
• dropdown-menu
• vertical-slider
• hover-board
• aim-game
• template-DOM
• our-reviews
• questions-accordion
• shopping-list
• animated-element
• swiper-slider
• todo-list
• color-flipper
• counter-controls
• navbar-toggle
• classic-tabs
• throttle-click
• debounce-click
• web-storage

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
• twoway-binding
• computed-props
• css-transitions
• within-components
• component-communicate
  • custom-events
  • event-dispatcher
• css-animations
• message-component
• animations-greensock
• components-basics
• data-props
• data-update
• sync-modifier
• custom-input
• bind-data
  • bind-number
  • bind-checkboxes
  • bind-radio
• bootstrap-counter
• render-list
• event-click
• render-html
• employees-database
• product-page

Back ⇧

Angular

Projects:

• angular8-from-scratch
• angularMaterial

Back ⇧

Markdown

Projects:

• paragraphs

Back ⇧

UI-UX

Projects:

• put-buttons

Back ⇧

Pug

Projects:

• pug-lp
• pug-templates

Back ⇧

Thanks for article to Nick Scialli - A Timeboxed, Day-by-Day #100DaysOfCode Front-End Development Curriculum

License