Web Development - HTML, CSS & JavaScript
47.3K subscribers
1.44K photos
3 videos
32 files
267 links
Learn to code and become a Web Developer with HTML, CSS, JavaScript , Reactjs, Wordpress, PHP, Mern & Nodejs knowledge

Managed by: @love_data
Download Telegram
Channel name was changed to Β«Javascript & Web DevelopmentΒ»
LEGEND Form Project πŸ˜…πŸ˜€
-----------------------------------------------------
Complete Source Code πŸ‘‡
-----------------------------------------------------

<html>
<head>
<style>

.outer{ 
margin:auto;
height:300px;
width:400px;
border:2px solid black;
position:relative
}
p{
margin-left:80px;
}
.in{
margin-left:80px;
padding:10px
}
#bt{
margin-top:20px;
position:absolute;
left:150px;
}
#bt:hover{
background:green;
font-size:13px;
cursor:pointer;
color:white;
}
</style>
<script>
function fa(){
if(a.value=="" || b.value==""){
f()
document.getElementById("a").style.border="3px solid red"
document.getElementById("b").style.border="3px solid red"
bt.value="Pahila data tak"
}
else{
document.getElementById("a").style.border="3px solid green"
document.getElementById("b").style.border="3px solid green"
bt.value="Ha thik ahe ata"
bt.style.left="120px";
}
}
flag=1
function f(){
if(flag==1){
bt.style.left="210px"
flag=2
}
else if(flag==2){
bt.style.left="80px"
flag=1
}
}
</script>
</head>
<body>
<div class="outer">
<h1 style="text-align:center">Legend form</h1>
<p>Enter Id</p>
<input class="in" type="text" placeholder="Enter id" id="a"/>
<p>Enter Confirm Pass</p>
<input class="in" type="password" placeholder="Enter password" id="b"/>
<br>
<input type="submit" onmouseenter="fa()" onclick="alert('waaaa')" id="bt" />

</div>

</body>


</html>
Complete JavaScript Road MapπŸ”₯

A-Z JavaScriptπŸ‘‡

1.Variables
↳ var
↳ let
↳ const

2. Data Types
↳ number
↳ string
↳ boolean
↳ null
↳ undefined
↳ symbol

3.Declaring variables
↳ var
↳ let
↳ const

4.Expressions
Primary expressions
↳ this
↳ Literals
↳ []
↳ {}
↳ function
↳ class
↳ function*
↳ async function
↳ async function*
↳ /ab+c/i
↳ string
↳ ( )

Left-hand-side expressions
↳ Property accessors
↳ ?.
↳ new
↳ new .target
↳ import.meta
↳ super
↳ import()

5.operators
↳ Arithmetic Operators: +, -, *, /, %
↳ Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
↳ Logical Operators: &&, ||, !

6.Control Structures
↳ if
↳ else if
↳ else
↳ switch
↳ case
↳ default

7.Iterations/Loop
↳ do...while
↳ for
↳ for...in
↳ for...of
↳ for await...of
↳ while

8.Functions
↳ Arrow Functions
↳ Default parameters
↳ Rest parameters
↳ arguments
↳ Method definitions
↳ getter
↳ setter

9.Objects and Arrays
↳ Object Literal: { key: value }
↳ Array Literal: [element1, element2, ...]
↳ Object Methods and Properties
↳ Array Methods: push(), pop(), shift(), unshift(),
splice(), slice(), forEach(), map(), filter()

10.Classes and Prototypes
↳ Class Declaration
↳ Constructor Functions
↳ Prototypal Inheritance
↳ extends keyword
↳ super keyword
↳ Private class features
↳ Public class fields
↳ static
↳ Static initialization blocks

11.Error Handling
↳ try,
↳ catch,
↳ finally (exception handling)

ADVANCED CONCEPTS
--------------------------

12.Closures
↳ Lexical Scope
↳ Function Scope
↳ Closure Use Cases

13.Asynchronous JavaScript
↳ Callback Functions
↳ Promises
↳ async/await Syntax
↳ Fetch API
↳ XMLHttpRequest

14.Modules
↳ import and export Statements (ES6 Modules)
↳ CommonJS Modules (require, module.exports)

15.Event Handling
↳ Event Listeners
↳ Event Object
↳ Bubbling and Capturing

