Hello guys, now days in Information Technology (IT) and Computer Science (CS) technology impact our real life. I think if you want to perform some task today then without IT and CS technologies you can’t complete your job. This is a good reason to start your career in IT and CS technologies if you are expert in these technologies then you can build lot of application like facebook, gmail, flipkart, amazon and youtube etc.
You can hit the public interest or specific client interest. A full fledge application which is developed using these technologies has different sections and first is Front End (How it interact with real world and as well as attract the real world). Remember a Quote “First Impression is Last Impression” and Front End of application put the first impression in front of real world. End of this blog I believe you should able to understand about Front End Development or Web Designing and what should you start to learn become a Front End Developer. To become a good web designer is a big deal and this article will help you to become good web designer or front end developer.
So when a person or an organization have lot of information and want to spread all over the world then internet is the best platform to publish that information and to do this that information should be written in HTML (Hyper Text Markup Language). So in HTML you should learn…
- Basics of HTML
- Writing Semantic of HTML
- Learn Basic of SEO
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
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
- How Browser Work
- 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/)
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.
- Bootstrap (https://getbootstrap.com/)
- Materialize CSS (https://materializecss.com/)
- Bulma (https://bulma.io/)
- Semantic UI (https://semantic-ui.com/)
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”
- 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
Prettier is an opinionated code formatter with support for many languages like:
- JSX (React)
- HTML & CSS including preprocessors like Less, and SCSS
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.
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.
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
Frontend Development Framework:
Before working with framework you have to know about single page applications. How single page applications works? What are their positive and negative aspects?
After this pick one of following framework…
- React.js (https://reactjs.org/)
- Angular (https://angular.io/)
- Vue.js (https://vuejs.org/)
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.
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.
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.