Career in Web Designing, Front End Developer

In basics of html you will learn html elements to display information in html page. Semantic of HTML mean you have to write correct html element for correct purpose for example if you want to display button then use element not Semantic HTML gives context to screen readers, which read the contents of a web page out loud.

SEO (Search Engine Optimization) is a technique to make your document more findable to visitors by search engines like google, yahoo and bing etc. So always keep in mind during html document writing search engines give more importance to keywords inside headings, links than non semantic elements like Accessibility means you have to write html in good way so a visitor can navigate easily anywhere in your website. You have to focus on semantic as possible so content is easy to understand by visitors or screen readers. If you are styling the html document then you should learn CSS (Cascading Style Sheets). In CSS you should learn…

• Basics of CSS
• Making Layouts (Floats, Positioning, Display, Box Model, CSS Grid, and Flex Box)
• Media Queries
• CSS3

So after CSS you should learn about Java Script Language. Java Script enhances the HTML page content management ability by accessing DOM (Document Object Model) of HTML page. In java script you should learn…

• Basics of Java Script
• Syntax and Basic Constructs
• Learn DOM Manipulations
• Learn Fetch API (Application Programming Interface)
• Learn AJAX (Asynchronous Java Script and XML) OR XHR (XML Http Request)
• ES6+ and Modular Java Programming
• Understand the concepts of Hoisting
• Event Bubbling
• Scope Prototype
• Shadow DOM
• Strict
• How Browser Work
• DNS
• HTTP

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution

Package Managers

