Mastering Frontend

mastering-frontend.md

Mastering Frontend

Plan of studies to deepen my knowledge as a frontend developer.

Fundamentals

• HTML accessibility features
• CSS:
  • Alignment features & grids(flexbox, grid)
  • Advanced Pseudo-classes/elements
  • Responsiveness solutions
  • Animations, transitions
  • Explore CSS-in-JS concepts, motivations and understand the chore of the available solutions
    • Exercise: How does styled-components work under the hood? Create custom POC of css-in-js solution library.
• Javascript:
  • Read You Don't Know JS
  • Grasp OOP in JS
  • KISS - keep it simple stupid, explore good patterns
  • Debugging
• Typescript:
  • Understand concepts and how typescript works under the hood
  • Benefits
  • Advanced features

Understand the build proccess

• Transpiring, bundling, minifying and packaging
• Exercise: build app from scratch with webpack

Understand reactivity (react, vue)

• Understand the main motivation behind this frameworks, why use React?
• Understand how React works under the hood (JSX, Virtual DOM, hooks)
• Exercise: build reactive framework from scratch (POC)

Testing

• Why is testing code important?
• Different type of software tests: unit, integration, acceptance, smoke, end-to-end tests
• Explore solutions for the different types of tests

Other ropcis:

• Deploying an app to production: pipelines, multiple environments and processes
• Building big frontend apps:
  • Data Structures
• Character traits that make you a better frontend developer