Here is why we should use Visual Studio Code for Web Development – Easy steps Install VS Code in 2021

by with No Comment Web Development

Learn why Visual Studio Code is one of the powerful IDEs used by web developers and follow these easy steps to Install VS Code and extensions

What is VS Code? 

Visual Studio IDE is a full-highlighted development tool for several operating systems like the web and the cloud. It permits clients to easily explore the interface so they can compose their code quickly and precisely. 

With Visual Studio IDE, programmers likewise approach a large group of troubleshooting tools. These help them in profiling bugs and diagnosing them efficiently. Like this, they can deploy their applications confidently, realizing that they have discarded whatever might cause execution errors. 

What is more, Visual Studio IDE fills in as a testing stage too. VS Code allows programmers to recreate how their applications will run in their real-time environment and guarantee they do flawlessly whenever they deploy.

Benefits of Visual Studio Code IDE: 

  1. Precise Coding: Powered by built-in Intellisense AI, VS Code provides hints and descriptions to the developers regarding APIs and helps them autocomplete.
  2. Easy Debugging: Augmented with in-built debugging tools, VS Code empowers developers to debug quickly with support included for languages. It enables programmers to debug locally, remotely and cloud even in the middle of production.
  3. Robust Testing: Powered by powerful testing tools, VS Code enables programmers to test their apps. They can do the testing with little effort, and they can test for multiple languages and frameworks. 
  4. Team Collaboration: Regardless of the developers operating system, VS Code empowers the Developer team to collaborate efficiently and achieve perfection in their application development.
  5. Multiple Extension: Visual Studio Code has several custom-built extensions which programmers can use in their projects

Steps to Install Visual Studio Code:

  1. Go to code.visualstudio.com 
  2. Click and download the stable version for the corresponding operating system such as Windows, Linux, Mac. 
  3. Click on next and complete the installation process.
  4. On the left-hand side of the Visual Studio Code window, there Extensions Tab. Click on the search and search for the extension Prettier – Code Formatter and Live Server by Ritwick Dey and install both the extensions.
  5. Prettier helps make the code beautiful, and the Live server helps launch the website inside the development web server.
Install VS Code
Install VS Code
Install VS Code

Now that you have learnt how to install VS Code. Also, read about How the web work.

Easy read on how to view HTTP Requests and Responses using Google Chrome Dev Tools in 2021

by with No Comment Web Development

In the previous tutorial, we have discussed how the web works. In this tutorial, we will learn how to view HTTP Requests and Responses using Google Chrome Dev Tools.

To understand how to view HTTP Requests and Responses, we will first open Google Chrome and use Google Chrome Dev Tools to learn.

Step 1: Open Google Chrome

Google Chrome

Step 2: Open the website Google.com 

Google Website

Step 3: If you’re using MAC OS, you can navigate to the View, Developer and Developer Tools. In case if you’re using Windows, you can use the shortcut Control + Shift + J or press the F12 key.

Chrome Dev Tools

Step 4: It will open a Chrome Dev Tools Tab at the bottom. It will contain many tabs such as Elements, Console, Source, Network, Performance, Memory, Application. To study HTTP Requests and Responses, we can navigate to the Network Tab. 

Please note, by default Chrome Dev Tools will dock at the bottom; however, by clicking the vertical ellipsis, we can anchor it to Left, Right, Bottom, or open in a new window. Usually, the front-end developers prefer docking the Chrome Dev Tools to the Left. 

Docking Dev Tools to Left

Step 5: Once inside the Chrome Dev Tools, Press Control + R to reload the Window. We reload the Window to send requests from the browser to the server. This action will list the HTTP Requests. At the bottom, we can see the total number of requests, data transferred and more. 

HTTP Requests

Step 6: We can observe the Method of the Request, Status of the Request, Type of the Request. 

Step 7: Once we click on a particular Request, we can see more details such as Headers, Preview and more. Inside Headers, there are several other headers types, and inside Preview, we will see the Live Preview of the HTML document. 

how to view HTTP Requests and Responses
how to view HTTP Requests and Responses

Now that you have learnt about how to view HTTP Requests and Responses. You can check out our courses at Ampersand Academy

A quick 3 mins read on how the web works

by with No Comment Web Development

Learn how the web works, client-server interaction and more

You all know if you type the domain URL in any web browser, you can view the website related to the URL. This quick tutorial will discuss what happens when one types a URL and how the browser renders the website associated with the particular domain. 

