Getting Started in Web Frontend Development

A breakdown list for the beginners, from zero fundamental to a real frontend developer.

Before doing it

• IT engineer means?
• what's frontend?
  • keywords of the tech-stack been using out there
• what are those things?
  • understand via description, trends, analysis, articles
    • homepage, README docs
    • stackoverflow trends, developer annual summary
    • etc...
  • knowing the name of related framework, languages, tools
  • how to begin
    • official site tutorial & documents
    • blogs
    • youtube video

Going to the core part

• the first day preparation
  • installation, ENV path, version check
  • IDE related
    • settings, hotkeys
    • IDE plugins, plugin settings
    • git
    • search
    • terminals
  • how to start a project & get a template
  • how to run & test it, hot-update, responsive, real device
  • how to package it, release it
• before your coding
  • know the basic language features
  • check the preferred file structure, naming rules, case usage
  • check is there any lint & formatting tools
  • check the mostly used dev tools
  • confirm the way to access assets & styles
    • fonts
    • images
    • themes
  • know the way to import package & dependencies
  • be aware of the coding guidelines & best practices
• further aspects to build a project
  • routing
  • request & error handling
  • auth
  • state handling
  • encapsulation & inheritance
  • storage & cache
  • performance

Handling the project

• for real world tasks
  • requirement analysis
  • reading of design
  • APIs
  • project management tools
  • CICD
  • git, branch, PR, review
  • test methods
• to enhance your knowledge base
  • start to read the whole documents
  • get to know the fundamental knowledge
    • network
    • rendering
    • basic algorithm
    • further languages features