RoadMap to become Front End Developer

Are you wanna become a web developer pro then this article is you !!!!

web developers work independently as freelancers or with company teams to create websites. Depending on the job, these professionals may focus on

• Front-End Development - Front-end of a website is the part that users interact with the user experience. Everything that you see when you're navigating around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of the HTML, CSS, JAVASCRIPT being controlled by your computer's browser.
• Back-End Development - Back-end of a website consists of a server, application, and database. They build and maintain the technology that powers those components which, enable the user-facing side of the website to even exist.

What did web developers do?

• Web development and web design share many commonalities, but they differ in some key areas.
• Web design deals with the front-end of a website, concerning itself with appearance and user experience.
• Web development, on the other hand, deals with building technical front-end and back-end code that informs site function.
• Web developers may work exclusively on front-end, back-end, or full-stack and modern jobs also require overlap into web design.
• These professionals may work independently on a freelance basis or with marketing or IT departments.

Daily Task they do

Web developer's daily tasks depend on their industry, position, and project. Web developers also test website functions and take charge of building, maintaining updating, and troubleshooting websites.

Developers often find themselves

• communicating with clients,
• planning web layouts,
• composing code to enable site functions,
• creating or adding verbal or visual content into the code structure.

Basically, there are three types of role preference learning :

1. Front End Developers - one who develops the website and the visuals using HTML, CSS, JS, and frameworks and libraries.
2. Back End Developers - one who develops the actions on a website or web apps using programming languages like Node.js, Python, Ruby, PHP, etc.
3. Full Stack Developers - one who can develop all layers of the software then moving ahead with DevOps.
4. Some people also include debuggers and researchers in this list.

Developers can also be categorized to their style of work -

• one who sticks to traditional rules
• one with multiple programming languages
• one with artistic nature

Let's jump to the preparation path of the pro version.....

Front -End

A front-end web developer is someone who takes care of building the user interface of a website or a web application. Basically works on creating the visual part and making it dynamic in order to allow the user to interact with it.

Nowadays, front-end web development has become more complex than it was. It's more than just HTML, CSS, and JavaScript. There are a lot of technologies you need to learn, the tasks are many as well. However, if you have the passion and discipline, you can definitely become a successful front-end developer.

1) How does the web works?

Before starting to learn any technologies, it's way better if you first learn the fundamentals of the web in general. Here we are learning how the web works and how it started, this is a must for every type of developer. You will need to learn about things like HTTP, domain names, hosting, browsers, and how they work.

Here is a list of some topics that you need to consider :

Internet

• How does the internet works?
• What is HTTP?
• Browsers and how they work?
• DNS and how it works?
• What is a Domain Name?
• What is hosting?

2) HTML

HTML Stand for HyperText Markup Language. It is used to build the skeleton or the markup for your website. Here you need to learn the basics of HTML, but you might want to pay more attention to HTML forms as they will be fundamental in the future. Cheatsheet

• Learn the basics
• Writing Semantic HTML
• Forms and Validators
• Conventions and Best Practices
• Accessibility
• SEO Basics

3) CSS

CSS stands for Cascading Style Sheets. It is used to define how your HTML elements should look like. It is also used to make responsive layouts and it makes your webpage more beautiful as well. Cheatsheet

• Learn basics
• Making Layouts (floats, display)

CSS is easy to learn, but difficult to master. There are a few topics that you want to pay more attention to, like :

• Box model: How margins, padding, and borders work together.
• CSS units: Used for expressing lengths ( rem, vh, VW).
• Position: Specifies the type of positioning method. It also confuses many people so make sure you spend some time on it.
• Variables: Are entities that can be reused throughout a document. This is my favorite feature in CSS. They make working with CSS so enjoyable and you can create themes with just a few lines of code.
• Media Query: Decides what to show on different screen sizes. They are a key component of responsive design.
• Animation: Let's an element change from one style to another. If you know how to use animation correctly, it makes your site stand out. Otherwise, it will make your website look unprofessional, so be careful.
• Flexbox, CSS Grid: Used for building Responsive layouts.

I would also recommend that you learn some web and UI design fundamentals. This will give you the potential to make a good-looking web page as a front-end developer.

4) Javascript