URL

URL is a fancy acronym for Uniform Resource Locator. For example, https://ampersandtutorials.com is a URL. 

HTTP is Schema and expands to Hypertext Transfer Protocol is a language through which the browser communicates to the webserver to get the necessary information. HTTPS is the same as HTTP but with encryption. 

ampersandtutorials is the primary domain name

.com is the top-level domain

Resources in the website can be HTML files, Audio, Video, PDFs and fonts.

URL Explained

How the web works

Generally, when a user types a URL in the browser, the browser sends the “Request” to the server to give the necessary information associated with the domain. The browser here is the “Client”. 

In turn, the webserver “Response” to the “Request” by the client, i.e., “Browser”, with the necessary information. 

how the web works
How the Web Works

HTTP Message from Browser to Server

Get /index.html HTTP/1.1
HOST: ampersandtutorials.com
Accept-Language: en-us

Here GET is a keyword to acquire the index file or the home page of the website. Usually, the index.html is the home page of the website. HTTP/1.1 is the version. 

The host is the domain name that points to the server. Accept-Language is the language of the web page in which the response should be. 

HTTP Message from Server to Browser

HTTP/1.1 200 OK
Date: 05th November 2021, 11:11
Content-Type: text/html

Again the HTTP/1.1 is the HTTP version. 200 OK is the status code meaning the connection and response to the request has succeeded. The date is the response date and time. Content-Type denotes the type of response which server renders. 

Upon receiving the response from the server, the browser renders or displays the answer in the DOM model, which is Document Object Model.

<!DOCTYPE html>
<html>
...
</html>

Inside the HTML document, if there are any images, videos, fonts browser again sends parallel requests to the server and the server responds with the requested information to the browser thereby the users get to see the entire web page on hitting a URL.  You can learn more about HTTP from MDN Web Docs

Now that you know how the web works, you can also read about the Roadmap to become Web Developer in 2021

Roadmap to web development

Proven Roadmap to web development in 2021

by with No Comment Web Development

Learn the Proven Roadmap to web development in 2021

In this tutorial, we will discuss the Roadmap to web development. We will discuss the technologies and tools that you should learn to become a web developer are. 

2 Parts in web development

Any website has two parts: 

  • Frontend
  • Backend
Roadmap to web development
Roadmap to web development

Frontend: 

The front end is the part where we see and interact with a website in a browser. It is the part where we can click and feel all the visual elements of the website. 

Frontend Technologies: 

HTML – HyperText Markup Language 

HTML defines the building blocks of the front end. It is not an actual language but a markup since we cannot use them to instruct a computer. 

CSS – Cascading Style Sheets

CSS is for styling web pages and making them beautiful. CSS is also not an actual language.

JS – JavaScript

Adds functionality to the website. JS is a language we can instruct the computer to do certain operations using JavaScript. 

Frameworks

Generally, a Website or Web Application has a set of repetitive blocks. Frameworks or libraries help you with making the front end development quick and feature-rich. Few of the frontend frameworks include React, Angular and Vue. 

Which Framework to use

Ideally, there is no rule book to follow. Each company and each project requires a different framework. Suppose you’re looking to learn a frontend library or Framework. In that case, it is better to get started with React since it’s used in several projects and companies and later, you can also learn Angular or Vue or any new framework that will serve you in your projects.

Backend: 

The backend is the part that powers the front end. It is about storing the data, displaying the data and consists of databases. Backend is a technical term that web experts and coders utilize. Fundamentally, the backend is the software engineer’s code that encompasses server-side activities, incorporating CRUD functionality with the database and all server logics. Backend technologies which you can learn in 

2021 includes NodeJS, Java, Kotlin, Python and Ruby on Rails. Databases that you can know for web development include but are not limited to MySQL, Postgre SQL.

Web Development Jobs:

  • Front end Development – HTML + CSS + JS
  • Back end Development – Language + Database
  • Full Stack Development – Front end + Backend 

Timeline to learn:

HTML + CSS – 6 Weeks

JS – 6 Weeks

React – 6 Weeks

NodeJS / Python – 9 Weeks

SQL – 6 Weeks

Now that you know Roadmap to web development, Good luck with your endeavour to become a Web Developer. Follow our website to learn and get tips and other plugins you require in your web development projects. Learn about Materialize CSS, one of the famous CSS Frameworks used in website and web development.