Full Stack Development Course for Beginners

In this lecture, we are going to introduce the Front End Module of our Web Development course. The instructor gives an introduction about herself and then explains the course's aim. The purpose of this course module is to make a clear understanding of HTML, CSS, JS (JavaScript), jQuery (JS library) as well as Bootstrap (CSS library).

Now, what is web development? Web development is the work involved in developing a website for the internet (World Wide Web) or a private network. In simple terms, we will write a design code that is understandable by the browser so that we can present and share the information across the web.

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.

In this lecture, we will introduce HTML which is the abbreviation of Hyper Text Markup Language. Hypertext means the links of the pages and markup language is the computer language that uses tags to define the elements within a document. It is human-readable and it is very simple to write.

HTML is the most basic building block of the Web. It defines the meaning and structure of web content. Hypertext refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

We can compare a web page with a normal Word document. Just like to make the Word doc readable we split it into different paragraphs with some headings, similarly, the web page also contains information in the form of text, images, or video, and with the help of HTLM tags, we represent it in a readable format on the browser. We will also give a brief about HTML tags and even use the heading tag <h1> to <h6> which we will discuss in detail in coming lectures.

In this lecture, we will learn how to install Visual Studio Code often termed VS Code.

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. To write HTML code and render it we need a code editor for which we are going to use VS Code, it is one of the widely used editors and very efficient. This is a detailed video after which there will be no problem with VS Code installation.

First, simply search Visual Studio Code in your browser and click the official site for downloading VS Code. You will get three options for Windows, Linux, and Mac according to your system and its configuration choose your file to download. The video shows how to create an HTML file and we will make our first basic program. For rendering the file, we will use an extension called the Live Server. With the help of this, we can code and see the output along the way.

In this lecture, some basic HTML tags are used in every program and their syntax. A tag represents the root of an HTML document. They are used to delimit the start and end of elements in the markup.

HTML tags are like keywords that define how a web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML program and simple content. HTML tags contain three main parts: an opening tag, a content, and a closing tag. But some HTML tags are unclosed tags.

An HTML file must have some essential tags so that the web browser can differentiate between simple text and HTML text. You can use as many tags as you want as per your code requirement.

• All HTML tags must be enclosed within < > these brackets.

• Every tag in HTML performs different tasks.

• If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

In this lecture, we will introduce CSS (Cascading Style Sheet). It is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. Hakon Wium Lie was the first person to give an idea about CSS in 1994. He was born on July 16, 1965, and was a Norwegian web pioneer.

The different versions of CSS are, CSS 1 in 1969 which supports properties lithe ke color of text, background color, text alignment, margin, borders, adding, spacing, and more. CSS 2 in 1988, included all the properties of CSS1 but also introduced the positioning properties like fixed position, relative position, and absolute position. CSS 2.1 in 2011, is a revised version of CSS 2. CSS 3 introduced many new exciting properties like shadows, gradients, animations, multi-column layout, etc.,

Why do we need CSS?

HTML is used to build the structure of your web page, but CSS is used to give that structure a unique way and style. With CSS we change the layout, format, design, and color of a web page and its different elements. It changes the whole look of a web page. It provides readability and attractiveness to a web page.

There are three ways of writing CSS code:

• Inline styling

• Internal style sheet

• External style sheet (preferred)

In this lecture, we will discuss Simple Selectors and their types. A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.

There are five main types of Simple Selectors:

• Universal Selector-These is represented by the star symbol (*), which selects all the elements in the HTML document and also selects all the elements inside other elements. It selects irrespective of the tags in the HTML element.

• Element Selector or Type Selector- It selects elements on their name.

• Id Selector- It selects using the id attribute of the HTML element. The id of an element is unique within a page. Hash character is used (#)

• Class Selector- It selects the HTML elements that have a class attribute that matches the selector. It is useful for targeting multiple elements. We use a period character (.) followed by the class name.

• Attribute Selector- It selects elements whose attribute value ends with a specified value.

In this lecture, we will start the discussion on JavaScript, this is the introduction lecture for the same.

JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). JavaScript was developed by Brendan Eich in 1995 and appeared in Netscape, a popular browser of that time.

There are also more advanced server-side versions of JavaScript such as Node.js, which allow you to add more functionality to a website than downloading files (such as real-time collaboration between multiple computers). Being a scripting language, JavaScript cannot run on its own. In fact, the browser is responsible for running JavaScript code.

When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it is up to the browser to execute it. The main advantage of JavaScript is that all modern web browsers support JavaScript.

In this lecture, we will discuss Operators in JavaScript.

• Assignment operators - An assignment operator assigns a value to its left operand based on the value of its right operand.

  
  

• Arithmetic Operators - Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are known as JavaScript arithmetic operators.

• Comparison Operators - The JavaScript comparison operator compares the two operands.

  
  

• Bitwise Operators - The bitwise operators perform bitwise operations on operands.

In this lecture, we will discuss Conditions in JavaScript. Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

In JavaScript, we have the following conditional statements:

• Use if to specify a block of code to be executed, if a specified condition is true

  
  

• Use else to specify a block of code to be executed if the same condition is false

  
  

• Use else if to specify a new condition to test, if the first condition is false

  
  

• Use the switch to specify many alternative blocks of code to be executed

  
  

• The if Statement - Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

• The else if Statement - Use the else if statement to specify a new condition if the first condition is false.

• The Switch statement is used to perform different actions based on different conditions.

In this lecture, you will learn about What is MongoDB?

MongoDB is an open-source document-oriented database that is designed to store a large scale of data and also allows you to work with that data very efficiently

• How MongoDB works

• Features of MongoDB

• Schema-less Database

• Document oriented

• Indexing

• Scalability

• Replication

• Aggregation

• High Performance

In this lecture, we will learn about the features of Express JS

Advantages of Express JS:

• Faster server-side development

• Middleware

• Routing

• Templating

• Debugging

Disadvantages of Express JS:

• Event-driven nature (callbacks)

• Code organization

• It's not big on security

• Its error messages are usually unhelpful

In this lecture, we will introduce what is React.js, its history and why should we use React.js for building websites.

React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. React is a tool for building UI components. It is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the view layer of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram.

Reasons to use React.js:

• Heavy DOM manipulations involved are handled easily

• Flexible as per team requirements

• Easy to work with a team of developers

• Huge community support and ready-made modules

• Cross-platform applications are easy to develop

In this lecture, we will learn about what is Node.js.

Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. You need to remember that Node.js is not a framework and it’s not a programming language. We often use Node.js for building back-end services like APIs like Web App or Mobile App. It’s used in production by large companies such as PayPal, Uber, Netflix, Walmart, and so on.

There are other programming languages also that we can use to build back-end services so what makes Node.js different?

Features of Node.js.

• It is easy to get started and can be used for prototyping and agile development.

• It provides fast and highly scalable services. It uses JavaScript everywhere, so it's easy for a Java Script programmer to build back-end services using Node.js.

• The source code is cleaner and consistent.

• Large ecosystem for open source library. It has asynchronous or Non-blocking nature.

Advantages:

Easy Scalability; Real Time web apps; Fast Suite; Easy to learn and code; Advantage of caching; data Streaming; Hosting; Corporate Support.

The Node.js Applications are Real-Time Chats; Complex Single Page Applications; RealTime Collaboration Tools; Streaming Apps; JSON APIs-based applications.