Roadmap: JavaScript foundations for modern web frameworks

Widgets to build

• Guessing game
• Flags/Fruits Widget
• Words Widget
• Taxi Rank Widget

Foundational Web Application development skills

The list below is foundational skills that Web App developers should master.

• Capture information in a Web Page, process the information and show a response using the DOM.
• Display contents on a web page using the DOM from a list of numbers, strings and Objects create html table or list dynamically.
• Detect which value is clicked on in a list or table and display/capture additional information.
• Filter the contents from a list of numbers, strings or Objects and display the result on the screen.
• Capture data on a screen and add it to a list. Show the newly captured data on the screen.
• Validate entered input. Show error messages if required. Show confirmation messages.

Foundational Technical skills

Using DOM element references

• Getting DOM element references:
  • document.querySelector
  • document.querySelectorAll
• Adding events to DOM elements:
  • element.addEventListener
  • inline events with onclick etc

HTML elements

You should be able to comfortably use various HTML form input elements such as text, select, radio & checkbox. Also explore range and hidden.

Responsive web pages

Ensure that you can create responsive web pages and widgets. With content displayed next to each other. With appropriate styling & spacing between screen components.

Concepts to cover:

• The box model - margin, border & padding
• container elements
• flexbox
• display: inline-block
• CSS frameworks to choose 1 from:
  • Bootstrap
  • Materialize
  • Tailwind CSS
• Responsiveness using media queries:
  • @media (min-width : 1024px) {}
  • @media (max-width : 1024px) {}

Functions & Objects

You should be able to confidently:

• create functions,
• factory functions & Object Literals

to separate application logic from Front End logic.

You should gain some exposure using classes in JavaScript, although functions and Factory Functions trumps classes you should know how to use classes.

Algorithms

You should be getting more an more confident using various different algorithms.

Start by practicing these basic algorithms:

• Find the biggest and the smallest value in a list.

• Group data and then find the smallest and largest values.

• Sorting data:

  • sorting using list’s sort method
  • Bubble sort

Converting data

An knowing how to convert between various different data types will serve you well.

Practice to convert:

• a list of Strings into a list of objects
• a list to an object
• an object to a list

ES6

ES6 is a foundational skill to acquire to use frameworks such as ReactJS & VueJS.

You will get more and more confident with these as you move through the programme.

• Declaring variables using const & let
• Destructuring
• Spread/rest operator
• Arrow functions
• JavaScript classes
• Template string (Template literal)
• Object literal Syntax Extensions
• Promises - with async/await

Array functions

• find
• filter
• map
• reduce

Useful DOM skills

• Event Bubbling
• Data attributes
• Capturing details about the triggered target event.

Extra skills

• setInterval & setTimeout

• Using LocalStorage

  • JSON.parse - to create a JSON object.
  • JSON.stringify - to create a string from a JSON object.

• Using node, npm, yarn & npx

• Using Modules for front end development.

  • Vite, parcelJS or create-react-app

• Deploying to GitHub/GitLab pages