, Table of Contents
Introduction 1.1
What Is a Front-End Developer? 1.2
Recap of Front-end Dev in 2017 1.3
In 2018 expect... 1.4
Part I: The Front-End Practice 1.5
Front-End Jobs Titles 1.5.1
Common Web Tech Employed 1.5.2
Front-End Dev Skills 1.5.3
Front-End Devs Develop For... 1.5.4
Front-End on a Team 1.5.5
Generalist/Full-Stack Myth 1.5.6
Front-End interview questions 1.5.7
Front-End Job Boards 1.5.8
Front-End Salaries 1.5.9
How FDs Are Made 1.5.10
Part II: Learning Front-End Dev 1.6
Self Directed Learning 1.6.1
Learn Internet/Web 1.6.1.1
Learn Web Browsers 1.6.1.2
Learn DNS 1.6.1.3
Learn HTTP/Networks 1.6.1.4
Learn Web Hosting 1.6.1.5
Learn General Front-End Dev 1.6.1.6
Learn UI/Interaction Design 1.6.1.7
Learn HTML & CSS 1.6.1.8
Learn SEO 1.6.1.9
Learn JavaScript 1.6.1.10
Learn Web Animation 1.6.1.11
Learn DOM, BOM & jQuery 1.6.1.12
Learn Web Fonts, Icons, & Images 1.6.1.13
2
, Learn Accessibility 1.6.1.14
Learn Web/Browser APIs 1.6.1.15
Learn JSON 1.6.1.16
Learn JS Templates 1.6.1.17
Learn Static Site Generators 1.6.1.18
Learn Computer Science via JS 1.6.1.19
Learn Front-End App Architecture 1.6.1.20
Learn Data API (i.e. JSON/REST) Design 1.6.1.21
Learn React 1.6.1.22
Learn State Management 1.6.1.23
Learn Progressive Web App 1.6.1.24
Learn JS API Design 1.6.1.25
Learn Web Dev Tools 1.6.1.26
Learn Command Line 1.6.1.27
Learn Node.js 1.6.1.28
Learn JS Modules 1.6.1.29
Learn JS Module loaders/bundlers 1.6.1.30
Learn Package Managers 1.6.1.31
Learn Version Control 1.6.1.32
Learn Build & Task Automation 1.6.1.33
Learn Site Performance Optimization 1.6.1.34
Learn Testing 1.6.1.35
Learn Headless Browsers 1.6.1.36
Learn Offline Dev 1.6.1.37
Learn Web/Browser/App Security 1.6.1.38
Learn Multi-Device Dev (e.g., RWD) 1.6.1.39
Directed Learning 1.6.2
Front-End Schools, Courses, & Bootcamps 1.6.2.1
Front-End Devs to Learn From 1.6.3
Newsletters, News, & Podcasts 1.6.4
Part III: Front-End Dev Tools 1.7
Doc/API Browsing Tools 1.7.1
SEO Tools 1.7.2
Prototyping & Wireframing Tools 1.7.3
3
, Diagramming Tools 1.7.4
HTTP/Network Tools 1.7.5
Code Editing Tools 1.7.6
Browser Tools 1.7.7
HTML Tools 1.7.8
CSS Tools 1.7.9
DOM Tools 1.7.10
JavaScript Tools 1.7.11
Static Site Generators Tools 1.7.12
Accessibility Dev Tools 1.7.13
App Frameworks (Desktop, Mobile etc.) Tools 1.7.14
State Management Tools 1.7.15
Progressive Web App Tools 1.7.16
GUI Development/Build Tools 1.7.17
Templating/Data Binding Tools 1.7.18
UI Widget & Component Toolkits 1.7.19
Data Visualization (e.g., Charts) Tools 1.7.20
Graphics (e.g., SVG, canvas, webgl) Tools 1.7.21
Animation Tools 1.7.22
JSON Tools 1.7.23
Placeholder Images/Text Tools 1.7.24
Testing Tools 1.7.25
Front-end Data Storage Tools 1.7.26
Module/Package Loading Tools 1.7.27
Module/Package Repo. Tools 1.7.28
Hosting Tools 1.7.29
Project Management & Code Hosting 1.7.30
Collaboration & Communication Tools 1.7.31
CMS Hosted/API Tools 1.7.32
BAAS (for Front-End Devs) Tools 1.7.33
Offline Tools 1.7.34
Security Tools 1.7.35
Tasking (aka Build) Tools 1.7.36
4
Introduction 1.1
What Is a Front-End Developer? 1.2
Recap of Front-end Dev in 2017 1.3
In 2018 expect... 1.4
Part I: The Front-End Practice 1.5
Front-End Jobs Titles 1.5.1
Common Web Tech Employed 1.5.2
Front-End Dev Skills 1.5.3
Front-End Devs Develop For... 1.5.4
Front-End on a Team 1.5.5
Generalist/Full-Stack Myth 1.5.6
Front-End interview questions 1.5.7
Front-End Job Boards 1.5.8
Front-End Salaries 1.5.9
How FDs Are Made 1.5.10
Part II: Learning Front-End Dev 1.6
Self Directed Learning 1.6.1
Learn Internet/Web 1.6.1.1
Learn Web Browsers 1.6.1.2
Learn DNS 1.6.1.3
Learn HTTP/Networks 1.6.1.4
Learn Web Hosting 1.6.1.5
Learn General Front-End Dev 1.6.1.6
Learn UI/Interaction Design 1.6.1.7
Learn HTML & CSS 1.6.1.8
Learn SEO 1.6.1.9
Learn JavaScript 1.6.1.10
Learn Web Animation 1.6.1.11
Learn DOM, BOM & jQuery 1.6.1.12
Learn Web Fonts, Icons, & Images 1.6.1.13
2
, Learn Accessibility 1.6.1.14
Learn Web/Browser APIs 1.6.1.15
Learn JSON 1.6.1.16
Learn JS Templates 1.6.1.17
Learn Static Site Generators 1.6.1.18
Learn Computer Science via JS 1.6.1.19
Learn Front-End App Architecture 1.6.1.20
Learn Data API (i.e. JSON/REST) Design 1.6.1.21
Learn React 1.6.1.22
Learn State Management 1.6.1.23
Learn Progressive Web App 1.6.1.24
Learn JS API Design 1.6.1.25
Learn Web Dev Tools 1.6.1.26
Learn Command Line 1.6.1.27
Learn Node.js 1.6.1.28
Learn JS Modules 1.6.1.29
Learn JS Module loaders/bundlers 1.6.1.30
Learn Package Managers 1.6.1.31
Learn Version Control 1.6.1.32
Learn Build & Task Automation 1.6.1.33
Learn Site Performance Optimization 1.6.1.34
Learn Testing 1.6.1.35
Learn Headless Browsers 1.6.1.36
Learn Offline Dev 1.6.1.37
Learn Web/Browser/App Security 1.6.1.38
Learn Multi-Device Dev (e.g., RWD) 1.6.1.39
Directed Learning 1.6.2
Front-End Schools, Courses, & Bootcamps 1.6.2.1
Front-End Devs to Learn From 1.6.3
Newsletters, News, & Podcasts 1.6.4
Part III: Front-End Dev Tools 1.7
Doc/API Browsing Tools 1.7.1
SEO Tools 1.7.2
Prototyping & Wireframing Tools 1.7.3
3
, Diagramming Tools 1.7.4
HTTP/Network Tools 1.7.5
Code Editing Tools 1.7.6
Browser Tools 1.7.7
HTML Tools 1.7.8
CSS Tools 1.7.9
DOM Tools 1.7.10
JavaScript Tools 1.7.11
Static Site Generators Tools 1.7.12
Accessibility Dev Tools 1.7.13
App Frameworks (Desktop, Mobile etc.) Tools 1.7.14
State Management Tools 1.7.15
Progressive Web App Tools 1.7.16
GUI Development/Build Tools 1.7.17
Templating/Data Binding Tools 1.7.18
UI Widget & Component Toolkits 1.7.19
Data Visualization (e.g., Charts) Tools 1.7.20
Graphics (e.g., SVG, canvas, webgl) Tools 1.7.21
Animation Tools 1.7.22
JSON Tools 1.7.23
Placeholder Images/Text Tools 1.7.24
Testing Tools 1.7.25
Front-end Data Storage Tools 1.7.26
Module/Package Loading Tools 1.7.27
Module/Package Repo. Tools 1.7.28
Hosting Tools 1.7.29
Project Management & Code Hosting 1.7.30
Collaboration & Communication Tools 1.7.31
CMS Hosted/API Tools 1.7.32
BAAS (for Front-End Devs) Tools 1.7.33
Offline Tools 1.7.34
Security Tools 1.7.35
Tasking (aka Build) Tools 1.7.36
4