Introduction to web development

Web development is one of the most popular areas of computer science, and for good reason. It's a versatile
field that can be used to create a wide variety of websites. Web developers develops websites, ensuring that
they function properly in a way to provide good experience. Web developers do this by writing codes,
using various programming languages depending on the task they perform.

Web Development Basics

To get started in web development, you need to understand some basic concepts. Start by learning about
HTML, CSS, and JavaScript.
HTML or Hypertext Markup Language
HTML is a markup language and is used to write codes that make up a webpage. HTML uses tags,
which are keywords telling the browser to display and format the information on the page, such as
images, text, and videos.
CSS or Cascading Style Sheets
CSS is a set of rules that describe how to format text, images, videos, and other elements on a web
page. Used to style web pages and their layout, CSS allows a web page to look consistent and
professional. It is also used to make mobile-friendly, interactive sites that look great on any device. The
benefit of inserting CSS into HTML is that CSS creates highly scalable designs.
JavaScript
JavaScript is an object-oriented programming language designed for web development. Being a general-
purpose programming language, JavaScript is used to write programs that interact with other computers
and web pages, and access codes. JavaScript is also leveraged for a variety of innovations in the
development field, such as developing games, 2D and 3D puzzles, and in-browser games
3 Types of Web Development
Web development is majorly divided into three types:
1. Front-End Web Development
2. Back-End Web Development
3. Full Stack Web Development

Difference between website and web application

The Website and Web application are able runs in browsers, they require access to the internet, and they
both use the same programming languages for the front end and a back end.
The main difference between Website and Web application is that a Web application is a piece of
software which is accessed by the browser and the browser is an application which is used for browsing
the internet, whereas a Website is a collection of related web pages. The Website contains images, text,
audio, video, etc. It can consist of n number of pages.
Website Web application
It is designed for interaction with end user
It basically contains static content.

The user of the website only can read The user of the web applications is
the content of the website but is able to read the content of website
unable
able to to manipulate
read it. of the web
the content
and can also manipulate the data.
to
manipulate it.
application and can also manipulate
This Site should be compiled
This does not need to be precompiled

Examples of websites:- Breaking Examples of web applications:-

News, Aktu website, etc.
Amazon, Facebook.
Static website using HTML/CSS
A static website has fixed content
 It does not require programming languages to build one.
 It is the easiest form of website to create.
 Static websites are built of HTML, CSS, and JavaScript.
 Students will understand…
There are two ways to start building a static website. Building from scratch or using a template.
Dynamic Website using JavaScript
Use JavaScript to modify an HTML website to create a dynamic website

Debugging Code in JavaScript

Code Debugging
Programming code might contain syntax errors, or logical errors.

Many of these errors are difficult to diagnose.

Often, when programming code contains errors, nothing will happen. There are no error messages, and you
will get no indications where to search for errors.
Searching for (and fixing) errors in programming code is called code debugging.
JavaScript Debuggers
Debugging is not easy. But fortunately, all modern browsers have a built-in JavaScript debugger.

Built-in debuggers can be turned on and off, forcing errors to be reported to the user.

With a debugger, you can also set breakpoints (places where code execution can be stopped), and
examine variables while the code is executing.

Normally (otherwise follow the steps at the bottom of this page), you activate debugging in your browser
with the F12 key, and select "Console" in the debugger menu.
Code
Major Browsers' Debugging Tools
Normally, you activate debugging in your browser with F12, and select "Console" in the debugger menu.
Otherwise follow these steps:
Chrome
 Open the browser.
 From the menu, select "More tools".
 From tools, choose "Developer tools".
 Finally, select Console.

Firefox Open the browser.

 From the menu, select "Web Developer".
 Finally, select "Web Console".
Edge Open the browser.
 From the menu, select "Developer Tools".
 Finally, select "Console".
Opera Open the browser.
 From the menu, select "Developer".
 From "Developer", select "Developer tools".
 Finally, select "Console".
Safari Go to Safari, Preferences, Advanced in the main menu.
 Check "Enable Show Develop menu in menu bar".
When the new option "Develop" appears in the menu: Choose "Show Error Console".