Web Development
Web development term is coined from (website + development) which is the creation of a website, websites run on browsers (eg- chrome, brave, opera, etc.).web development is used to create websites as well as web Apps, both are developed by the same languages through Html, Css & Javascript. web development also has two types: - Frontend Development and Backend Development
There are two types of web pages first is static and the second is dynamic. Static means something which is fixed or constant and Dynamic means changing as per time, user, location, etc.
Note : Nowadays most of the websites & web applications are dynamic because the websites demands regulary to update
HTML
HTML stands for Hyper Text Markup Language and was developed by Tim Berners Lee in 1993, it is the basic building block of the webpage. HTML language runs only on web browsers (such as Chrome, brave, Mozilla Firefox, etc). There are approximately 105 elements and attributes, IDs, Classes, etc in HTML5.
HTML BoilerPlate Code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>First Webpage</title>
</head>
<body>
</body>
</html>
In the above code, you can say the syntax of HTML, here
<!DOCTYPE HTML> defines the version of the HTML language i.e. 5th version.
<head>...</head> contained the webpage's information and some machine encoding parts and elements in it such as metatags, title, style, etc.
<title>...</title> is used to give the name of the webpage which is present on the tab bar of our browsers.
<body>...</body> element is most important because this is the only element that displays data or information of a webpage on our browsers.i.e the actual code for website and web apps are written in the body element
A resource to learn HTML - MDN WebDocs
CSS
CSS stands for Cascading Style Sheets, CSS was introduced by Hakon Wium Lie on 10 October 1994. this language is also running on browsers, you can say it is a companion to HTML, the basic need & purpose of CSS is to give styling to our websites & web apps for better appealing & user interfaces through CSS we can do a lot of things to our webpages such as layout, colouring, animation, transition and fonts etc.
Syntax of CSS -
Selector { property : value ; }
A resource to learn CSS -MDN WebDocs
JAVASCRIPT
Javascript is the programming or scripting language of the web used with HTML & CSS, the functioning of the website or Web apps works through the use of javascript. JavaScript was invented by Brendan Eich in 1995. there is no specific syntax for javascript. As with other programming languages javascript has datatypes, functions, arrays, loops, operators and many more.
A resource to learn CSS - W3Schools
Note : As you know html is the only language that our browser understand, so how css & js is implemented or functions on our browsers , well we have the solution given below in brief
Methods to add CSS files with HTML
Inline css - In this, we write the css code in the tag by adding a style attribute to it.
<!DOCTYPE html> <html> <head> <title>Inline CSS Example</title> </head> <body> <h1 style="color: #333333; text-align: center;">Welcome to my website</h1> <p style="color: #666666; line-height: 1.5;">This is an example of inline CSS. The styles are directly applied to the HTML elements using the style attribute.</p> <p>This paragraph has a <span style="background-color: yellow; font-weight: bold;">highlighted</span> word.</p> </body> </html>Internal css - In this, we have to write the css code in the style element within the head element.
<!DOCTYPE html> <html> <head> <title>Internal CSS Example</title> <style> /* Internal CSS */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { color: #333333;text-align: center; } p { color: #666666; line-height: 1.5; } </style> </head> <body> <h1>Welcome to my website</h1> <p>This is an example of internal CSS. The styles defined here will be applied to the elements in this HTML document.</p> <p>This paragraph has a <span>highlighted</span> word.</p> </body> </html>External css - In this, css code is written in another file and you can name it as a style.css for writing css only
<!DOCTYPE html> <html lang="en"> <head> <title>External CSS Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> //add css file with link element </head> <body> <h1>Welcome to my website</h1> <p>This is an example of external CSS. The styles are defined in a separate CSS file.</p> </body> </html>/* External CSS */ body { font-family: Arial, sans-serif; background-color: #f2f2f2;} h1 { color: #333333; text-align: center; } p { color: #666666; line-height: 1.5; }
Methods to add javascript files with HTML
Internal js - In this, the javascript code is written script element before the closing tag of the body element in the HTML code.
<!DOCTYPE html> <html> <head> <title>Internal JavaScript Example</title> <script> // Internal JavaScript Code function greet() { var name = prompt("Please enter your name:"); if (name) { alert("Hello, " + name + "! Welcome to my website."); } } </script> </head> <body> <h1>Welcome to my website</h1> <button onclick="greet()">Click me</button> </body> </html>External js - In this, the javascript code is written in separate files such as css is written, named as a script.js
<!DOCTYPE html> <html> <head> <title>External JavaScript Example</title> <script src="script.js"></script> </head> <body> <h1>Welcome to my website</h1> <button onclick="greet()">Click me</button> </body> </html>// External JavaScript Code function greet() { var name = prompt("Please enter your name:"); if (name) { alert("Hello, " + name + "! Welcome to my website."); } }
After learning these languages Choose Your Domain
Want to become a frontend developer go with the below frameworks -
CSS Frameworks:
Bootstrap
Foundation
Bulma
Semantic UI
Materialize CSS
Tailwind CSS
JavaScript Frameworks:
React
Angular
Vue.js
Ember.js
Backbone.js
Want to become a Backend developer go with the below frameworks -
Node.js (JavaScript):
Express.js
Nest.js
Python:
Django
Flask
Ruby:
Ruby on Rails
Sinatra
Java:
Spring Boot
Play Framework
PHP:
Laravel
Symfony
C#/.NET:
Note : Above given frameworks demanding changes as per time , so before learning any framework research it.
Get familiar with an IDE(Integrated Development Environment)
It is a software application that provides tools and features to developers for writing, testing, and debugging code. there are a lot of IDEs and have different functionalities with different tasks.
The most popular IDE's are -
Visual Studio Code(VS code)
IntelliJ IDEA
Eclipse
PyCharm
Sublime Text
Get familiar with a VCS(Version Control System)
Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. It allows you to revert files to a previous state or where your last code has not any bugs.
Most popular VCS -
- GIT (get familiar with this tool)
Download with this link - Free e-book of Git
Recommendation : If you want to Learn web development for free there are 2 most popular youtube channels that will give you high quality of content 1.CodeWithMosh(English) 2. CodewithHarry(Hindi)
If you want to learn web development on Udemy there is a paid course The complete web development bootcamp by Angelina Yu (Approx ₹450 on sale) is here for you .
Conclusion
The tech industry changes rapidly from time to time so before learning anything research wisely. I'll teach you about Web-based platforms used for VCS (Github, Gitlab, Bitbucket, etc) in my next article, so stay tuned.
Follow Me On Socials :
Like👍|Share📲|Comment💭