FRONT-END DEVELOPMENT OVERVIEW (Beginner level)

Front-end development / Client-side development focuses on what the users visually see or interact with first. It’s a practice of using HTML, CSS, and JavaScript for developing an application.

How to start? Front-End?

Source: Google Images

Begin from the basics of primary coding languages:

1. HTML, CSS: The web building blocks

2. JavaScript: To add functionality or an inter-activeness in your application, also a dynamic programming language that browsers understand.

3. Understand DOM (Document Object Model), how it works?

4. Learn how the web platform works. (Web Browsers, HTTP Protocols)

5. Learn GIT, Basic REST APIs (Request-Response cycle and methods)

6. Learn the fundamentals of user interface design. (Ex. Application design/architecture)

7. Learn about Node.js, Node Package Manager (NPM)

How does the web platform work? (Rough idea)

Source: https://www.upwork.com/hiring/development/front-end-developer/

You need to consider… Is there more?

After having a fundamental knowledge of the Front-end, you may need to know more. Here, I am sharing my opinions in a list that I think I learned it a hard way and I must implement in my frontend projects.

Source: Google images

You usually don’t care at first about resolutions and pixels. What are pixels by the way? Learn it. If you have started a new project then make sure you have a responsive design in your mind, at least it should support desktops/laptop screens.

Most Popular screen resolution:
Desktops/Laptops: 1024×768 pixels or higher

Get to know more about others:
Check out https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

2. Cross-browser compatibility

Normally, it’s an ability of a website, application, or script to support various web browsers identically. We can test the compatibility using various tools such as Comparium, Lambda Test, Litmus, etc.

Here’s a screenshot I got from gs-statcounter page. Here, You can get a clear idea, which one would be your priority browser.

Source: https://gs.statcounter.com/browser-market-share

3. Implementation of best practices and standards

4. Web Performance (Improving the quality of web pages)

Keeping track of your system is the best way you can improve or enhance the performance of the application. We can keep a simple analysis of our web application performance using some automated tools: lighthouse chrome, Page speed insights, etc.

5. Choosing Frameworks and Libraries?

There are many Frontend Javascript Frameworks such as Angular, React, Vue, Ember, Backbone, etc. You may be confused about which one is best and how can I start using a framework.

Source: Google Images

As you can see many vs among the frameworks such as

Angular VS React VS Vue

Image Credit: https://www.codeinwp.com/blog/angular-vs-vue-vs-react/

I reviewed some of the resources, blogs/sites, developer’s feedback. I learned that some factors do affect the choices of the framework. They are

Source Credit: https://trends.google.com/trends/explore?cat=31&q=Vue%20jobs,React%20jobs,Angular%20jobs

Advice on learning: (From Front-end Developer Handbook 2019 by Cody Lindley)
Learn the actual underlying technologies, before learning abstractions.

Don’t learn jQuery, learn the DOM.

Don’t learn SASS, learn CSS.

Don’t learn JSX, learn HTML.

Don’t learn TypeScript, learn JavaScript.

Don’t just use Bootstrap, learn UI patterns.

More curious to learn? I have an honorable mention.

Thanks! Happy learning……