In the early 00’s the web was the way Internet Explorer’s developers wanted it to be, while those who developed other browsers had to catch up, replicating its functionality and standards for backward compatibility. When IE started to step back from its leading position, other browsers began to include new features and standardize them among each other. Open source solutions from independent developers appeared to make working with browser features easier. The variety of available features has been expanding ever since, but it’s still as important as ever to know the essentials of front end development. We have collected bits of basic and advanced knowledge that are crucial when creating web content today.
Required skills, qualifications and things to know
- English (reading comprehension level at least).
- Git version control system and a GitHub profile. Look for help here: Pro Git by Scott Chacon and Ben Straub, Git in 15 minutes and GitHowTo.
- System CLI — bash, zsh, cmd, Power Shell, as a lot of tools are strictly
console-only . Get help here: AdvancedBash-Scripting Guide. Client-server interaction. Here’s a guide: How the Internet Works for Developers. Pаrt 1: Overview & Frontend.- Code editors and IDE — Atom, Sublime Text 3, Vim, WebStorm, etc. A good place to start is Comparison of text editors on Wikipedia.
- Developer tools in Chrome, Firefox and Safari for
in-browser debugging. Check these pages: Chrome DevTools Overview and What are browser developer tools? - Basic web server configuration to set up your static content: Apache2 and Nginx.
- Basic development environment container isolation tool skills: Vagrant and Docker.
- HTML5 and semantic layout. Get help here: HTML guides and manuals by Mozilla Development.
- HTML preprocessors: Slim, Pug (Jade), Twig.
- CSS3. Get help here: HTML guides and manuals by Mozilla Development.
- Approaches to creating CSS — OOCSS, SMACSS, OPOR, BEM (БЭМ). Get help here: Matt Stauffer`s «Organizing CSS with OOCSS, SMACSS, and BEM», «OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?» on clubmate.fi, Ben Frain`s OOCSS/Atomic CSS are Responsive Web Design ‘
anti-patterns .’ - Flexbox. Check out «A Complete Guide to Flexbox» on
CSS-Tricks . - CSS preprocessors: LESS, SCSS, Stylus.
- CSS postprocessor: PostCSS.
- CSS frameworks: Bootstrap 3, Foundation.
- Grid systems and responsiveness: Susy, Rupture, Lost Grid.
- CSS modules. Check out this
«CSS-modules» article in Glen. Maddern’s blog and «What are CSS Modules and why do we need them?» onCSS-Tricks . - What is «this», global contexts, function context, arrow function context, call methods, apply, bind. Get help here: Ryan Morr. Understanding Scope and Context in JavaScript.
- Callbacks and closures. Check out: Ivaylo Gerchev Demystifying JavaScript Closures, Callbacks and IIFEs.
- What is AJAX and how it works. Cross domain requests. Get help here: What is AJAX? on Tutorials Point, HTTP access control (CORS) guides and manuals by Mozilla Developer Group.
- You Might Not Need JQuery — jQuery and how to avoid using it.
- Polyfills.
- Implementing delayed function calls during asynchronous Q events and object for delayed and asynchronous Promise calculations. Get help here: Q guide, Promise guide by Mozilla Developer Group.
- Code quality and uniformity — EditorConfig, ESLint, Stylint
- Testing: Jasmine, Mocha, Karma, Protractor.
- Understand and know the difference between React, Angular, Angular2, Vue, Express. A good place to start is this discussion on Quora.
- What is DOM and how it works. Check out this introduction by Mozilla Developer Group.
- Shadow DOM.
- Browser events. Check out this guide by Mozilla Developer Group.
- Cookie, SessionStorage, localStorage. Get help in this guide by Mozilla Developer Group.
Cross-browser layouts and support of various new standards for browsers. Take a look at «The Principles OfCross-Browser CSS Coding» on Smashing Magazine, caniuse.com, Modernizr, Autoprefixer.- Progressive Enhancement and Graceful Degradation development strategies. Check out the «Progressive Enhancement: What It Is, And How To Use It?» article on Smashing Magazine.
- Adaptive and responsive design principles. Get help: Ethan Marcotte. Responsive web design.
- Content and content delivery optimization. Check out The Essential CDN Guide on Incapsula.
- Package managers: NPM, Bower. This discussion on Stack Overflow should help.
- Modules and dependencies in JS: Require.js, AMD, Browserify, Webpack. Look for help here: Understanding JavaScript Modules on Spring.io.
- Tools for quick project start: Yeoman,
TARS-CLI . - Process automation: Webpack, Gulp, Grunt, Browsersync. Check out «Why You Need a Build System Like Grunt, Gulp, Brunch For Your Website» on Learncode.academy`s YouTube channel.
Web-animations .Web-fonts , SVG.- Graphics editors: Adobe Photoshop, Sketch.
- UI/UX design principles.
- Knowing how to answer these questions.
For starters
- Any text editor + latest browser version
- Web and
web-related courses: - Useful articles about the industry in general
- BEM methodology.
Trends, blogs and sources to follow closely
CSS-Tricks . A great resource with articles and useful design and coding solutions.- Codyhouse. A set of snippets.
- @dan_abramov. Twitter of a
Russian-speaking React developer on Facebook’s team. - @addyosmani. Twitter of a Google Chrome team member who creates Developers Tools.
- @paul_irish. Twitter of another Google Chrome team member who creates Developers Tools.
- Frontenders. A small list of front end developers that are worth following.
- 2ality. A blog about JS.
Stay tuned for more updates.