Journey to Become a Web Developer From Scratch [Step-by-Step Guide]

Before getting in, let’s discuss about objectives.

• The difference between the Internet and the World Wide Web (WWW) (W3) and short story of each one.
• Description of client-server architecture between web browsers and web servers
• How does a browser communicate with a web server
  src: https://www.quora.com/How-does-a-browser-communicate-with-a-web-server

Introduction

• The Internet and web programming technologies you'll learn in this book are designed to be portable, allowing you to design web pages and applications that run across an enormous range of Internet-enabled devices.
• Client-side programming technologies are used to create web pages
  and applications that are executed on the client (browser in the user device)
• Server-side programming - applications that respond to client
  requests e.g. Searching the internet, ordering online, shopping on eBay, etc.

Internet and World Wide Web

• INTERNET: a global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols.
• WWW (W3):  an information system on the Internet which allows documents to be connected to other documents by hypertext links, enabling the user to search for information by moving from one document to another.

Below is a list of protocols used for the world wide web:

• ARP: Address Resolution Protocol
• DHCP: Dynamic Host Configuration Protocol
• DNS: Domain Name Service
• DSN: Data Source Name
• FTP: File Transfer Protocol
• HTTP: Hypertext Transfer Protocol
• IMAP: Internet Message Access Protocol
• ICMP: Internet Control Message Protocol
• IDRP: ICMP Router-Discovery Protocol
• IP: Internet Protocol
• IRC: Internet Relay Chat Protocol
• POP3: Post Office Protocol version 3
• PAR: Positive Acknowledgment and Retransmission
• RLOGIN: Remote Login
• SMTP: Simple Mail Transfer Protocol
• SSL: Secure Sockets Layer
• SSH: Secure Shell
• TCP: Transmission Control Protocol
• TELNET: TCP/IP Terminal Emulation Protocol
• UPD: User Datagram Protocol
• UPS: Uninterruptible Power Supply

Web Address

• Any device connected to the Internet must have a unique IP address:
  
  i. IPv4 is 32 bit: a.b.c.d where a, b, c, d on the range (0..255)
  ii. IPv6 is 128 bit, which allows for many more addresses to connect:
  

  2 ^ 128 = (128/32) x maxIpAdressesOF(IPV4) ≈ 4.3billion unique IP addresses

• Computers understand IP addresses far better
  than people who prefer FQDNs
  
  i. FQDN = Fully Qualified Domain Name
  ii. The Domain Name Server (DNS) does the translation between an IP address and corresponding FQDN
  iii. Eg. FQDN google.com has IP address 216.58.212.46
  
• URL, URN and URI
  
  i. Uniform Resource Locator (URL) is the actual location
  of a resource on the web
  ii. The Uniform Resource Name (URN) has the same
  format as the URL but may not refer to an actual resource
  iii. The term Uniform Resource Identifier (URI) is
  a generalization of the two above terms and can refer to either of them.

Technologies that we will learn:

• HTML 5: for describing the structure and
• content of the web page
• CSS3: for stylizing our pages
• JavaScript: to give our pages "behaviors"
• DOM and DHTML to “connect” the above three technologies
• PHP for server-side scripting
• MySQL for server database
  

HTML5

• HTML (HyperText Markup Language) is a special computer language called markup language designed to specify the content and structure of web pages.
• HTML enables us to create content that can be displayed on a wide range of devices that have internet access such as smartphones, desktops, laptops, tablets, and more.
• A stricter version of HTML called XHTML (Extensible HyperText Markup Language) is XML-based (eXtensible Markup Language), and is often used today.
• Many of the technologies we'll get to know later create web pages in the form of XHTML documents, but the trend is heading towards HTML5 which is the newest version of HTML.

CASCADING STYLE SHEET (CSS)

• Although HTML5 offers some control over the presentation of a document, it is best not to mix the presentation with the content.
• Cascading Style Sheets (CSS) are used to specify the presentation, or styling elements in a website (eg, fonts, partitions, sizes, colors, positioning).
• CSS is designed to style web pages regardless of their content and structure.
• By separating the style from the content and layout of the site, we can easily change the look of the pages of an entire website, or part of a web site, simply by sharing one style sheet with another.
• CSS3 is the current version of CSS.
  

JavaScript

• JavaScript helps to build dynamic web pages (eg, sites that can be modified in response to user-initiated events, etc.) and computer applications.
• It enables us to do client-side programming of web applications.
• JavaScript was created by Netscape and together with Microsoft have influenced the standardization of JavaScript.
• JavaScript is a portable scripting language.
• Programs written in JavaScript can be executed in browsers on a wide range of devices.
• ECMAScript 6 (ES6)

BROWSERS AND IT’S PORTABILITY

• Providing the same view to clients with different browsers is one of the biggest challenges of web application development.
• There is currently no convention that software houses have to adhere when creating web browsers.
• Although browsers share a common set of features, each browser may present pages differently.
• Browsers come in many versions and can be installed in different platforms (Microsoft Windows, Apple Macintosh, Linux, UNIX, etc.).
• The creators add features to each new version that sometimes results in incompatibility between platforms.

JQUERY

• jQuery (jQuery.org) is currently the most popular JavaScript library.
• jQuery simplifies programming in JavaScript by making it easier to manipulate elements of a web page and interact with servers from different browsers.
• It offers a library of GUI controls that can be used to enhance the view of web pages.

SUPPORT

• It is difficult to create web pages that appears the same in all versions of each browser.
• Support for HTML5, CSS3 and JavaScript features varies from one browser to another.
• (http://html5test.com/) rates each browser based on its support for the latest features of these evolving standards.
• http://caniuse.com/ presents a list of features supported by each browser.

HTML, CSS and JavaScript Validators

• We need to use regular HTML5, CSS3 and JavaScript syntax to ensure that browsers process our documents properly.
• What is an HTML Validator? - HTML validator is a program or service that checks for the HTML (Hypertext Markup Language) markup for any syntax errors. Errors like open tags, missing quotation marks, extra spaces etc. that can cause a web page to appear remarkably in different the pattern than the creator planned to.

To become a web developer i think a person need to contain a really good concept on these topic. If they try to merge them from here and there, for sure they will face struggling during the journey.

Useful Resources:

Furthermore information:

• https://learn.shayhowe.com/html-css/
• https://www.javascript.com/
• https://jquery.org/
• https://en.wikipedia.org/wiki/IPv4
• https://en.wikipedia.org/wiki/IPv6