JS Topic that doesn’t require HTML and CSS:
- JS declaration and datatype
- JS comparison and operations
- JS conditions like if…else, switch, etc.
- JS Loops ie, for loop, while(), do…while(),etc
- Functions and arrow functions
- this context
- Call(), Bind(), Apply()
- JS Object
- Prototype inheritance and chaining
- ES6 classes
- Iterator and Generator
- Map, filter, reducer
2. Hire Frontend mentor for support
- Create a HTML file in VScode folder with at <HTML>, <Head>,<title>, <Body> sections.
- In addition you can also Embed external .js file into webpage through <script src="externalFile.js"/>
- Open the HTML webpage through Web browser preferably Chrome, Firefox, etc.
3. Learning Node JS
Additional Node JS can be used to create REST API endpoints for front-end projects and allow you to move towards the full-stack developer path.
|JS Topic Included Node JS||Not Included in Node JS|
|JS Operators: logical and arithmetic operators||JS Form: creation, handling, and validation|
|JS Control statement: if..else, switch, etc||JS Events: types, event delegation, bubbling, etc.|
|JS Loops: for loop, while loop||JS Cookies: creating & accessing cookies.|
|JS Function: function syntax, arrow function , etc||Browser storage: localStorage, sessionStorage, etc.|
|JS Context: this object, hoisting, closures|
|JS OOP: Objects, prototypes, and classes|
|JS API: fetch API, promises, async/await, etc.|
4. Reusing readymade projects for HTML/CSS boilerplate
5. Understand DOM in JS
6. Browser console to execute JS code
Q: How to execute JS code in Chrome Developer Console?
- Open the Chrome browser
- Press Windows/Linux - Ctrl + Shift + J or Mac - Command + Shift + C to open inspect tab
- Select "Console" option from the menu.
- Add JS code in the terminal and Press Enter
- If JS code run is successfully, the result displayed on the terminal or error message is shown for unsuccessful execution.
One of the common mistakes beginners make is building projects from scratch through video tutorials as a part of a final project. Building projects on your own involves fixing multiple issues, errors, bugs, etc which you will not otherwise come across in video tutorials. As a result video tutorial are great during your learning process but it cannot be used as a final challenge when your trying to make the jump from beginner to intermediate/expert developer.