Introduction to Web Development

"The only good is knowledge and the only evil is ignorance." – Socrates

“When performance is measured, performance improves. When performance is measured and reported, the rate of improvement accelerates.” — Thomas S. Monson.

 

Whatever the motivation, the primary question is usually the same: “Where do I start?” it's going to appear to be there's a mountain of stuff to find out, and it’s tough to understand where to leap in. But you've got to start out somewhere.

Where do I start…?

Your particular start line will no doubt depend upon your background and goals. However, an honest initiative for everybody is to urge a basic understanding of how the Web and web pages work.

What are we going to do Today?

1. Who is a web developer and discussing his roles, responsibilities and kinds of web developers?
2. Skills required to become a web developer.
3. Fixing your developer environment.
4. Skeleton of a basic web page.
5. Create your first web page / website.

Who is a web developer?

A web developer or programmer is someone who takes a web design - which has been created by either a client or a design team - and turns it into a website. They are doing this by writing lines and features of complicated code, employing a variety of languages.

It is also the online web developer’s job to diagnose problems during a website’s functionality, to know how something works by reading the code behind it, and to form changes to repair any issues. That essentially makes web developers the physicians of the World Wide Web. once we mention the World Wide Web, we’re mainly pertaining to websites and web applications. At now, the curious aspiring developer in you would possibly be wondering, “What’s the difference between the two?”

Well, we’re glad you asked!A website is typically an easy or a simple page or a gaggle of pages. However, modern websites are far more than that. Take Google Docs, for example. it's a pleasant interface that, once opened, looks considerably like desktop software like Microsoft Office. Such complex websites are often termed web applications. A web developer today is predicted to understand the way to create and work with web applications. Having said that, most of the people use the terms interchangeably, so don’t get too hung abreast of the terminology!

Types of web developers

There are differing types of web developers who specialize in different areas. These include:

Frontend developers: Frontend developers implement website designs using HTML and CSS. they create sure the web site looks pretty on different devices, which the forms and buttons work.

Backend developers: Backend developers create the backbone of the web application. They write code logic that handles a user’s input (for example, what should happen once you click the signup button after filling during a form).

Full stack developers: Full stack developers do bits of both backend and frontend. Counting on the matter at hand, they will switch cape and move stacks. You'll learn more about the differences between frontend and backend development from the table given below.

There are many other specific roles in web development, like system architects, AI, machine learning and security engineers. These roles require more specialized knowledge of one or more of the above sorts of development, numerous professionals in these roles will start by gaining some general web development experience.

What are the skills required to become a web developer?

What does it take to become a web application developer? Essentially, just three things: HTML, CSS and JavaScript—the three pillars of the web, which we’ll be learning about over subsequent videos. Together, these three pillars make every website work, defining the content to be displayed (HTML), telling a browser the way to display that content (CSS), and making the content interactive (JavaScript), respectively.

A web developer is well versed in these three technologies. they can able to read other people’s code and make changes thereto. They will find and debug bugs (shortcomings in existing code). A web developer might, at times, work on a replacement project (a new website) from scratch, or may need to work on an existing website and make it better. A typical day within the lifetime of a web developer involves fixing bugs, developing new features (that is, enhancements) and webpages, and dealing with other developers to talk over ways to unravel problems.

Don’t be overwhelmed by all of those details. You’ll soon see that they’re all very connected, and learning one among these automatically causes you to good at a couple of others!

Setting up your developer environment

We’ll need two tools that each web developer uses:

• A text editor to write down code

• A browser to ascertain what we’re building

While you'll use any browser or text editor, I am using Google Chrome and sublime text editor in my videos.

Google Chrome can be downloaded fromh https://www.google.com/chrome/

Sublime Text can be downloaded from https://www.sublimetext.com/3.

Like any good craftsperson, it’s important that you simply know and understand your tools. For that reason, let’s take a quick check out what we've thus far.

Google Chrome

Google Chrome is a web browser. you'll or might not already be using Google Chrome for browsing the online. A web browser allows us to look at webpages (similar to the one you’re reading this very text on). We’ll use Google Chrome to look at the results after writing and making changes to our code.

