Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
https://github.com/shrutikapoor08/Learn-Web-Development-Checklist

Use this checklist as a guidebook to learn web development
https://github.com/shrutikapoor08/Learn-Web-Development-Checklist
100-days-of-code 100daysofcode checklist checklists css front-end front-end-development frontend fundamentals html html-page javascript learning programming resources
Last synced: 4 months ago
JSON representation
Use this checklist as a guidebook to learn web development
Host: GitHub
URL: https://github.com/shrutikapoor08/Learn-Web-Development-Checklist
Owner: shrutikapoor08
License: mit
Created: 2021-04-05T00:44:20.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-10-12T05:09:22.000Z (over 1 year ago)
Last Synced: 2023-11-07T14:21:30.955Z (8 months ago)
Topics: 100-days-of-code, 100daysofcode, checklist, checklists, css, front-end, front-end-development, frontend, fundamentals, html, html-page, javascript, learning, programming, resources
Homepage:
Size: 129 KB
Stars: 272
Watchers: 6
Forks: 83
Open Issues: 7
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists

jimsghstars - shrutikapoor08/Learn-Web-Development-Checklist - Use this checklist as a guidebook to learn web development (Others)
README

        
## [HTML](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)

- [ ] HTML main tags [Playlist](https://www.youtube.com/playlist?list=PLblA84xge2_xNtaFnZhefjFbnDrpySKD3)

  - [ ] `` [Link](https://www.w3docs.com/learn-html/html-html-tag.html)

  - [ ] `` [Link](https://www.w3docs.com/learn-html/html-head-tag.html)

  - [ ] `` [Link](https://www.w3docs.com/learn-html/html-body-tag.html)

  - [ ] `` [Link](https://www.w3docs.com/learn-html/html-script-tag.html)

  - [ ] `<style>` [Link](https://www.w3docs.com/learn-html/html-style-tag.html)

  - [ ] `<link>` [Link](https://www.w3docs.com/learn-html/html-link-tag.html)

  - [ ] `<meta>` [Link](https://www.w3docs.com/learn-html/html-meta-tag.html)

  

- [ ] HTML5 Structural / Semantic elements

  - [ ] `<article>` [Link](https://www.w3docs.com/learn-html/html-article-tag.html)

  - [ ] `<address>` [Link](https://www.w3docs.com/learn-html/html-address-tag.html)

  - [ ] `<aside>` [Link](https://www.w3docs.com/learn-html/html-aside-tag.html)

  - [ ] `<dialog>` [Link](https://www.w3docs.com/learn-html/html-dialog-tag.html)

  - [ ] `<details>` [Link](https://www.w3docs.com/learn-html/html-details-tag.html)

  - [ ] `<figure>` [Link](https://www.w3docs.com/learn-html/html-figure-tag.html)

  - [ ] `<main>` [Link](https://www.w3docs.com/learn-html/html-main-tag.html)

  - [ ] `<nav>` [Link](https://www.w3docs.com/learn-html/html-nav-tag.html)

  - [ ] `<header>` [Link](https://www.w3docs.com/learn-html/html-header-tag.html)

  - [ ] `<footer>` [Link](https://www.w3docs.com/learn-html/html-footer-tag.html)

  - [ ] `<summary>` [Link](https://www.w3docs.com/learn-html/html-summary-tag.html)

- [ ] HTML Elements and their attributes

  - [ ] Documents `<!DOCTYPE>` [Link](https://www.w3docs.com/learn-html/html-doctype-declaration.html)

  - [ ] Headings `<h1> - <h6>` [Link](https://www.w3docs.com/learn-html/html-h1-h6-tags.html)

  - [ ] Paragraph `<p>` [Link](https://www.w3docs.com/learn-html/html-p-tag.html)

  - [ ] Lists `<li>, <ul>, <dl>` [Link](https://www.w3docs.com/learn-html/html-lists.html)

  - [ ] Links `<a>` [Link](https://www.w3docs.com/learn-html/html-a-tag.html)

  - [ ] Images `<img>` [Link](https://www.w3docs.com/learn-html/html-images.html)

  - [ ] Table `<table>`[Link](https://www.w3docs.com/learn-html/html-table.html)

- [ ] HTML Formatting

  - [ ] `<b>` - Bold text [Link](https://www.w3docs.com/learn-html/html-b-tag.html)

  - [ ] `<strong>` - Important text [Link](https://www.w3docs.com/learn-html/html-strong-tag.html)

  - [ ] `<small>` - Smaller text

  - [ ] `<i>` - Italic text [Link](https://www.w3docs.com/learn-html/html-i-tag.html)

  - [ ] `<em>` - Emphasized text [Link](https://www.w3docs.com/learn-html/html-em-tag.html)

  - [ ] `<sub>` - Subscript [Link](https://www.w3docs.com/learn-html/html-sub-tag.html)

  - [ ] `<sup>` - superscript [Link](https://www.w3docs.com/learn-html/html-sup-tag.html)

  - [ ] `<pre>` - preformatted text [Link](https://www.w3docs.com/learn-html/html-pre-tag.html)

- [ ] HTML Comments `<!-- -->` [Link](https://www.w3docs.com/learn-html/html-comments.html)

- [ ] HTML forms [Link](https://www.w3docs.com/learn-html/html-form-tag.html)

    - [ ] `<input>` [Link](https://www.w3docs.com/learn-html/html-input-tag.html)

  - [ ] `<textarea>` [Link](https://www.w3docs.com/learn-html/html-textarea-tag.html)

  - [ ] `<button>` [Link](https://www.w3docs.com/learn-html/html-button-tag.html)

  - [ ] `<select>` [Link](https://www.w3docs.com/learn-html/html-select-tag.html)

  - [ ] `<option>` [Link](https://www.w3docs.com/learn-html/html-option-tag.html)

  - [ ] `<fieldset>` [Link](https://www.w3docs.com/learn-html/html-fieldset-tag.html)

  - [ ] `<label>` [Link](https://www.w3docs.com/learn-html/html-label-tag.html)

  - [ ] `<legend>` [Link](https://www.w3docs.com/learn-html/html-legend-tag.html)

    

## CSS

   - [ ] Adding a CSS stylesheet to an HTML page using `<link>`

   - [ ] CSS Selectors [Article](https://css-tricks.com/how-css-selectors-work/) [Video](https://youtu.be/qj20o5UQ3qI)

   - [ ] Color [Article](https://css-tricks.com/almanac/properties/c/color/)

     - [ ] using hex eg: `#ff0000`

     - [ ] rgb eg: `rgb(0,0,255)`

     - [ ] common color names eg: `red, pink, brown`

   - [ ] Font [Article](https://css-tricks.com/almanac/properties/f/font/)

     - [ ] Family

     - [ ] Size

     - [ ] Weight

   - [ ] Text-decoration [Article](https://css-tricks.com/almanac/properties/t/text-decoration/)

   - [ ] Text-transform [Article](https://css-tricks.com/almanac/properties/t/text-transform/)

   - [ ] Line-height [Article](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)

   - [ ] Letter-spacing [Article](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)

   - [ ] Word-spacing [Article](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing)

   - [ ] Background-color [Article](https://cssreference.io/property/background-color/)

   - [ ] Background-image [Article](https://cssreference.io/property/background-image/)

   - [ ] Margin [Article](https://css-tricks.com/almanac/properties/m/margin/) [Article](https://cssreference.io/property/margin/)

   - [ ] Padding [Article](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) [Article](https://cssreference.io/property/padding/)

   - [ ] Border [Article](https://css-tricks.com/almanac/properties/b/border/)

   - [ ] Width [Article](https://css-tricks.com/almanac/properties/w/width/)

   - [ ] Height [Article](https://css-tricks.com/almanac/properties/h/height/)

   - [ ] percentage, pixel, em [Video](https://youtu.be/fi81bovqxXI)

   - [ ] Box model [Article](https://css-tricks.com/the-css-box-model/) [Video](https://youtu.be/M1xEi_BBW1I)

    - [ ] list-style [Article](https://css-tricks.com/almanac/properties/l/list-style/)

   - [ ] Pseudo class [Article](https://css-tricks.com/pseudo-class-selectors/)

     - [ ] hover

     - [ ] active

     - [ ] visited

   - [ ] Position [Article](https://css-tricks.com/almanac/properties/p/position/) [Video](https://youtu.be/gD3G67oPg-w)

     - [ ] relative

     - [ ] absolute

     - [ ] fixed

   - [ ] Display [Article](https://css-tricks.com/almanac/properties/d/display/)

     - [ ] block          

     - [ ] inline          

     - [ ] grid          

     - [ ] none

   - [ ] class vs id [Article](https://css-tricks.com/the-difference-between-id-and-class/)

## JavaScript

#### Fundamentals

  - [ ] JavaScript introduction [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#what_is_javascript) [Video](https://youtu.be/papg2tsoFzg)

   - [ ] Adding JavaScript to an HTML page using `script` [Article](https://www.digitalocean.com/community/tutorials/html-script-tag)

   - [ ] `console.log` [Article](https://www.freecodecamp.org/news/javascript-console-log-example-how-to-print-to-the-console-in-js/)

   - [ ] Comments [Article](https://stackabuse.com/commenting-code-in-javascript-types-and-best-practices/)

   - [ ] Variables [Article](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference) [Video](https://egghead.io/lessons/javascript-working-with-var-let-const-and-block-scopes?af=5buvlr)

        - [ ] `var` [Video](https://youtu.be/dzEieWaOJE0)

        - [ ] `let` [Video](https://egghead.io/lessons/javascript-the-let-keyword-in-es6?af=5buvlr)

        - [ ] `const` [Video](https://egghead.io/lessons/javascript-const-declarations-in-es6-es2015)

   - [ ] Data types [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)

        - [ ] String 

        - [ ] Boolean

        - [ ] Number 

        - [ ] null 

        - [ ] undefined

        - [ ] Symbol [Video](https://youtu.be/4J5hnOCj69w)

   - [ ] `typeof` operator [Article](https://www.freecodecamp.org/news/javascript-data-types-typeof-explained/)

   - [ ] String functions 

        - [ ] `.concat` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat)

        - [ ] `length` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length)

        - [ ] `toUpperCase` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase)

        - [ ] `toLowerCase` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)

        - [ ] `subString` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring)

        - [ ] `split` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)

        - [ ] template literals [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) [Video](https://egghead.io/lessons/javascript-use-template-literals-to-embed-expressions-in-strings?af=5buvlr)

- [ ] Operators

    - [ ] Arithmetic Operators [Article](https://www.w3schools.com/jsref/jsref_operators.asp)

        - [ ] `+`

        - [ ] `-`

        - [ ] `/`

        - [ ] ` *`

        - [ ] `++` 

        - [ ] `--`

        - [ ] `%`

    - [ ] Assignment Operators [ Article ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators)    

        - [ ] `=` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment)

    - [ ] `<`

    - [ ] `>` 

    - [ ] `<=`

    - [ ] `>=` 

    - [ ] `==` 

    - [ ] `===`

    - [ ] `&&` 

    - [ ] `||` 

    - [ ] `Ternary operators ? , :` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

   - [ ] Loops [Article](https://www.freecodecamp.org/news/javascript-loops-explained-for-loop-for/)

     - [ ] `for` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)

     - [ ] `while` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while)

   - [ ] Conditionals

     - [ ] `if... else` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)

     - [ ] `switch` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch)

 - [ ] Array [Article](https://www.javascripttutorial.net/javascript-array/)

    - [ ] Accessing elements [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#accessing_array_elements)

    - [ ] `length` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length)

    - [ ] Array Helper Methods [Article](https://guptstagram.medium.com/es6-array-helper-methods-54bec9066b9c)  [Video](https://youtu.be/R8rmfD9Y5-c)

    - [ ] Looping through elements 

        - [ ] `map` [Article](https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/)

        - [ ] `forEach` [Article](https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/)

    - [ ] `slice` [Article](https://www.freecodecamp.org/news/lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae/) [Video](https://youtu.be/t1qDSAUclzI)

    - [ ] `splice` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) [Video](https://youtu.be/t1qDSAUclzI)

    - [ ] `filter` [Video](https://egghead.io/lessons/javascript-filter-an-array-with-truthy-values?af=5buvlr)

    - [ ] `push` [Video](https://egghead.io/lessons/javascript-add-elements-onto-an-array-with-push?af=5buvlr)

    - [ ] `pop` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

    - [ ] `shift`, `unshift` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)

    - [ ] `isArray` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)

    - [ ] `indexOf` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) [Video](https://egghead.io/lessons/javascript-check-if-a-value-is-in-an-array-with-indexof?af=5buvlr)

    - [ ] `from` [Video](https://egghead.io/lessons/javascript-converting-an-array-like-object-into-an-array-with-array-from?af=5buvlr)

    - [ ] Rest and Spread [Video](https://youtu.be/DoIGxx7P-ps)

- [ ] Object [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

     - [ ] Creating an object [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects)

     - [ ] Accessing properties [Article](https://dmitripavlutin.com/access-object-properties-javascript/)

     - [ ] Reference and Value [Video](https://youtu.be/-hBJz2PPIVE)

     - [ ] Object destructuring [Article](https://dmitripavlutin.com/javascript-object-destructuring/)

     - [ ] `Object.keys` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)

     - [ ] `Object.getOwnPropertyNames` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)

     - [ ] Looping through properties of an object 

       - [ ] `for... of` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)

       - [ ] `for...in` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)

       - [ ] `forEach`, `.keys` [Article](https://masteringjs.io/tutorials/fundamentals/foreach-object)

     - [ ] `.hasOwnProperty` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)

   - [ ] Functions [Article](https://javascript.info/function-basics) [Video](https://www.youtube.com/watch?v=N8ap4k_1QEQ&ab_channel=ProgrammingwithMosh)

     - [ ] Named functions [Article](https://javascript.info/function-basics#function-naming)

     - [ ] Function expressions [Article](https://javascript.info/function-expressions)

     - [ ] Arrow functions `() => { }` [Article](https://javascript.info/arrow-functions-basics)

     - [ ] IIFE - Immediately Invoked Function Expressions [Article](https://flaviocopes.com/javascript-iife/) [Video](https://youtu.be/3cbiZV4H22c)

   - [ ] `this` keyword [Video](https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth?af=5buvlr)

   - [ ] ES6 Classes [Video](https://www.youtube.com/watch?v=bq_jZY6Skto&ab_channel=freeCodeCamp.org)

     - [ ] `constructor()`

     - [ ] inherting classes

   - [ ] Prototypal inheritance [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) [Article](https://www.educative.io/blog/understanding-and-using-prototypal-inheritance-in-javascript) [Video](https://egghead.io/lessons/javascript-understanding-prototypal-inheritance-within-javascript?af=5buvlr)

     - [ ] Inheriting properties

     - [ ] Extending properties

     - [ ] Accessing properties and methods

   - [ ] `setTimeout` [Video](https://www.youtube.com/watch?v=z9lJb4D3nJY&ab_channel=CodewithAniaKub%C3%B3w)

   - [ ] `alert` [Article](https://www.educative.io/edpresso/how-to-use-the-alert-method-in-javascript)

   - [ ] JSON objects [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)

     - [ ] `JSON.stringify` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

     - [ ] `JSON.parse` [Article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)

#### Web page and JavaScript

[Playlist](https://youtube.com/playlist?list=PLEcLwwG6Ei_g3VbCg-Q6NEF7UCXlyOqec)

   - [ ] `document.getElementById`

   - [ ] `document.getElementsByTagName`

   - [ ] `document.getElementsByClassName`

   - [ ] `document.getElementsByName`

   - [ ] `document.querySelector`

   - [ ] `document.querySelectorAll`

   - [ ] `.createElement`

   - [ ] `.innerHTML` 

   - [ ] `.innerText`

   - [ ] `.append()` 

   - [ ] `.remove()`

   - [ ] `.appendChild`

   - [ ] `.style`

   - [ ] `events`

     - [ ] `.addEventListener`

     - [ ] `.removeEventListener`

     - [ ] `event.preventDefault`

#### Web fundamentals

  - [ ] How does the web work? [Article](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)

  - [ ] How does a web browser work? [Article](https://medium.com/@monica1109/what-happens-when-i-type-any-url-in-the-browser-3719c6357da2)

  - [ ] HTTP basics [Video](https://www.youtube.com/watch?v=t3xrHaqX2tc&ab_channel=OracleDevelopers)

     - [ ] headers

     - [ ] request

     - [ ] response

     - [ ] verbs: PUT, POST, DELETE, PATCH, POST

- [ ] What is an API? [Video](https://www.youtube.com/watch?v=Yzx7ihtCGBs&ab_channel=CodeWithChris)

     - [ ] What is REST API? [Video](https://www.youtube.com/watch?v=lsMQRaeKNDk&ab_channel=IBMCloud) [Article](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/)

     - [ ] What is GraphQL API? [Video](https://www.youtube.com/watch?v=VjXb3PRL9WI&ab_channel=LevelUpTuts) [Article](https://medium.com/devgorilla/what-is-graphql-f0902a959e4) [Podcast](https://frontendhappyhour.com/episodes/no-rest-with-quintessential-libations-graphql/)

  - [ ] What are CRUD operations? [Article](https://www.codecademy.com/articles/what-is-crud)  - [ ] What are cookies? [Article](https://www.freecodecamp.org/news/everything-you-need-to-know-about-cookies-for-web-development/)[Video](https://www.youtube.com/watch?v=rdVPflECed8&ab_channel=CreateaProWebsite)

    - [ ] Getting and setting cookies [Article](https://javascript.info/cookie)

  - [ ] What is local storage? [Article](https://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/)

  - [ ] What is session storage? [Article](https://www.javascripttutorial.net/web-apis/javascript-sessionstorage/)

  - [ ] What is a domain name? [Video](https://www.youtube.com/watch?v=Y4cRx19nhJk&ab_channel=CreateaProWebsite)

  - [ ] What is DNS lookup? [Video](https://www.youtube.com/watch?v=Rck3BALhI5c&ab_channel=Techquickie)

  - [ ] What is web hosting? [Video](https://www.youtube.com/watch?v=H8oAvyqQwew&ab_channel=CreateaProWebsite)

  - [ ] What is CORS? [Article](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) [Article](https://javascript.info/fetch-crossorigin)   

  - [ ] ARIA - What is accessibility? [Article](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) [Video](https://www.youtube.com/watch?v=HtTyRajRuyY&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&ab_channel=GoogleChromeDevelopers)       

## Step Up

#### CSS 

   - [ ] animations [Video](https://youtu.be/zHUpx90NerM)

     - [ ] transition property

     - [ ] `@keyframes`

     - [ ] animation property - `name`, `duration`, `timing-function`, `delay`, `iteration-count`, `direction` 

   - [ ] flexbox 

   - [ ] grid 

   - [ ] media query to build responsive sites

   - [ ] CSS Specificity [Article](https://css-tricks.com/specifics-on-css-specificity/)

  

#### JavaScript

  - [ ] `bind`, `call`, `apply` [Video](https://youtu.be/OSjTmET11OQ)

  - [ ] Scopes

  - [ ] Hoisting [Video](https://youtu.be/Fnlnw8uY6jo)

  - [ ] Temporal Dead Zone [Video](https://youtu.be/BNC6slYCj50)

  - [ ] Event bubbling [Video](https://youtu.be/aVSf0b1jVKk)

  - [ ] Event Capturing [Video](https://youtu.be/aVSf0b1jVKk)

  - [ ] Promises [Video](https://youtu.be/_8gHHBlbziw)

  - [ ] Callbacks

  - [ ] async / await

  - [ ] AJAX (XMLHttpRequest)

  - [ ] Generators

  - [ ] Making API calls using `fetch`, `axios` [Video](https://youtu.be/6LyagkoRWYA)

  - [ ] Event loop [Video](https://youtu.be/8aGhZQkoFbQ)

  - [ ] Closures [Article](https://eloquentjavascript.net/03_functions.html#h_hOd+yVxaku) [Video](https://youtu.be/qikxEIxsXco)

  - [ ] Service Workers

  - [ ] Browser events [Article](https://github.com/shrutikapoor08/blogs/blob/master/JSByte/HowToHandleEvents.MD)

  - [ ] Forms

      - Form properties and methods

      - Form events: focus, blur, submit

      - Form validation [Article](https://github.com/shrutikapoor08/blogs/blob/master/JSByte/FormValidation.MD)

#### React

- [ ] Prerequisites [Article](https://www.taniarascia.com/getting-started-with-react/#prerequisites)

- [ ] What is React? [Article](https://www.taniarascia.com/getting-started-with-react/#what-is-react) [Playlist](https://www.youtube.com/playlist?list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG)

- [ ] Setup and Installation [Article](https://www.taniarascia.com/getting-started-with-react/#setup-and-installation)

- [ ] JSX: JavaScript + XML [Article](https://www.taniarascia.com/getting-started-with-react/#jsx-javascript--xml) [Video](https://youtu.be/BS9g6Z3lbBU)

- [ ] Functional and Class Components [Article](https://www.taniarascia.com/getting-started-with-react/#components)

- [ ] Props [Article](https://www.taniarascia.com/getting-started-with-react/#props)

- [ ] State [Article](https://www.taniarascia.com/getting-started-with-react/#state)

- [ ] Lifecycle Events

- [ ] React Hooks [Playlist](https://www.youtube.com/playlist?list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h)

- [ ] Submitting Form [Article](https://www.taniarascia.com/getting-started-with-react/#submitting-form-data)

- [ ] Pulling in API Data [Article](https://www.taniarascia.com/getting-started-with-react/#pulling-in-api-data)

- [ ] Building and Deploying your React App [Article](https://www.taniarascia.com/getting-started-with-react/#building-and-deploying-a-react-app)

- [ ] The Beginner's Guide to React by Kent C. Dodds [Video](https://egghead.io/courses/the-beginner-s-guide-to-react)

#### Front end library:

- [ ] Redux [Video](https://youtu.be/CVpUuw9XSjY)

#### APIs

- [ ] REST

- [ ] GraphQL

#### Debugging Tools

- [ ] Browser Dev tools [Article](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)

    - [ ] Chrome Dev Tools [Video](https://www.youtube.com/watch?v=H0XScE08hy8&ab_channel=GoogleChromeDevelopers) [Video](https://www.youtube.com/watch?v=e1gAyQuIFQo&ab_channel=GoogleChromeDevelopers)

    - [ ] Firefox Dev Tools [Video](https://www.youtube.com/watch?v=Sp9ZfSvpf7A&ab_channel=MozillaDeveloper)   

#### UX for Web Developers

1. **Software UX Designers use**

UX designers use the following software for the designing. As a UI developer, you will get either the files of design or style guide. Do review them.

-  Figma

-  Sketch App (Works only on Mac)

-  Photoshop

 2. **Colors**

 As a web developer, you should know that the designers use HEXA values of the color code. If you want to use RGBA (Red Green Blue Alpha) in your code then you need to ask the designers to provide that

 3. **Units**

 As a web developer, you should know that designers use `px` as default units while designing. If you are using `em` or `rem`, you need to discuss this with your designer and ask about the base font size. This base font size will help you to convert from `px` to `em/rem`

 4. **Consistency**

As a web developer make sure that the designs have consistency in the size, colors, and UX. Eg: the font size and color of the headings on every page should be the same, the body's font size should be the same. 

You should review the designs given by the designers to make sure the consistency is there.

5. **Styleguide**

If you have a big project ask your UX team to share the style guide. Style- guide is the information about the color palette, font size, heading style, etc. This becomes the base guidelines for developers and testers.

6. **Informative States**

While working on the forms it is important to ask the designers about the error, success, or informative states design. Most of the time UX folks miss these states.

7. **Wireframes**

It is important to have the wireframes to understand the flow of the user's journey. Wireframes are like blueprint of the application.

## Suggested learning process

1. **SKILLS** Learn the fundamentals from a resource of your choice: 

   1. HTML

   1. CSS

   1. JavaScript.

1. **PROJECT** Build a portfolio web page using the skills you learnt so far - JS, HTML, CSS. The web page should have the following: 

    1. Add your name, photo, bio using semantic HTML 

    1. Setup sections for projects. We will fill these projects as we go. The projects will have an image, description and a link. Set these up with [lorem ipsum text](https://loremipsum.io/) for now. 

1. **SKILLS** [Learn git and version control.](https://youtu.be/8JJ101D3knE).

1. **PROJECT**

   1. Add your portfolio to GitHub.

   2. Step Up Assignment: Setup Github pages to host your portfolio. [Here's an instructional video](https://www.youtube.com/watch?v=794yrQWAOD8&ab_channel=iEatWebsites)

1. **SKILLS** Step up your JS and CSS knowledge

1. **PROJECT** Make your portfolio mobile friendly and responsive.

1. **PROJECT** Getting ready for job interviews

    1. Practice interview questions on [InterviewCake](https://www.interviewcake.com/). 

   1. Practice interviews questions on [Leetcode](https://leetcode.com/). Start with easy and slowly work your way up.

1. **SKILLS** Step up challenge - learn a front-end framework.

   React, Vue and Angular are the top front-end frameworks in 2021. If you were to pick one, I would recommend [React](https://reactjs.org/). Lots of companies use React in production. 

1. **PROJECT**: Implement the framework. - build an inspiration. Add this to your portfolio. Tasks: 

    1. Fetch an API of your choice. 

    2. Render data in your app. 

    3. Implement search functionality.

    4. Implement auto-complete functionality.

1. **SKILLS** Step up challenge: Learn a library for the framework.

   1. Learn a state management library: Redux / React context

    1. Learn a CSS library - SASS 

1. **PROJECT** Implement your next inspiration idea using the library. Add to your portfolio.

3. **SKILLS** Learn a testing framework : Build test coverage. Add to your portfolio.

4. **CAREER** Get a freelance job using your portfolio.

5. **CAREER** Find a mentor. Get feedback on your skills and portfolio.

6. **SKILLS** Step up challenge - learn the other side of stack(front-end vs back-end)

7. **CAREER** Apply for a full time job. You are ready.

8. **SKILLS** Continue iterating.

9. **CAREER** Prepare for interviews