Roadmap for becoming Back-End Developer in 2021
Learn the basics of Internet
1. How does the internet work?
2. What is HTTP & HTTPS?
3. What is Domain Name?
4. What is IP Address?
5. DNS and how it works?
6. What is hosting?
7. What is SMTP?
Basics of front-end languages
1. HTML
2. CSS
3. JavaScript
Learn a back-end language
1. PHP
2. NodeJS
3. Ruby On Rails
4. Python
5. Go
5. C#
Just learn anyone of the above language but make sure you have in-depth understanding of that language.
I will recommend NodeJs or PHP.
Learn Version Control System
1. Basic Git Commands
2. Repo hosting services
I. GitHub
II. Gitlab
III. Bitbucket
Learn about Relational Databases
1. MySQL
2. PostgreSQL
3. MariaDB
4. MS SQL
5. Oracle
MySQL is the most popular one.
Learn about NoSQL databases
1. MongoDB
2. RethinkDB
3. CouchDB
4. DynamoDB
NoSQL are very popular databases. Many startups are opting for NoSQL databases instead of SQL databases.
Learn About APIs
1. REST
2. JSON APIs
3. HATOAS
4. Open API Spec and Swagger
5. Authentication
6. GraphQL
Learn about caching
1. CDN (Cloud Delivery Network)
2. Server-side caching
I. Redis
II. Memcached
3. Client-side caching
Web Servers
1. Nginx
2. Apache
3. Reverse Proxy
Understand web security
1. Hashing Algorithm
I. MD5
II. SHA Family
III. Scrypt
IV. Bcrypt
2. HTTPS
3. CORS
4. SSL/TLS
Learn testing
1. Integration Testing
2. Unit Testing
3. Functional Testing
Containerization / Virtualization
1. Docker
2. Kubernetes
3. rkt
Architectural Patterns
1. Monolithic
2. Microservices
3. Serverless
4. Scaling (Horizontal & Vertical)
5. Load Balancers
Learn the basics of Internet
1. How does the internet work?
2. What is HTTP & HTTPS?
3. What is Domain Name?
4. What is IP Address?
5. DNS and how it works?
6. What is hosting?
7. What is SMTP?
Basics of front-end languages
1. HTML
2. CSS
3. JavaScript
Learn a back-end language
1. PHP
2. NodeJS
3. Ruby On Rails
4. Python
5. Go
5. C#
Just learn anyone of the above language but make sure you have in-depth understanding of that language.
I will recommend NodeJs or PHP.
Learn Version Control System
1. Basic Git Commands
2. Repo hosting services
I. GitHub
II. Gitlab
III. Bitbucket
Learn about Relational Databases
1. MySQL
2. PostgreSQL
3. MariaDB
4. MS SQL
5. Oracle
MySQL is the most popular one.
Learn about NoSQL databases
1. MongoDB
2. RethinkDB
3. CouchDB
4. DynamoDB
NoSQL are very popular databases. Many startups are opting for NoSQL databases instead of SQL databases.
Learn About APIs
1. REST
2. JSON APIs
3. HATOAS
4. Open API Spec and Swagger
5. Authentication
6. GraphQL
Learn about caching
1. CDN (Cloud Delivery Network)
2. Server-side caching
I. Redis
II. Memcached
3. Client-side caching
Web Servers
1. Nginx
2. Apache
3. Reverse Proxy
Understand web security
1. Hashing Algorithm
I. MD5
II. SHA Family
III. Scrypt
IV. Bcrypt
2. HTTPS
3. CORS
4. SSL/TLS
Learn testing
1. Integration Testing
2. Unit Testing
3. Functional Testing
Containerization / Virtualization
1. Docker
2. Kubernetes
3. rkt
Architectural Patterns
1. Monolithic
2. Microservices
3. Serverless
4. Scaling (Horizontal & Vertical)
5. Load Balancers
❤14👍7
Top 10 great tools for web developers.
It will save your 150+ hours 🚀
💨 DevBytes
💨 Splitbee
💨 Swipe Pages
💨 Clearbit
💨 ReadMe
💨 Storytale
💨 Firecamp
💨 Airtable
💨 JSON View Pro
💨 Excalidraw
It will save your 150+ hours 🚀
💨 DevBytes
💨 Splitbee
💨 Swipe Pages
💨 Clearbit
💨 ReadMe
💨 Storytale
💨 Firecamp
💨 Airtable
💨 JSON View Pro
💨 Excalidraw
👍7
Canva for Beginners
⭐️ Rating: 4.8 out of 5
🎬 10 video lessons
⏰ Duration: Less than 1 hour
🏃♂️ Self paced
Source: Canva
🔗 https://www.canva.com/designschool/courses/canva-101/?lesson=opening-canva-for-the-first-time
⭐️ Rating: 4.8 out of 5
🎬 10 video lessons
⏰ Duration: Less than 1 hour
🏃♂️ Self paced
Source: Canva
🔗 https://www.canva.com/designschool/courses/canva-101/?lesson=opening-canva-for-the-first-time
5 Useful Resources for Junior Web Developers
1. Diagrams - This is such a great web for draw a lot of diagrams you need. I use it for my databases as long as I need to share with my peers.
Visit : https://app.diagrams.net/
2. CSS Section Generator - If you want to take your website design to another level, this separator generator allows you to create different sections for your web.
Visit : https://wweb.dev/resources/css-separator-generator
3. Grid by example - The perfect place if you need to understand how grid layout works.
Visit : https://gridbyexample.com/
4. JSFiddle - If you need to test your code and you don't want to open VS Code, JSFiddle brings you the possibility to use an online editor.
Visit : https://jsfiddle.net/
5. Sweet Alerts - A beautiful tool for replacement alerts. It's a npm pakage so you need to install it as a dependencie.
Visit : https://sweetalert.js.org/
1. Diagrams - This is such a great web for draw a lot of diagrams you need. I use it for my databases as long as I need to share with my peers.
Visit : https://app.diagrams.net/
2. CSS Section Generator - If you want to take your website design to another level, this separator generator allows you to create different sections for your web.
Visit : https://wweb.dev/resources/css-separator-generator
3. Grid by example - The perfect place if you need to understand how grid layout works.
Visit : https://gridbyexample.com/
4. JSFiddle - If you need to test your code and you don't want to open VS Code, JSFiddle brings you the possibility to use an online editor.
Visit : https://jsfiddle.net/
5. Sweet Alerts - A beautiful tool for replacement alerts. It's a npm pakage so you need to install it as a dependencie.
Visit : https://sweetalert.js.org/
👍5❤3
⚡Algorithms Every Developer Should Know⚡
1. Sorting Algorithm: - It is the algorithm that arranges the order of the items in a list.
Bubble Sort , Merge Sort , Quicksort , Heap Sort.
2. Searching Algorithm: - It is the algorithm that finds an element in a data set.Binary Search Breadth-First Search(BFS) Depth-First Search(DFS)
3. Dynamic Programming: - DP is an algorithmic technique for solving an optimization problem by breaking it down into simpler sub-problems.
4. Recursion Algorithm: - Recursion is a problem-solving technique in which the solution is dependent on solutions to smaller instances of the same problem.
5. Divide and Conquer: - The Divide and Conquer algorithm consists of a dispute using the three steps listed below.
* Divide the original problem into sub-problems. * Conquer: Solve each sub-problem one at a time, recursively. * Combine: Put the solutions to the sub-problems together to get the solution to the whole problem.
6. Hashing: - Hashing is a technique or process that uses a hash function to map keys and values into a hash table. 'It is done to allow for quicker access to elements.
1. Sorting Algorithm: - It is the algorithm that arranges the order of the items in a list.
Bubble Sort , Merge Sort , Quicksort , Heap Sort.
2. Searching Algorithm: - It is the algorithm that finds an element in a data set.Binary Search Breadth-First Search(BFS) Depth-First Search(DFS)
3. Dynamic Programming: - DP is an algorithmic technique for solving an optimization problem by breaking it down into simpler sub-problems.
4. Recursion Algorithm: - Recursion is a problem-solving technique in which the solution is dependent on solutions to smaller instances of the same problem.
5. Divide and Conquer: - The Divide and Conquer algorithm consists of a dispute using the three steps listed below.
* Divide the original problem into sub-problems. * Conquer: Solve each sub-problem one at a time, recursively. * Combine: Put the solutions to the sub-problems together to get the solution to the whole problem.
6. Hashing: - Hashing is a technique or process that uses a hash function to map keys and values into a hash table. 'It is done to allow for quicker access to elements.
👍2
Things that a Web Developer must know concerning database storage and management:
🟡Characteristics of relational/non-relational data.
🟡Knowledge of NoSQL databases.
🟡Knowledge of web storage.
Following are some of the best databases you must learn
🟧Relational databases: Within the tables, data is stored in rows and columns. The relational database management system (RDBMS) is the program that allows you to create, update, and administer a relational database. Microsoft SQL Server, Oracle Database, MySQL, PostgreSQL, and IBM Db2 are examples of rational databases.
🟧NoSQL: NoSQL databases (aka “not only SQL”) are non-tabular, and store data differently than relational tables. NoSQL databases come in a variety of types based on their data model. The main types are document, key-value, wide-column, and graph. Apache Cassandra, MongoDB, CouchDB, and Couchbase are examples of NoSQL.
🟧Cloud database: It refers to any database that’s designed to run in the cloud. Like other cloud-based applications, cloud databases offer flexibility and scalability, along with high availability. Cloud databases are also often low-maintenance since many are offered via a SaaS model. Microsoft Azure SQL Database, Amazon Relational Database Service, Oracle Autonomous Database are examples of cloud database..
⚡Technology Stacks- MEAN, MERN, MeVn, Lamp
🔰MEAN Stack: MEAN stack development refers to the development process that falls within these particular sets of technologies MongoDB, ExpressJS, Angular, NodeJS.
🔰MERN Stack: It is is one of several variations of the MEAN stack (MongoDB, Express, Angular, Node), where the traditional Angular frontend framework is replaced with React JS. The main benefit of using MERN is the integration of React and its powerful library and capability to use code simultaneously on servers and browsers.
🔰MEVN Stack: Other variants of MEAN Stack, the MEVN Stack (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work. It is the open-source JavaScript software stack that has emerged as a new and evolving way to build powerful and dynamic web applications
🔰LAMP: It is an old classic industry standard when it comes to time-tested web development stacks, which comprises MySQL (Relational Database Management), Linux (Operating System), PHP (Programming Language), and Apache (HTTP server).
🟡Characteristics of relational/non-relational data.
🟡Knowledge of NoSQL databases.
🟡Knowledge of web storage.
Following are some of the best databases you must learn
🟧Relational databases: Within the tables, data is stored in rows and columns. The relational database management system (RDBMS) is the program that allows you to create, update, and administer a relational database. Microsoft SQL Server, Oracle Database, MySQL, PostgreSQL, and IBM Db2 are examples of rational databases.
🟧NoSQL: NoSQL databases (aka “not only SQL”) are non-tabular, and store data differently than relational tables. NoSQL databases come in a variety of types based on their data model. The main types are document, key-value, wide-column, and graph. Apache Cassandra, MongoDB, CouchDB, and Couchbase are examples of NoSQL.
🟧Cloud database: It refers to any database that’s designed to run in the cloud. Like other cloud-based applications, cloud databases offer flexibility and scalability, along with high availability. Cloud databases are also often low-maintenance since many are offered via a SaaS model. Microsoft Azure SQL Database, Amazon Relational Database Service, Oracle Autonomous Database are examples of cloud database..
⚡Technology Stacks- MEAN, MERN, MeVn, Lamp
🔰MEAN Stack: MEAN stack development refers to the development process that falls within these particular sets of technologies MongoDB, ExpressJS, Angular, NodeJS.
🔰MERN Stack: It is is one of several variations of the MEAN stack (MongoDB, Express, Angular, Node), where the traditional Angular frontend framework is replaced with React JS. The main benefit of using MERN is the integration of React and its powerful library and capability to use code simultaneously on servers and browsers.
🔰MEVN Stack: Other variants of MEAN Stack, the MEVN Stack (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work. It is the open-source JavaScript software stack that has emerged as a new and evolving way to build powerful and dynamic web applications
🔰LAMP: It is an old classic industry standard when it comes to time-tested web development stacks, which comprises MySQL (Relational Database Management), Linux (Operating System), PHP (Programming Language), and Apache (HTTP server).
👍13
Earn money as a web developer
🔰Building a SaaS:
A SaaS is a Software as a Service, an application or website that allows people to sign up and pay for the service.
Create digital products
You can create courses, software, ebooks, or any digital product that you want to distribute to customers worldwide. If you have a passion for web development and want to make extra money on the side, this will be a great opportunity for you.
🔰Create online courses:
You can make courses on web development and sell them on the sites like Udemy.
🔰Build websites for small business:
Now a days it becomes very hard to get work from freelancing site. So, you can make websites for your nearby small businesses.Most of small shops don’t have a web developer on staff, but would be willing to pay a reasonable amount for some web development/design help. Send an email out to the owner letting them know you’re a local web developer, a fan of their business, and want to help out by extending your services at a discounted rate.
🔰Establish your Digital Presence:
If you want someone to hire you as a freelancer, set yourself apart. First, get started on GitHub and start blogging or you may start youtube channel (either on your own blog, our as a guest blogger). If you learn something new, work on a project, write a clever bit of code, make sure to share it! Establishing your digital presence is a great way to establish credibility, even if you’re new to the industry.
🔰Create niche websites to Rent or Sell:
You can use these skills to build a website in a particular niche such as "Atlanta Hairdresser".
a) Purchase a domain in your selected niche.
b)Build a simple website for this niche.
c) Start creating relevant posts and content to get traffic to your site and to rank on Google.
Once the site is ranking on Google to the point where it's getting some organic decent traffic, you can then start approaching businesses in this particular niche you have chosen (in our example, hair salons and barbershops in Atlanta) and offer to rent or sell the website to them.
🔰Building a SaaS:
A SaaS is a Software as a Service, an application or website that allows people to sign up and pay for the service.
Create digital products
You can create courses, software, ebooks, or any digital product that you want to distribute to customers worldwide. If you have a passion for web development and want to make extra money on the side, this will be a great opportunity for you.
🔰Create online courses:
You can make courses on web development and sell them on the sites like Udemy.
🔰Build websites for small business:
Now a days it becomes very hard to get work from freelancing site. So, you can make websites for your nearby small businesses.Most of small shops don’t have a web developer on staff, but would be willing to pay a reasonable amount for some web development/design help. Send an email out to the owner letting them know you’re a local web developer, a fan of their business, and want to help out by extending your services at a discounted rate.
🔰Establish your Digital Presence:
If you want someone to hire you as a freelancer, set yourself apart. First, get started on GitHub and start blogging or you may start youtube channel (either on your own blog, our as a guest blogger). If you learn something new, work on a project, write a clever bit of code, make sure to share it! Establishing your digital presence is a great way to establish credibility, even if you’re new to the industry.
🔰Create niche websites to Rent or Sell:
You can use these skills to build a website in a particular niche such as "Atlanta Hairdresser".
a) Purchase a domain in your selected niche.
b)Build a simple website for this niche.
c) Start creating relevant posts and content to get traffic to your site and to rank on Google.
Once the site is ranking on Google to the point where it's getting some organic decent traffic, you can then start approaching businesses in this particular niche you have chosen (in our example, hair salons and barbershops in Atlanta) and offer to rent or sell the website to them.
😁6👍1
Basic web development roadmap
🟧
1.Learn: How websites work, front-end vs back-end, code editor
🟧
2: Basic front-end:
a. Html
b. Css
c. Javascript
Expected time 7+14+30=51 days.
🟧
3. Learn front-end frameworks:
a. Learn css framework ( Bootstrap , Tailwind css , ...)
b. Learn JavaScript frameworks ( angular, react , vue...)
Expected time minimum 60 days.
🟧
4. Learn database
a. MySQL
b. MongoDB
There are many more. Choose one and learn.
🟧
5. Learn backend programming languages:
a. Php
b. Nodejs
There are many more. Learn any one.
Expected time: 60 days
🟧
6. Do some projects and clone some websites.
▫️▫️🟧▫️▫️
🟧
1.Learn: How websites work, front-end vs back-end, code editor
🟧
2: Basic front-end:
a. Html
b. Css
c. Javascript
Expected time 7+14+30=51 days.
🟧
3. Learn front-end frameworks:
a. Learn css framework ( Bootstrap , Tailwind css , ...)
b. Learn JavaScript frameworks ( angular, react , vue...)
Expected time minimum 60 days.
🟧
4. Learn database
a. MySQL
b. MongoDB
There are many more. Choose one and learn.
🟧
5. Learn backend programming languages:
a. Php
b. Nodejs
There are many more. Learn any one.
Expected time: 60 days
🟧
6. Do some projects and clone some websites.
▫️▫️🟧▫️▫️
👍18🔥5👏3❤1
How To Develop A Text Editor For The Web
.
.
.
.
👉 https://www.smashingmagazine.com/2022/02/develop-text-editor-web/
#texteditor #webdevelopment
.
.
.
.
👉 https://www.smashingmagazine.com/2022/02/develop-text-editor-web/
#texteditor #webdevelopment
How to Use Optional Chaining in JavaScript
https://www.freecodecamp.org/news/javascript-optional-chaining/
https://www.freecodecamp.org/news/javascript-optional-chaining/
freeCodeCamp.org
How to Use Optional Chaining in JavaScript
Optional chaining is a safe and concise way to perform access checks for nested object properties. The optional chaining operator ?. takes the reference to its left and checks if it is undefined or null. If the reference is either of these nullish va...
👍2
😮 10 Sites to get Free illustrations for your next project
🔹 Freepik
🔹 unDraw
🔹 DrawKit
🔹 Graphic Surf
🔹 Humaaans
🔹 ManyPixels
🔹 Open Peeps
🔹 Open Doodles
🔹 Absurd Design
🔹 Free Illustrations
🔹 Freepik
🔹 unDraw
🔹 DrawKit
🔹 Graphic Surf
🔹 Humaaans
🔹 ManyPixels
🔹 Open Peeps
🔹 Open Doodles
🔹 Absurd Design
🔹 Free Illustrations
👍13🥰2❤1