The developers who deals with the front end technologies are known as Front End Developers. While Back End Developers exploit the back end technologies to develop the web application. The developers who is well versed with both front end and back end technologies are known as Full Stack Developers.
Lets start learning with some basics terminologies.
Affectionately called “The Web”.
It is a collection of information stored on the networked computers over the world.
Individual document pages on the World Wide Web are called web pages and are accessed with a software application running on the user's computer, commonly called a web browser.
Web pages may contain text, images, videos, and other multimedia components, as well as web navigation features consisting of hyperlinks.
The WWW was proposed in 1991 by Tim Berners-Lee at CERN.
WEB AND INTERNET
Web or Internet, both are not the same things.
The Internet is a collection of computers or networking devices connecting together. Devices can communicate with each other.
The Web is a collection of documents that are interconnected by hyper-links.
These documents are accessed by web browsers and provided by web servers.
Client: Any computer on the network that requests services from another computer on the network.
Server: Any computer that receives requests from client computers, processes and sends the output.
Web Page: Any page that is hosted on the Internet. Web Site: Collection of interlinked web pages that is hosted on the Internet.
Web Development: The process of creating, modifying web pages.
Web Browser: A program that receives information from the web. E.g. IE, Chrome, Mozilla etc
HOW DOES THE WEB WORK?
The web information is stored in the web pages. (In HTML Format)
The web pages are stored in the computers called web servers. (In the web server file system.)
The computer reading the pages is called web clients with specific web browsers. ( IE, Netscape, Mozilla, Chrome, Safari, Opera etc.)
The web server waits for the request from the web clients over the Internet.
Two categories of web development
WHAT IS HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags
"HTML tags" and "HTML elements" are often used to describe the same thing.
<p>This is a paragraph.</p>
HTML Page Structure
• HTML can be edited by using a professional HTML editor like:
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
• Notepad ++ / Notepad
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how
the content of the HTML page is to be presented/displayed to the user
It helps the web designers to apply style on HTML tags.
You can add new looks to your old HTML documents.
You can completely change the look of your website with only a few changes in CSS code.
A CSS rule set contains a selector and a declaration block.
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
How to add CSS
It is a case-sensitive language.
It provides good control to the users over the web browsers.
LIST OF WEB TECHNOLOGIES USED IN WEB DEVELOPMENT
HTML: HTML stands for Hyper Text Markup Language. With HTML you can create your own Website.
CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
XML: XML stands for eXtensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable. XML is a W3C Recommendation.
PHP: PHP stands for Hypertext Preprocessor. PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used, free, and efficient server- side scripting language.
ASP: ASP stands for Active Server Pages. ASP is a development framework for building web pages. ASP is a Microsoft's first server side scripting language.
SQL: SQL stands for Structured Query Language.: SQL is a standard language for accessing and manipulating databases. ● SQL is an ANSI (American National Standards Institute) standard.
ExpressJS: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is an open source framework developed and maintained by the Node.js foundation.
AWS: AWS stands for Amazon Web Services. AWS is Amazon’s cloud web hosting platform that offers flexible, reliable, scalable, easy-to- use, and cost-effective solutions.
Firebase: Firebase is a backend platform for building Web, Android and IOS applications. It offers real time database, different APIs, multiple authentication types and hosting platform.
CakePHP: CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. It is based on an MVC architecture that is both powerful and easy to grasp. It guarantee a strict but natural separation of business logic from data and presentation layers.
CodeIgnitor: CodeIgniter is a powerful PHP framework built for developers who need a simple and elegant toolkit to create full-featured web applications. It is an Open Source framework. It has a very rich set of functionality, which will increase the speed of website development work.
Laravel: Laravel is a powerful MVC PHP framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications. It offers a robust set of tools and an application architecture that incorporates many of the best features of frameworks like CodeIgniter, Yii, ASP.NET MVC, Ruby on Rails, Sinatra, & others.
Zend: Zend is an open source PHP framework. It is pure object-oriented and built around the MVC design pattern. Zend framework contains collection of PHP packages which can be used to develop web applications and services.
Yii: The Yii framework is an open-source PHP framework for rapidly-developing, modern Web applications. It is built around the Model-View- Controller composite pattern. Yii provides secure and professional features to create robust projects rapidly.
Symfony: Symfony is an open-source PHP web application framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications.
Magento: Magento is an open source E-commerce software, created by Varien Inc., which is useful for online business. It has a flexible modular architecture and is scalable with many control options that is helpful for users. Magento uses E-commerce platform which offers organizations ultimate E-commerce solutions and extensive support network.
WordPress: WordPress is an open source Content Management System (CMS), which allows the users to build dynamic websites and blog. WordPress is the most popular blogging system on the web and allows updating, customizing and managing the website from its back-end CMS and components.
Joomla: Joomla is an open source CMS, which is used to build websites and online applications. It is free and extendable which is separated into front- end templates and back-end templates (administrator). Joomla is developed using PHP, Object Oriented Programming, software design patterns and MySQL (used for storing the data).
Drupal: Drupal is a free and open source Content Management System (CMS) that allows organizing, managing and publishing your content. This reliable and secure CMS is built on PHP based environment and powers millions of applications and websites. WhiteHouse.gov, World Economic Forum, Stanford University, Examiner.com etc...