Front-end developer skills

Question

css

Now I'm learning HTML/CCS and after reading this article I'm horrified by how much there is to learn. what of all this is necessary for successful growth? and in what order\tempo (excluding html\css of course)

Answer 1

HTML (XHTML, HTML4, HTML5) - required (attention to HTML5)
CSS (2.1, CSS3, etc.) - required (attention to all versions)
JavaScript / Ajax - required, classic
jQuery - required, classic
Popular Frameworks (HTML5 Boilerplate, Twitter Bootstrap, etc.) - the first convenient template for an html5 project, nothing more, the second is already a classic template for adaptive layout
Modernizr - a library for detecting browsers, clients, devices - read, learn, apply, if necessary, define something
OOCSS / BEM / SMACSS (Modular coding methodologies) - ways to conveniently write styles, read, learn, apply as needed
CSS Grids - I don’t know what the author meant - apparently CSS grids, you just need to know
CSS Frameworks / Resets - nothing complicated style zeroing technology and again sets of CSS rules with classes like animate.css
Progressive Enhancement / Graceful Degradation - a concept related to cross-browser compatibility and simplifying functionality and display in some browsers
HTML and CSS Specifications (W3C / WHATWG) - more often check the code for validity, this allows you to understand your mistakes just on the basis of these specifications
UX / Usability - more for designers, but also useful
Website Speed ​​/ Performance - goodies for optimization
Developer / Debugging Tools (Chrome Dev Tools, Firebug, etc) - skill poking around in the console, you must always know and use
YUI Library - if necessary
Dojo / MooTools / Prototype - study and apply if necessary
Responsive Web Design - you need to know how to work with css media queries
Mobile Web Development - an abstract concept related to the development of mobile web applications
Mobile Web Performance ---
Cross-Browser / Cross-Platform Development - an abstract concept related to the development of cross-browser and cross-platform applications
Document Object Model (DOM) - home model - in an introductory course on js, every frontender should know about it
Cross-Browser Bugs and Inconsistencies (primarily IE6-8) - no comments
CSS Pre-Processors (LESS / Sass) - convenient preprocessors for working with styles, I recommend to simplify work with CSS
Version Control (Git / GitHub / CVS / Subversion) - a useful skill that is needed not only for front-end developers, it is useful for team development.
HTML5 APIs (Canvas, Geolocation, Video, etc.) - learn and apply as needed
Object-oriented Programming (OOP) - no comments
Back-end Templating languages/technologies (PHP, Ruby, .NET, etc) - need to know basic level, in order to understand how to process data on the client returned / given by the server, torturing the backend manager about this.
Scaffolding, Task Runner tools (Yeoman, Grunt, Bower, etc.) - handy things that make your work easier
MVC Frameworks (Angular, Backbone, etc.) - learn and apply as needed
MySql - learn
Accessibility / WAI-ARIA - learn and apply as needed
Microdata / Microformats - learn and apply as needed
HTML5/CSS3 Polyfills - learn and apply as needed
CMS (WordPress, Drupal, Joomla, etc) - learn and apply as needed
Functional Programming - no comments, you need to know
Data Formats (eg JSON, XML) - you need to know
Internationalization / Localization - an abstract concept
of Content Strategy - learn and apply as needed
Offline Web Apps - learn and use as needed
Regular Expressions - need to know basic
.htaccess - learn and use
SVG as needed - learn and use as needed
Image Editing Tools (Photoshop, Fireworks, etc.) - need to know
Web Font Embedding / Licensing - work with fonts
SEO - frontender needs to know at the level of semantic layout
Haml - work with HTML
CoffeeScript - working with JS
In general, all these technologies, concepts, etc. closely intersect with each other. Learning one thing involuntarily learns another.

Answer 2

javascript (without jquery, asynchrony and how to live with it), DOM model (what is dom, how to work with it), http (understanding how it works).
this is something you need to know. And then comes the specifics, which are known with experience, such as ie or webkit bugs. Some of the problems are solved by polyfills / shims, it is worth knowing what is what ... In general, there is really a lot of things, but the basics should be there.
well, it’s worth using things for automation (grunt / gulp, less / sass, etc.), code coverage with tests (e2e, unit), learning frameworks (angular.js, enber.js, etc.), one is enough to start.

Answer 3

Take a closer look at this part

for (var i = 0; i < coords.length; i++) {
   myCollection.add(new ymaps.Placemark(coords[i]), {
       balloonContentBody: bools[i]
   });
}

Must be

for (var i = 0; i < coords.length; i++) {
   myCollection.add(new ymaps.Placemark(coords[i], {
       balloonContentBody: bools[i]
   }));
}