Intro To Web Development.. From Where to Start…….?

Reading Time: 11 minutes

-By Hrishabh Sharma

 

 

About this article:
This article is not for making you master in this web development field but will        definitely make you more comfortable…

Prerequisites:
No prerequisites buddy,be happy 😛
Just a Good text editor like Atom,Sublime Text 3 ,etc will be enough.
So let’s  start this journey.
Let`s move on to a basic question:

How the websites work?
       Computers connected to the web are called clients and servers. A simplified  diagram of how they interact might look like this:

                                          Intro To Web Development.. From Where to Start…….?

  • Clients are the typical web user’s internet-connected devices (for example, your computer connected to your Wifi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
  • Servers are computers that store web pages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user’s web browser.

           The client and server we’ve described above don’t tell the whole story. There are many other parts involved, and we’ll describe them below.

            For now, let’s imagine that the web is a road. On one end of the road is the client,  which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.


Intro To Web Development.. From Where to Start…….?

      In addition to the client and the server, we also need to say hello to:

  • Your internet connection: Allows you to send and receive data on the web. It’s basically like the street between your house and the shop.
  • TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the web. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around).
  • DNS: Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the web site’s real address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.
  • HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
  • Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
    • Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you’ll meet other technologies a bit later.
    • Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

So what happens, exactly?

 When you type a web address into your browser (for our analogy that’s like walking to  the shop):

  1. The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop).
  2. The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
  3. Provided the server approves the client’s request, the server sends the client a “200 OK” message, which means “Of course you can look at that website! Here it is”, and then starts sending the website’s files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
  4. The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).

What is DNS?
    Real web addresses aren’t the nice, memorable strings you type into your address bar to find your favorite websites. They are special numbers that look like this: 64.255.315.20.
    This is called an IP address, and it represents a unique location on the Web. However, it’s not very easy to remember, is it? That’s why Domain Name Servers were invented.  These are special servers that match up a web address you type into your browser (like “mozilla.org”) to the website’s real (IP) address.

   

  After all this content that you have read you know briefly how web is working..

  Now i think you are ready to learn the two different fields in this Web Development area and easily distinguish between them viz FRONTEND WEB DEV & BACKEND WEB DEV.

  Basically,While frontend and backend development are certainly distinct from one another, they’re also like two sides of the same coin. A website’s functionality relies on each side communicating and operating effectively with the other as a single unit. Is one more important than the other? Nope. They both play very important roles in web development. So where should we start? Let’s flip a coin.

Frontend Web-Development:
    The frontend of a website is what you see and interact with on your browser.

    Let’s say you decide to start a business. You open a Vada Pav Shop 😂 and need a professional website to present your business to customers and tell them where you’re located. Maybe you’ll include a few photos and some information about your food items. All you need are frontend technologies to build your website.

Intro To Web Development.. From Where to Start…….?

Front-end Languages:

        HTML,CSS,Javascript together create everything that’s visually presented when you visit a webpage — whether it’s online shopping, reading the news, checking your email or conducting a Google search.  

HTML:  
    HyperText Markup Language is the language used to describe and define the content of a Web page in a well-structured format.
    HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of the content to make it appear or act a certain way. The enclosing tags can make a bit of content into a hyperlink to link to another page on the web, italicize words, and so on.  For example, take the following line of content:

                                           I Love Web-Dev

     If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it  in a paragraph (<p>) element:

<p>I Love Web-Dev</p>

 

         Intro To Web Development.. From Where to Start…….?

     **keep in mind HTML is case insensitive ..

      So,basically a HTML file consists of many such elements

       A Simple HTML Code:

 

<!DOCTYPE html>    <!--Declaration of HTML5 file -->
<html>
<title>HTML Tutorial</title>   <!-- Title of the web-page -->
<body>  <!--contains body of the webpage or we can say that it is the section of the HTML document that will be directly visible  on your web page. -->
<h1>This is a heading</h1>    <!--a simple heading tag -->
<p>This is a paragraph.</p>    <!--contains a paragraph -->
</body>
</html>

 

 

    This is how a simple HTML code looks like..

    If you want to experiment with writing some HTML on your local computer, you can:

  1. Copy the HTML page example listed above.
  2. Create a new file in your text editor.
  3. Paste the code into the new text file.
  4. Save the file as index.html
  5. Open it in web-browser .

 

    You can explore many more tags and how to use them on:

 https://www.w3schools.com/html/default.asp

 

  CSS:
   Cascading Style Sheets(CSS)) are used to describe the appearance of Web content.

    The above one line may or may not have made sense, so let’s make sure things are clear by presenting a quick example. First of all, let’s take a simple HTML document, containing an <h1> and a <p> (notice that a stylesheet is applied to the HTML using a <link> element):

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
</html>

 

 

       Now let’s look at a very simple CSS example containing two rules:

 

body {
background-color: blue;
}
h1 {
color: green;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}

 

 The first rule starts with a body selector, which means that it will apply its property     values to the <body> element and change background color to yellow.

 The second rule starts with an h1 selector, which means that it will apply its property     values to the <h1> element. It contains two properties and their values (each  property/value pair is called a declaration):

  1. The first one sets the color text of heading h1  to green
  2. The second one modifies the text and align the text in center..

The third rule starts with a p selector, which means that it will apply its property values  to the <p> element.

 Now try it yourself,by applying css properties in your own web-page .

 Take help from:

  https://www.w3schools.com/css/default.asp

 

JavaScript:
     JavaScript is the programming language that runs in the browser, which is used to build advanced interactive Web sites and applications for secure browser execution.

     I will not go deeper in this ,as this is itself a huge topic,so wait might write on it in future..    

    In addition to basic front-end languages, you’ll come across frameworks like Bootstrap and Angular, as well as JavaScript libraries like jQuery, and CSS extensions like Sass and LESS. There’s a long list of resources like these, which support HTML, CSS, and JavaScript. Their purpose is simply to make code more manageable and organized by providing various tools and templates compatible with common coding languages.

 Another interesting thing:

 BOOTSTRAP:
       According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

      Bootstrap can be boiled down to three main files:

  • bootstrap.css – a CSS framework
  • bootstrap.js – a JavaScript/jQuery framework
  • glyphicons – a font (an icon font set)

      Below is starter template for Bootstrap taken from official website or you can also download Bootstrap files on your system to access them offline instead using CDN as used below :

 

<!doctype html>
<html lang="en">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <title>Hello, world!</title>
 </head>
 <body>
   <h1>Hello, world!</h1>
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>
</html>

 

 

    For more info on how to use it visit:

  https://getbootstrap.com/docs/4.1/getting-started/introduction/

 

        The grid is probably one of the most essential aspects of the framework. It’s the basis on which the entire layout is created. Beyond that, Bootstrap’s core CSS will also add helpful styling to forms, tables, buttons, lists, and images, as well as fully functioning navigation bars, while the core JavaScript will add helpful code for creating modals, alerts, popups, dropdowns, etc.

       The Bootstrap grid system has four classes:

  • xs (for phones – screens less than 768px wide)
  • sm (for tablets – screens equal to or greater than 768px wide)
  • md (for small laptops – screens equal to or greater than 992px wide)
  • lg (for laptops and desktops – screens equal to or greater than 1200px wide)

Intro To Web Development.. From Where to Start…….?

       So basically what Bootstrap’s grid feature does is that,it divides the whole screen into  number  of rows and 12 columns.

     The following is a basic example of a Bootstrap grid:

 

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

The above example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones or screens that are less than 768px wide, the columns will automatically stack.

 Give your hands on by dividing screen into two unequal columns  starting at tablets and scaling to large desktops,you will be more confident then.

 So these grid classes automatically manages break points simlar to media queries in HTML5. 

 For more cool features and functionality of Bootstrap,You can visit:

https://getbootstrap.com/docs/4.1/layout/overview/

 

 Backend Web-Development:

              The backend (or “server-side”) is the portion of the website you don’t see. It’s responsible for storing and organizing data, and ensuring everything on the client-side actually works. The backend communicates with the front-end, sending and receiving  information to be displayed as a web page.

Intro To Web Development.. From Where to Start…….?

  Server Side Setup:

          Your website needs a database to manage all the customer and product information. A database stores website content in a structure that makes it easy to retrieve, organize, edit, and save data. It runs on a remote computer called a server. There are many different databases that are widely used, such as MySQL, SQL Server, PostgresSQL, etc.

Your app will still contain frontend code, but it also has to be built using a language that a database can recognize. Some common backend languages are Ruby, PHP, .Net, and Python. These programming languages often run on frameworks that simplify the web development process. Django, for example, is a framework written in Python. “Django” is a popular technology for building dynamic web apps that makes the process much faster.

Ofcourse If you have learned basic HTML,CSS or have knowledge about little frontend then you can start learning Backend Web Development.

You can learn various Backend Platforms:

  • Flask(Python)- http://flask.pocoo.org/docs/1.0/
  • Django(Python)- https://docs.djangoproject.com/en/2.1/
  • Ruby On Rails(Ruby)- https://rubyonrails.org/
  • PHP- https://www.w3schools.com/pHP/default.asp

 

Frontend vs. Backend: Which Should I Learn?

    If you’re keen to learn web development but aren’t sure whether to go down the frontend or backend route, it’s important to consider the day-to-day tasks of each. If you like the idea of working with visual designs and bringing them to life, creating a first-class user experience, then you’ll probably enjoy working in the frontend.
    If you enjoy working with data, figuring out algorithms and coming up with ways to optimize complex systems, you might prefer to work as a backend developer.

 Now you hopefully have a good idea of the differences between the frontend and backend, and how they work together to create functional, user-friendly websites.

 I will surely write another blog on Backend Web-Dev soon..

 So if you are interested start learning today.

 Recommended Basic Courses:

https://in.udacity.com/course/intro-to-html-and-css–ud304

https://courses.edx.org/courses/course-v1:HarvardX+CS50W+Web/course/

The first course covers basic conecepts of HTML+CSS

And the second one deals especially with Backend Web Development Using Python

 

*Feel free to ask any doubts by leaving an email at

[email protected]

If you really like the content provided above ,then leave a like.😉  

References:

 

 

For more info explore above mentioned link…

 

HOW DOES THE INTERNET WORK?

Reading Time: 3 minutes

When you use the Internet, what happens?

Whether you go on-line with a friend, or send a mail, or buy a gift, check the score, or watch   a movie, or study about Tipu’s war!! same wire connects you to the desired destination all the time. So as billion people with billion connections all over the world.

How does that happen?

two-connected-laptops-21218169Consider that you have some information in your personal computer (PC) which you would like to share with your friend, so in order to do that first you should connect your PC to your friend’s PC, thus making connection with help of wires and softwares.
That’s called a “Network”

 

 

 

faster-internet-designed-computers-1374531023
Imagine that there are other Networks like yours within your vicinity which they want to share their information with yours. So by connecting all these Networks, a link between each and every computer is created, so called “Intra-Network” or “Local Network”.
By connecting  large number of Local Networks a large hub is created where every  PC is linked with other PC, known as “INTER-NETWORK” popularly known as “INTERNET”.

Internet works with protocols (how to send and receive data). Protocols which should be followed by each and every one, failing which doesn’t serve the purpose of the individual. As long as each and everyone agree with the protocols, we can keep adding the individuals in the Internet until the whole world is connected. That’s what the Internet is, the Network of Networks that share each other their information.

Every device on the Internet has a unique address. Anything you sent in the Internet is just information that is sent from one device to another, thus unique address will be allotted to all the devices which we use, thus clearing mass confusion of accurate reception.

Messages or Information sent will be divided into small packets of data which will be obviously in the binary form (wake up its digital world), where these packets contain the information along with the details of the sender and receiver, this make the packet to reach the destination accurately
This way your one message which divided into several packets can travel through the Internet in any path (here path is wiring network by which PCs are connected) without the fear of getting lost (remember these have addresses on their back). so our packet takes diversion or deviation or choose different path if the conventional path is congested or overcrowded with other’s data.
Then by following the protocols the receiving device puts the data all together making it understandable to the end user.

So as to reduce cost and traffic of data Internet Exchanges (IE) are provided. These IE’s are connected to different platforms of service providers such as end user (this is what now a days users use), social networking, banking, shopping, academic, financial etc. and this type of connectivity from everyone is known as Peering. Even making peer to peer connections (end user to end user) possible.

internet-exchange

 

 

The Internet is open, decentralized and totally neutral. No single organisation controls it and works well as long as it does.

 

 

 

 

 

Image credits:

http://blog.adsbrook.com/wp-content/uploads/2013/08/internet-pic.jpg
http://www.dreamstime.com/royalty-free-stock-images-two-connected-laptops-image21218169
http://technostories.wordpress.com/category/mind-mapping/

CEV - Handout