16.DOM Manipulation
↳ Selecting DOM Elements
↳ Modifying Element Properties
↳ Creating and Appending Elements

17.Regular Expressions
↳ Pattern Matching
↳ RegExp Methods: test(), exec(), match(), replace()

18.Browser APIs
↳ localStorage and sessionStorage
↳ navigator Object
↳ Geolocation API
↳ Canvas API

19.Web APIs
↳ setTimeout(), setInterval()
↳ XMLHttpRequest
↳ Fetch API
↳ WebSockets

20.Functional Programming
↳ Higher-Order Functions
↳ map(), reduce(), filter()
↳ Pure Functions and Immutability

21.Promises and Asynchronous Patterns
↳ Promise Chaining
↳ Error Handling with Promises
↳ Async/Await

22.ES6+ Features
↳ Template Literals
↳ Destructuring Assignment
↳ Rest and Spread Operators
↳ Arrow Functions
↳ Classes and Inheritance
↳ Default Parameters
↳ let, const Block Scoping

23.Browser Object Model (BOM)
↳ window Object
↳ history Object
↳ location Object
↳ navigator Object

24.Node.js Specific Concepts
↳ require()
↳ Node.js Modules (module.exports)
↳ File System Module (fs)
↳ npm (Node Package Manager)

25.Testing Frameworks
↳ Jasmine
↳ Mocha
↳ Jest

------------------- END-------------------

Some Good Resources To Learn JavaScript
1.Documentation

Mozilla MDN Web Docs
developer.mozilla.org/en-US/docs/Web…
DevDocs
devdocs.io/javascript/

2. Useful Channel's

Javascript Courses: https://t.me/javascript_courses
Programming Resources: https://t.me/programming_guide
FreeCodeCamp: youtube.com/c/FreeCodeCamp

Hope it helps 😊🌱
Rust free courses and learning materials

Non-Video tutorials:

Rust Tutorial
by University of Virginia (cs4414 Spring 2014.)
Authors: Alex Lamana, Rob Michaels, Wil Thomason, and David Evans for
http://aml3.github.io/RustTutorial/html/toc.html

24daysofrust
by Zbigniew Siciarz
http://zsiciarz.github.io/24daysofrust/index.html

Introduction to Rust Tutorial
by CoderHQ
https://www.koderhq.com/tutorial/rust/#tutorial-list

Take your first steps with Rust
by Microsoft
⏰ 5 hr 31 min
πŸ“š 11 Modules
https://docs.microsoft.com/en-us/learn/paths/rust-first-steps/
Hi guys, yesterday I got copyright strike on one of my telegram channel. I'll shift some of my channel content to this channel as a backup. Please join it
πŸ‘‡πŸ‘‡
https://t.me/Interview_Jobs

Sorry for the inconvenience
Web development encompasses a wide range of concepts and technologies. Here are some essential concepts that every web developer should understand:

### 1. HTML (HyperText Markup Language)
- Purpose: Structure of a webpage.
- Core Elements: <html>, <head>, <body>, <div>, <span>, <p>, <a>, <img>, etc.
- HTML5: Latest standard with new elements like <header>, <footer>, <article>, and <section>.

### 2. CSS (Cascading Style Sheets)
- Purpose: Styling of a webpage.
- Core Concepts: Selectors, properties, values, specificity, box model.
- CSS3: Latest standard with features like Flexbox, Grid, transitions, and animations.

### 3. JavaScript
- Purpose: Client-side scripting to make web pages interactive.
- Core Concepts: Variables, data types, functions, events, DOM manipulation, ES6+ features (let/const, arrow functions, promises, async/await).

### 4. Responsive Design
- Purpose: Ensuring web pages look good on all devices (desktops, tablets, smartphones).
- Core Techniques: Media queries, fluid grids, flexible images.
- Frameworks: Bootstrap, Foundation.

### 5. Version Control/Git
- Purpose: Managing code changes and collaboration.
- Core Concepts: Repositories, commits, branches, merges, pull requests.
- Platform: GitHub, GitLab, Bitbucket.

### 6. Web Performance Optimization
- Purpose: Improving the speed and efficiency of web pages.
- Techniques: Minification, compression, caching, lazy loading, code splitting.