JavaScript is the queen of web development, I can’t imagine the web without it. It’s the best programming and scripting language for web developers. You can do many things with it such as front-end, back-end, mobile apps, and etc. cheat sheet

When it comes to JavaScript, you need to learn the basics first. Things like variables, data types, functions, arrays, objects, and etc. You also need to learn about how to manipulate the DOM and many more.

• Syntax and basic constructs
• learn DOM manipulation
• Learn Fetch API / AJAX (XHR)
• ES6+ and modular javascript
• understand the concepts closures, Async Await, Hoisting, Event bubbling, scope, prototype, shadow DOM, strict

5) Version Control

It allows you to go back to some previous versions of the codebase without any issues. Also, it helps in collaborating with people working on the same code.

So learn the basics of Git and how to use it in your command line. Also, create an account on Github and learn how to create your first repository in order to push your HTML and CSS code to it using Git. This will give you the habit of using Git and Github for your future projects in front-end development.

cheat sheet

• What are they and why you should use

- Repo hosting services (creating an account and learn to use Github)

- Basic usage of Git

- Github / Gitlab / Bitbucket

6) Web Security Knowledge

Get at least a basic knowledge of all of these

• HTTPS
• Content Security policy
• CORS
• OWASP Security Risks

7) Package Manager

npm and yarn both are fine, pick one or learn both, there is not much difference.

• npm
• yarn

8) CSS Architecture

with modern frameworks and CSS-in-JS, you don't have to worry about it anymore but still, it would be a good idea to get familiarized with BEM at least.

• BEM
• OOCSS
• SMACSS

9) CSS Preprocessors

with how the modern frameworks there has been more push towards CSS-in-JS so you may not need these but still a good idea to familiarize yourself.

• SASS
• PostCSS
• LESS

10) Build Tools

Task Runners

• npm scripts
• Glup

Module Bundlers

• WebPack
• Rollup
• Parcel

Linters and Formatters

• Prettier
• ESLint
• StandardJB

11) Pick a Framework

React.js

• Redux
• MobX

Angular

• RxJS
• NgRx

Vue.js

• VueX

12) Modern CSS

• styled component
• CSS module
• styled JSX
• Emotion
• Radium
• Glamorou

13) Web Components

• HTML templates
• Custom Elements
• shadow DOM

14) CSS Frameworks

JS-based and better to use with your framework-based Javascript application.

• Reactstrap
• Material UI
• Tailwind CSS
• Chakra UI

CSS first frameworks which don't come with javascript components default.

• Bootstrap
• Materialize CSS
• Bulma

15) Testing your Apps

Learn the difference between Unit, Integration, and Functional test and learn how to write them with the tools listed and can fill all your testing needs with just these. Mocha, Chai, Ava, Jasmine(apps)

• Jest
• react-testing-library
• Cypress
• Enzyme

16) Type checkers

• Typescript
• Flow

17) Progressive web apps

Learn different web API's used in PWA's

• storage
• web sockets
• service workers
• Location
• notifications
• device orientation
• payments
• credentials

Calculating, measuring, and improving performance

• PRPL Pattern
• RAIL Model
• Performance Metrics
• using Lighthouse
• Using Dev Tools

18) Server-Side Rendering (SSR)

React.js

• Next.js
• After.js

Angular

• Universal

Vue.js

• Nuxt.js

19) GraphQL

• Apollo
• Relay Modern

20) Static Site Generators

• Next.js
• GatsbyJS
• Nuxt.js
• Vuepress
• Jekyll
• Hugo
• Gridsome

21) Mobile Applications

• React Native
• NativeScript
• Flutter
• Ionic

22) Desktop Application

• Electron
• Carlo
• Proton Native

23) Web Assembly

• web assembly or WASM is the binary instructions generated from higher-level languages such as GO, C, C++, or Rust.
• It is faster than JavaScript and WASM 1.0 has already shipped in the major browsers W3C accepted it as an official standard at the end of 2019.
• It will still take quite some time to go mainstream though.

Conclusion

At the end of the front-end from scratch to pro, this is the huge list of technologies we need to learn with a lot of choices to choose the latest one for the current trending. So the next article covers the back-end and so on... Happy Learning :)

Follow my blog with Bloglovin