FRONTEND

OVERVIEW

Title

Frontend developer

 

HTML/CSS Developer

 

Javascript Developer

 

Frontend SEO Expert

 

Frontend Accessibility Expert

 

Frontend Dev. Ops

 

...

Skill

Skill

• Content Management Systems (aka CMS)
• Node.js
• Cross-Browser Testing
• Cross-Platform Testing
• Unit Testing
• Cross-Device Testing
• Accessibility / WAI-ARIA
• Search Engine Optimization (aka SEO)
• Interaction or User Interface Design
• User Experience
• Usability
• E-commerce Systems
• Portal Systems
• Wireframing
• CSS Layout / Grids

Skill

• DOM Manipulation (e.g., jQuery)
• Mobile Web Performance
• Load Testing
• Performance Testing
• Progressive Enhancement / Graceful Degradation
• Version Control (e.g., GIT)
• MVC / MVVM / MV*
• Functional Programming
• Data Formats (e.g., JSON, XML)
• Data APIs (e.g Restful API)
• Web Font Embedding
• Scalable Vector Graphics (aka SVG)
• Regular Expressions
• Content Strategy
• Microdata / Microformats

Skill

• Task Runners, Build Tools, Process Automation Tools
• Responsive Web Design
• Object-Oriented Programming
• Application Architecture
• Modules
• Dependency Managers
• Package Managers
• JavaScript Animation
• CSS Animation
• Charts / Graphs
• UI Widgets
• Code Quality Testing
• Code Coverage Testing
• Code Complexity Analysis
• Integration Testing

Skill

• Command Line / CLI
• Templating Strategies
• Templating Engines
• Single Page Applications
• XHR Requests (aka AJAX)
• Web/Browser Security
• HTML Semantics
• Browser Developer Tools

Fullstack

Interview

SAMPLE QUIZ

Interview

BONUS LINK

LEARNING

Browsers & Devices

• How it works
• Security
• Optimize

HTML/CSS

• http://html5weekly.com/issues

 

• http://css-weekly.com/archives/

 

• http://learnlayout.com/

 

• http://codeguide.co/

JS

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

 

• http://es6-features.org/

 

 

SEO

• Goole SEO Started Guide

 

• http://www.hobo-web.co.uk/seo-tutorial/​

Animation

Web fonts & icons

• Client send MAC fonts with 0kb
• Convert to web fonts and fail
• ...

Web fonts & icons

Google fonts

https://www.google.com/fonts

 

 

Adobe typekit

https://typekit.com/

 

 

Font icon app

https://icomoon.io/app/

Accessibility

• http://achecker.ca/

• WCAG 2.0 Check list

Web APIs

Web APIs

1. APIs

 

 

2. Usage

 

 

3. Web Audio example

 

Web Developer Tools

Chrome Dev Tool

 

1.Document from Google

 

 

2.Video training

 

 

3.Tips and tricks

Command Line

MAC & LINUX ???

Package manager

GIT

Build & Task Automation

BE integration

Performance

Security