Front-End Career Path Outline

README.md

Front-End Career Path Outline

1. Intro to web-development and front-end dev, more specifically

   1. How the internet works

2. How front-end fits in with the product development cycle

   1. How do FEs interact with PMs, designers, BEs?

3. Intro to HTML/Intro to CSS

4. Intermediate CSS

   1. CSS variables
   2. Media queries

5. Responsive Design

   1. Flexbox/Grid

6. Wireframing

7. Going off platform

   1. Text editor, no git, no bash

8. Get first website on Github pages

   1. Within web app; doesn't need git or bash

9. JS Syntax Pt. 1 (var, control flow, funct, scope)

10. JS Syntax Pt. 2 (arrays, loops, iterators, objects)

11. JS for interactive websites (events, DOM)

12. HTML Forms / Form Validation

13. Accessibility

    1. Semantic HTML
    2. Accessibility tools
    3. Keyboard navigation
    4. Tab order
    5. Aria

14. Contrast

15. CSS animations

16. working with svgs

17. Domains, hosting,

18. Command Line (bash) and Git

    ---------- << Intermediate >> ---------- Intro to Web Apps

19. Intro to Web Apps

20. JS Syntax Pt. 3 (classes, modules, browser compatibility), unit testing

21. External APIs, JSON, promises, async-await, requests, callbacks

22. React, Part I

23. Build Tools: node and npm

24. Deploying React app with Netlify

25. React, Part II

26. React Testing

27. Redux

28. Redux Testing

29. Advanced Testing (end-to-end and integration testing)

    ---------- << Advanced >> ---------- (non-sequential)

30. Styling your applications

    1. CSS Frameworks (Reactstrap, Material UI)
    2. Styled Components (CSS in JS)

31. Debugging your applications (Chrome DevTools)

    1. Web Vitals
    2. Lighthouse
    3. Flamegraphs
    4. Networking
    5. Breakpoints
    6. DOM Inspection

32. Making your application discoverable

    1. Search Engine Optimization
    2. Static vs. dynamic pages

33. Optimizing your application

    1. Metrics
    2. Code splitting
    3. Optimize images
    4. Lazy load media content
    5. Uglify
    6. Browser Compatibility (Codecademy module)
    7. Polyfills
    8. Caching

34. Building secure applications

    1. HTTPS
    2. XSS
    3. Cross origin resource sharing (CORS)
    4. OWASP Top Ten Web Application Security Risks | OWASP
    5. Keeping your packages up to date
       1. npm
       2. CI/CD automation

35. Adding realtime connectivity

    1. Web Sockets
    2. Realtime databases

    ---------- << Interview Skills>> ----------

36. Interview Skills