Sublime Text

Sublime Text may be a popular text editor. A text editor may be a very aptly named piece of software; it helps us edit text. it's almost liked the default text editor that comes preinstalled on Mac or Windows, but has additional features like code highlighting to reinforce our coding and debugging experience.

Skeleton of a basic web page

We’ll now use the tools that we downloaded and installed to try to our first development work, creating our first text on a webpage. We’ll use HTML for this purpose. Let’s mention HTML quickly before we start creating our first page.

HTML stands for HyperText Markup Language.

Hypertext simply means text which will jump from one point to the other. If you've got ever clicked a link on a page (try this: google.com), you’ve used hypertext.

Markup is just how to structure content in order that we will distinguish between different blocks of text.

Language means a, mmmm, language. Computer languages are almost like world languages like English and German, just very strict in their syntax.

HTML lets us structure our page and therefore the data in it. Once we've a structure and data to figure with, we will specialize in style and functionality.

To create a real HTML document, you'll start with three container elements:

        1.   <html>

        2.   <head>

        3.   <body>

These three combines to explain the basic structure of the page:

<html>: This element wraps all the content of the page (except the DTD)

<head>: This element designates the header a part of the document. you'll include optional information about the web page, like the title (the browser shows it within the title bar), optional search keywords and an optional style sheet

<body>: This element contains the content of your Web page / website, that is, what we would like to seem within the navigation area of the browser

There is just one correct way to combine these three elements. Here is its exact placement, with the doctype at the top of the page:

Structure:       <!DOCTYPE html>

                        <html>

                                <head>

                                        . . . . . .

                                </head>

                                <body>

                                        . . . . . .

                                        . . . . . .

                                </body>

                        </html>

Every website uses this basic structure.

Once the XHTML skeleton is placed, you want to add two more connectors to the combination.

Every website requires a <title> element within the header section. Next, you want to create a container for the text within the text body section (<body>).

A multi-use text container element is, which represents a paragraph. Let's take a better check out the weather that require to be added:

<title>: Sets the title of the page, which has several functions. First, browsers display it within the upper part of the window. Second, when a visitor creates a bookmark for the page, the browser uses the title to tag it within the bookmarks (or bookmarks) menu. third, when the page appears during a web search, the program usually shows this title because the first line within the results, followed by a fragment of the content of the page.

<p>: Indicates a paragraph. The browsers don't bleed them but they add a little space between several consecutive ones to stay them separated

Here is that the page with these two new ingredients:

Structure:        <!DOCTYPE html>

                         <html>

                                <head>

                                        <title>. . . . . . </title>

                                </head>

                                <body>

                                        <p>. . . . . .

                                        . . . . . .</p>

                                </body>

                        </html>

 

Creating your first webpage

Okay, that’s enough theory for now. Let’s get right into it by opening Sublime Text.

Sample code:    <!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<p>My first paragraph. </p>

</body>

</html>

The <!DOCTYPE html> declaration defines that this document is an HTML5 document.

The <html> element is that the root element of an HTML page.

The <head> element contains meta information about the HTML page.

The <title> element specifies a title for the HTML page (which is shown within the browser's title bar or within the page's tab).

The <body> element defines the document's body, and may be a container for all the visible contents, like headings, paragraphs, images, hyperlinks, tables, lists, etc.

The <p> element defines a paragraph.

***CONNECT WITH TECHEX BRIHA ON SOCIAL MEDIA***

Instagram: https://www.instagram.com/techexbriha/

Facebook: https://www.facebook.com/TechExBriHa

TechEx BriHa Blog: https://techexwebdevelopment.blogspot.com/

Youtube Channel: https://youtube.com/channel/UCCTy7GUFizNbV2QSoJ9V1Sw

***********************************************************************************

*DISCLAIMER: As per 3rd Section of Fair use guidelines Borrowing small bits of material/information from an original work is more likely to be considered fair use. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for fair use

***********************************************************************************