• NPM (https://www.npmjs.com/)
• YARN (https://yarnpkg.com/en/)

After Java Script you should learn either NPM or Yarn. Both are java script package manager. NPM is improved but you can pick any.

After package manager you should learn

• HAML Pre Processor (http://haml.info/)
• SASS Pre Processor (https://sass-lang.com/)
• PostCSS (https://postcss.org/)
• LESS (http://lesscss.org/)

A preprocessor is a program that takes one type of data and converts it to another type of data. In the case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass. Haml is processed into HTML (HTML abstraction markup language) and Sass (Syntactically Awesome Style Sheets) is processed into CSS. PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins. PostCSS is a top-favored CSS tool among npm users.

Less is also in market and started in 2019. It is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client side or server side. Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax.

CSS Frameworks

• Bootstrap (https://getbootstrap.com/)
• Materialize CSS (https://materializecss.com/)
• Bulma (https://bulma.io/)
• Semantic UI (https://semantic-ui.com/)

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.

Materialize is a Responsive CSS Framework based on Google’s Material Design Language. The difference between Materialize, Bootstrap, and Foundation is that Materialize is based on Google's Material Design language where as bootstrap and foundation are based on the mobile first design language and flat design language, respectively

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. Semantic UI is a modern front-end development framework, powered by LESS and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience. According to the Semantic UI website, the goal of the framework is to empower designers and developers “by creating a language for sharing UI”

CSS Architecture

• BEM (http://getbem.com/introduction/)
• OOCSS (http://oocss.org/)
• SMACSS (http://smacss.com/)

With modern front-end frameworks, there is more push towards CSS in JS methodologies with which you are not going to need these. However, you should still learn BEM at-least, which would prove helpful in the long run. The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

OOCSSS mean Object-oriented Cascading Style Sheet. The focus of OOCSS is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there. SMACSS stand for Scalable Modular Architecture for CSS is a style guide that follows five simple categories. That is base, layout, module, state, and theme. SMACSS is becoming one of the most useful contributions to front-end discussions in years. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?

I believe you are getting good knowledge about Front End Development and Wed Designing career. Now you should know about following concept…

Build Tools: We classified build tool in followings…

• Linters and Formatters
  • Prettier (https://prettier.io/)
  • ESLint (https://eslint.org/)
  • JSHint (https://jshint.com/)
  • JSLint (https://www.jslint.com/)
  • JSCS (https://jscs-dev.github.io/)
• Task Runners
  • NPM scripts (https://docs.npmjs.com/misc/scripts)
  • GULP (https://gulpjs.com/)
  • Grunt (https://gruntjs.com/)
• Module Bundlers
  • Webpack (https://webpack.js.org/concepts/)
  • Parcel (https://parceljs.org/)
  • Rollup (https://rollupjs.org/guide/en/)

Linters and Formatters

Code linting is an important thing to have incorporated in your project because it is a way to increase the code quality. Linting consists of checking a source code for programmatic and stylistic errors. In addition, you are saving time by formatting your javascript code with some automatic tools. JavaScript, because of its dynamic and loosely-typed language, doesn’t have a compilation process, therefore, is prone to development errors. This means it needs to be executed in order to find an error. Javascript linting tools allow developers to discover problems on their applications code without executing it.

Prettier is an opinionated code formatter with support for many languages like:

• JavaScript, including ES2017
• JSX (React)
• Angular
• Vue
• TypeScript
• HTML & CSS including preprocessors like Less, and SCSS
• JSON

It integrates with most text editors available today. Prettier ensures that all output code follows a consistent style. It disregards the original styling by parsing it away and re-printing the parsed abstract syntax tree (AST) with its own set of rules, taking the maximum line length into account, and wrapping code when necessary.

ESLint is an open source code linting Javascript tool, originally created by Nicholas C. Zakas in June 2013. It analyzes the code of your application, detects problems by the use of patterns and if it is able to, resolves them. ESLint allows you to discover issues on the JavaScript code without the need to execute it.

ESLints main purpose is to allow developers to create their own set of linting rules, all of which are rules pluggable with ESLint. It comes with a predefined set of rules, which are useful to start using it right away. You are also able to extend the rules and add more to them at any point in time. The default rules are written like any plugin rules are. ESLint is written using Node.js to provide a fast runtime environment and can be easily installed with the Node.js package manager (npm).

After running a code linter on your project, the code formatter modifies or fixes your source code, according to the defined configuration previously set up. It’s a tool that allows enforcing consistent styles across development teams no matter what source code editor is used. Let’s now learn more about the tools available.

For More Information follow: https://www.gistia.com/javascript-linters-formatter-prettier-eslint/

JSHint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. JSHint was created in 2011 by Anton Kovalyov as a fork of the JSLint project. Anton and others felt JSLint was getting "too opinionated", and did not allow enough customization options.

JSLint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. It is provided primarily as a browser-based web application accessible through the domain jslint.com, but there are also command-line adaptations.

JSCS is a code style linter and formatter for your style guide. jscs is a code style checker, see more here here. jscs plugin for WebStorm, PHPStorm and other Idea family IDE with Javascript plugin, provides integration withjscs and shows errors and warnings inside the editor.

Common tasks include things like watching file changes, concatenating/minifying files, prefixing files for different browsers, and linting Javascript. Using aJavascript task runner like gulp or npm or grunt allows you to code and run your build tasks in the same language (Javascript).

NPM scripts are, well, scripts. We use scripts to automate repetitive tasks. For example, building your project, minifying Cascading Style Sheets (CSS) and JavaScript (JS) files. Scripts are also used in deleting temporary files and folders, etc,. There are many ways to pull this off — you could write bash/batch scripts, or use a task runner like Gulp or Grunt. However, a lot of people are moving over to NPM scripts for their simplicity and versatility. They also offer possibility of having fewer tools to learn, use, and keep track of.

A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. You may have used tools such as Browserify, Webpack, Rollup or one of many others.

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

A JavaScript bundler is a tool that puts your code and all its dependencies together in one JavaScript file. There are many of them out there these days, being the most popular ones browserify and webpack. Historically JavaScript hasn't had a standard for requiring dependencies from your code.

• React.js (https://reactjs.org/)
  • Redux
  • MobX
• Angular (https://angular.io/)
  • RxJs
  • ngrx
• Vue.js (https://vuejs.org/)
  • Vuex

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded.

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications.

Redux (https://redux.js.org/) is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

MobX (https://mobx.js.org/getting-started.html) is a simple, scalable and battle tested state management solution. MobX is a standalone library, but most people are using it with React .

Redux and MobX are not specific for react though you can use with any framework.

RxJS (https://angular.io/guide/rx-library) is one of the hottest libraries in web development today. Offering a powerful, functional approach for dealing with events and with integration points into a growing number of frameworks, libraries, and utilities, the case for learning Rx has never been more appealing. Couple this with the ability to utilize your knowledge across nearly any language, having a solid grasp on reactive programming and what it can offer seems like a no-brainer.

Ngrx (https://ngrx.io/) is a group of Angular libraries for reactive extensions. Ngrx/Store implements the Redux pattern using the well-known RxJS observables of Angular 2. It provides several advantages by simplifying your application state to plain objects, enforcing unidirectional data flow, and more.

Vuex (https://vuex.vuejs.org/) Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a style element) and attached into the DOM. This functionality is implemented by third-party libraries like…

• Emotion
• Radium
• JSS
• Styled-Components

Emotion(https://emotion.sh/docs/introduction) is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

JSShttps://cssinjs.org/?v=v10.0.0-alpha.22 is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

Radium https://formidable.com/open-source/radium/ A set of tools to manage inline styles on React elements, giving you powerful styling capabilities without CSS.

Styled-components (https://www.styled-components.com/) is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users. Apart from the improved experience for developers, styled-components provides Automatic critical CSS, No class name bugs, Easier deletion of CSS, Simple dynamic styling, Painless maintenance, Automatic vendor prefixing.

Glamorous (https://glamorous.rocks/) is a lightweight library for CSS-in-JS with a simple API that’s similar to styled-components’ and that makes use of glamour under the hood. Two of the main differences compared to styled-components is the use of JavaScript object literals and an additional API that allows to use DOM elements directly without creating additional named components.