### 7. SEO (Search Engine Optimization)
- Purpose: Improving the visibility of web pages in search engines.
- Core Concepts: Keywords, meta tags, alt attributes, sitemaps, clean URLs.

### 8. Web Accessibility
- Purpose: Making web content usable for people with disabilities.
- Standards: WCAG (Web Content Accessibility Guidelines).
- Practices: Semantic HTML, ARIA roles, keyboard navigation, color contrast.

### 9. Back-End Development
- Purpose: Server-side logic and database management.
- Languages: Python, Ruby, PHP, Node.js, Java.
- Databases: SQL (MySQL, PostgreSQL), NoSQL (MongoDB).

### 10. APIs (Application Programming Interfaces)
- Purpose: Allowing different software systems to communicate.
- Types: RESTful, GraphQL.
- Core Concepts: Endpoints, methods (GET, POST, PUT, DELETE), JSON, XML.

### 11. Security
- Purpose: Protecting web applications from vulnerabilities.
- Threats: SQL injection, XSS (Cross-Site Scripting), CSRF (Cross-Site Request Forgery).
- Practices: HTTPS, input validation, authentication, and authorization.

### 12. Frameworks and Libraries
- Front-End: React, Angular, Vue.js.
- Back-End: Express.js (Node.js), Django (Python), Ruby on Rails (Ruby).
- CSS: Sass, LESS.

### 13. DevOps
- Purpose: Streamlining the development, deployment, and operations of applications.
- Practices: Continuous Integration/Continuous Deployment (CI/CD), containerization (Docker), orchestration (Kubernetes).

### 14. Testing
- Purpose: Ensuring the reliability and quality of web applications.
- Types: Unit testing, integration testing, end-to-end testing.
- Tools: Jest, Mocha, Cypress, Selenium.

### 15. Cloud Services
- Purpose: Hosting and managing web applications.
- Providers: AWS, Azure, Google Cloud Platform.
- Services: Compute (EC2), Storage (S3), Databases (RDS).

You can find more Web Development Resources here πŸ‘‡πŸ‘‡
https://topmate.io/coding/930165

Share our telegram channel with your friends and family πŸ‘‡πŸ‘‡
https://t.me/webdevcoursefree

ENJOY LEARNING πŸ‘πŸ‘
🌟🌟20 passive income ideas for web developers 🌟🌟

Create a WordPress plugin and sell it on the WordPress Plugin Repository.

Build a web application and charge a subscription fee for access.

Develop and sell website templates on platforms like ThemeForest.

Write an eBook on web development and sell it on platforms like Amazon Kindle.

Create a course on web development and sell it on platforms like Udemy or Coursera.
Develop a web-based tool or app and charge a subscription fee for access.

Build a premium version of a free plugin or theme and sell it on your own website.

Create a premium version of a free web application or tool and sell it on your own website.

Develop and sell a custom WordPress theme to clients.

Create a membership site that provides access to exclusive web development resources.

Build a SaaS (Software as a Service) product and charge a monthly subscription fee.

Develop and sell mobile apps for iOS or Android.

Create and sell digital products like stock images or graphics on platforms like Creative Market.

Build a community site and charge a membership fee for access.

Offer premium support or consulting services to clients who purchase your products.

Develop and sell a website hosting service.

Create and sell a website monitoring tool.

Develop and sell a website security service.

Create and sell a website backup and recovery service.

Offer a website maintenance service to clients who want to outsource their website management.

You can find more Web Development Resources here πŸ‘‡πŸ‘‡
https://topmate.io/coding/930165

Share our telegram channel with your friends and family πŸ‘‡πŸ‘‡
https://t.me/webdevcoursefree
Beginners, Do yourself a favor!

β€’ Open your laptop
β€’ Open YouTube
β€’ Type HTML crash course
β€’ Start learning
β€’ Learn CSS alongside
β€’ Ask questions to ChatGPT
β€’ Build projects
β€’ Push code to GitHub
β€’ Share your progress on LinkedIn

Don't think much.
This is the right time πŸ‘πŸ»
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).

You can find more Web Development Resources here πŸ‘‡πŸ‘‡
https://topmate.io/coding/930165

Share our telegram channel with your friends and family πŸ‘‡πŸ‘‡
https://t.me/webdevcoursefree