# Introduction

The questions that strike someone’s mind are ‘What is this Drag and Drop API? What’s the purpose of using it?. So let’s dig in deep and find out the answers to these questions.

# What is Drag and Drop API?

As the name suggests, this API lets us grab an element by double-tapping the left mouse button and moving along the way where we want to place an element or to drop an element as you can say. And this movement of an element from its initial position to its destination(or where we are dropping it) is called dragging. This is by far the most simplistic definition of Drag and Drop API and in fact, nothing is complex about it.

# What’s the purpose of using it?

The purpose is straightforward i.e, just for the sake of user experience, we are using this Drag and Drop feature. In this part of the world, user’s tastes, user’s experience is all we have to take into consideration while developing web applications. This feature provides users highly interactive experience. For example, let’s consider a scenario where you have to upload a file to any website. There are two options for doing that and the first option is the old-fashioned one i.e, to navigate through the entire file structure within a folder and select the appropriate file to upload. But the second option is a more modern and very simple one, just drag that particular file and drop it to the placeholder provided by the website and it’s done. See how interactive and simple it is, that’s what users need and we have to take it into consideration.

# What needs to keep in mind when using this API?

Before we get into the meat and potatoes of this API, let’s discuss the minor things that we have to keep in mind before using this API. This will prevent us from falling into various pitfalls.

While performing the events related to drag and drop, we have to explicitly disable the other events of the DOM like onMouseDown, onMouseUp, onMouseOver, etc. as these events restrict the drag and drop event to happen. So in our handler function, we have to disable this default behavior by writing an **event.preventDefault()**. We’ll see how we can do that with an example.

Whenever we drag an element we have to make use of the data transfer object which comes with the drag and drop API of HTML. It holds the data and other information of the particular draggable element and we can make use of this information when we drop the element. So data transfer object holds the state of data of an element that we are dragging.

The above two points will become crystal clear when we discuss each individual topic and implement them in our basic drag and drop application.

# Drag/Drop Events

There are many events and event handlers in this API. Using these events we can control the entire Drag and Drop lifecycle. The Drag and Drop lifecycle of an element is nothing but the entire phase which starts when we grab an element, moving it along the way and finally drop it inside a container. For example, the drag start event occurs when we grab an element with a mouse.

Let’s examine all the events and event handlers associated with it:

- drag: This event occurs when we are dragging an element and we can handle this event by specifying the ondrag event handler inside an element as an attribute. The value to this attribute will be a function that gets invoked when this event is fired.
- **dragend**: This event occurs when we stopped dragging an element (drag operation ends) such as releasing a mouse button or hitting the ESC key. We can handle this event by specifying the ondragend event handler inside an element as an attribute.
- **dragenter**: This event occurs when the element enters a valid drop container or target. And of course, we can handle it using an ondragenter handler.
- **dragleave**: This event occurs when the element leaves a valid drop container or target. The associated event handler is ondragleave.
- **dragover**: This event occurs when we drag an element over a valid droppable container or target. This event is fired every few hundred milliseconds. ondragover is the associated event handler for this.
- **dragstart**: This event occurs when the user starts dragging an item. The moment when an element is grabbed. ondragstart is the associated event handler.
  drop: This event occurs when the element is dropped into a droppable target container. ondrop is the associated event handler.

# Drag/Drop Interfaces

There are four major HTML Drag and Drop interfaces namely DragEvent, DataTransfer, DataTransferItem and DataTransferItemList.

### DragEvent:

The DragEvent interface is a DOM event that will be initiated when a user puts a mouse pointer and starts dragging the element. This interface provides an object which is very useful to us as we can utilize it to add drag and drop functionality to it.

### DataTransfer:

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. This is by far the most important one.

### DataTransferItem:

The DataTransfer object contains the list of drag data items whereas the DataTransferItem object represents one drag data item.

### DataTransferItemList:

The DataTransferItemList object is a list of DataTransferItem objects representing items being dragged. During a drag operation, each DragEvent has a dataTransfer property and that property is a DataTransferItemList.

# Understanding By Example

We’ll make a simple Drag and Drop application where we drag and drop the image from one container to another by making use of the above concepts.

The application looks something like this:

![drag and drop demo](drag1.png)

Let’s write some HTML for this:

```html
<body>
  <div class="drop-box">
    <div class="draggable-element" id="drag-me"></div>
  </div>
  <div class="drop-box"></div>
  <div class="drop-box"></div>
</body>
```

Let’s style the HTML using CSS:

```css
<style > body {
  background-color: rgb(238, 199, 185);
  display: flex;
  justify-content: center;
  align-items: center;
}

.draggable-element {
  background-image: url("https://source.unsplash.com/145x145/?person");
  position: relative;
  top: 7px;
  left: 5px;
  height: 145px;
  width: 145px;
  /* By setting cursor pointer you'll get the  essence of dragging something. */
  cursor: pointer;
}

.drop-box {
  display: inline-block;
  height: 155px;
  width: 155px;
  margin: 10px;
  background-color: white;
  border: 2px solid black;
}
```

We’ve taken a random image from https://source.unsplash.com. But you can choose whichever image you want.

Now after styling our HTML we have to implement drag and drop functionality so that we can drag the image to one of the containers.

For making any element draggable, we have to explicitly provide an attribute 'draggable' to the corresponding element and set its value to true as by default it is set to false.

```html
<div class="draggable-element" draggable="true" id="drag-me"></div>
```

Now we have to provide an event handler ondragstart as an attribute to this element to set or store the data in the dataTransfer object via invoking our function **dragIt()**.

```html
<div
  class="draggable-element"
  draggable="true"
  ondragstart="dragIt(event)"
  id="drag-me"
></div>
```

Implementation of **dragIt()** function:

```js
const dragIt = (event) => {
  event.dataTransfer.setData("text", event.target.id);
};
```

This function takes a DOM event object as a parameter. This event object has all the necessary information about the element such as its ID.
We have set the data associated with this element such as its id to the dataTransfer object using the **setData()** function. **setData()** set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.

We have made an element draggable, now let’s make a container droppable so that we can drop this element into it:

```html
<div class="drop-box" ondragover="allowDrop(event)"></div>
```

To make a container droppable we have to disable the default **onmouse** events of the target element where we are dropping (This is the point we have to keep in mind, as I mentioned earlier).

So to make the container droppable we use the ondragover attribute as this event handler handles the event when the element is dragged over the target container.
We pass in a function **allowDrop()** which allows the element to be dropped inside the target container.

```js
const allowDrop = (event) => {
  event.preventDefault();
};
```

**event.preventDefault()** prevents the default mouse events and allows the elements to be dropped on it.

Just making the container droppable doesn’t mean we can place an element inside of it. For that, we have to append the element as a child inside the container. So, we have to append the element inside of it and the better time of doing that is when we drop an element. So we use the ondrop event handler as drop event is taking place.

```html
<div
  class="drop-box"
  ondragover="allowDrop(event)"
  ondrop="dropIt(event)"
></div>
```

This event handler takes the **dropIt()** function as its value which is invoked to append the element as its child.

```js
const dropIt = (event) => {
  let data = event.dataTransfer.getData("text");
  event.target.append(document.getElementById(data));
};
```

Now it’s done. We’ve made a drag and drop application. You can drag and drop it in one of the three containers.

![drag and drop demo](drag2.png)

The image is of course different because every time we reload a page we get a different image as we’ve used a random image from source.unsplash.com.

# Entire code at one glance:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag and Drop API</title>
    <style>
      body {
        background-color: rgb(238, 199, 185);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .draggable-element {
        background-image: url("https://source.unsplash.com/145x145/?person");
        position: relative;
        top: 7px;
        left: 5px;
        height: 145px;
        width: 145px;
        /* By setting cursor pointer you'll get the essence of dragging something. */
        cursor: pointer;
      }

      .drop-box {
        display: inline-block;
        height: 155px;
        width: 155px;
        margin: 10px;
        background-color: white;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="drop-box" ondragover="allowDrop(event)" ondrop="dropIt(event)">
      
      <div
        class="draggable-element"
        draggable="true"
        ondragstart="dragIt(event)"
        id="drag-me"
      ></div>
    </div>
    <div
      class="drop-box"
      ondragover="allowDrop(event)"
      ondrop="dropIt(event)"
    ></div>
    <div
      class="drop-box"
      ondragover="allowDrop(event)"
      ondrop="dropIt(event)"
    ></div>
  </body>
  <script>
    const dragIt = (event) => {
      event.dataTransfer.setData("text", event.target.id);
    };

    const allowDrop = (event) => {
      event.preventDefault();
    };

    const dropIt = (event) => {
      let data = event.dataTransfer.getData("text");
      event.target.append(document.getElementById(data));
    };
  </script>
</html>
```

# Key takeaways

Finally, we are at the fag end of the topic and most probably the topic is done and dusted. To summarize this, we started out with a brief introduction of the topic and got to know the motivation behind using the Drag and Drop feature and then we explored all the core concepts related to Drag and Drop API. Finally, we made a simple Drag and Drop application using all the necessary concepts of Drag and Drop.
So it is not the end of the road here, there are way more things present in this API just expand your domain and explore all about it as learning has no endpoint. Keep a closer eye on our future posts as they may prove helpful to you.

Drag and drop in HTML


In today's world learning web development is a go-to option to start earning early but often beginners face a bit of confusion regarding the two terms web development and web designing although these are completely two different traits. This article is intended to resolve all the confusion regarding this.

# What do web designers and web developers actually do?

A web designer is responsible for the aesthetic design i.e, concerned with the beauty as well as the experience of the website for the user. Basically, the way the website looks and feels. A web designer has the tricky task of integrating user experience into the design all the while keeping in mind the branding, colour palettes, typography and readability of the website to make it eye-catching and usable.

A web developer on the other hand takes those designs created by a web designer and turns them into a live, functioning and error free website. In other words, they build the actual interface through which the user interacts with the website. In order to ensure the website’s functionality, web developers use web languages such as HTML, CSS and JavaScript as well as various software application tools in order to code and build the structure of the website.

A good way of looking at it is by thinking of a web designer as an architect who creates a blueprint for a new home and a web developer as a builder who builds a real home based on the blueprint that the clients can live in. Just as architects and builders collaborate to create a beautiful home for the clients, web designers and developers work symbiotically to create an amazing product for the users.

# What are the tools used by web designers and developers?

So, you might be wondering what are the tools used by web designers and developers. Well, as web designers are responsible for a website’s aesthetics, they typically use graphic design software such are:

- Adobe Photoshop
- Adobe Illustrator
- Figma
- Adobe XD

Photoshop and illustrator are used for images and other graphical elements but Figma and Adobe XD are the tools used for creating wireframes and prototypes to determine the website’s layout. Web designers are also responsible for how the users navigate through a product and even a website’s analytics.

We’ve already touched on the fact that web developers use programming languages to write the website’s code but they also use web languages to set up email services, user authentication, databases and other technical aspects of the website. To do this, developers use software like:

- text editors,
- command line interface and
- version control

to build the features of the website.

# How much do web designers and web developers earn?

It’s time to talk about the subject on everyone’s lips, money. Out of the two roles who earns more. According to Glassdoor, the average salary in the United States for web developers is slightly higher than that of web designers. However, this is subject to many variables including location, experience and skill sets. To get a real sense of what each role earns, it’s important to do research. Websites like glassdoor, payscale and indeed are great for comparing salaries in your specific area.

# Which career is for you?

Now that we’ve looked at different tools and skill sets required for these roles, you might be wondering which career is for me? Well, there are quite a few notable differences, the good news is that a web developer can be a web designer as much as a web designer can choose to be a web developer. In fact, either career choice may require you to have adequate functioning knowledge of the other field. For example, successful developers will know how to use colour schemes and typography in creating wireframes and layouts just as a successful designer will have to understand the basic HTML, CSS and JavaScript techniques to understand the technical limitations of their creative layouts and user experience specifications. Either way, it's important to do research before making a decision.


Web Development vs Web Design


HTML and JavaScript are two totally different technologies and along with CSS, they make the front-end of the website. We can say these are the three pillars on which our front-end depends. And the most interesting part is that there is no alternative to above three technologies and you may also say these three are the undisputed king when it comes to front-end development. So, if you want to become a front-end developer, you must have to learn these.

Front-end is all the visual stuff we see on a particular website. HTML makes the structure of the website, CSS provides the necessary styling to this structure, making it very pleasing to the eye. And finally, javaScript makes the website interactive i.e, what happens when the button is clicked on a website, what needs to be done when a user fills the form, etc. All the interaction with the website is done through javaScript. We can say it makes the website dynamic.
There is a very good analogy that demonstrates above three technologies. Consider your body is made with HTML and the way you look i.e, your dressing, hair styling, etc are done by CSS. Finally, javaScript is your brain that instructs you what to do if something happens.

Among these three, HTML and CSS are compulsory but javaScript is optional. You may opt-out to leave javaScript if you don’t want it. But one question arises, why javaScript is optional? Well, we’ll get to know the reason when we discuss static and dynamic websites.

# Static v/s Dynamic Websites

The static website is the one that has a minimalistic design and user interaction. Almost everything on these websites is hardcoded and that is why it is called static as the content in these websites remains static and doesn’t change. The most common example is the blogging website where you just go and read the blog post and do nothing more than that.

On the other hand, dynamic websites work the other way around. These websites are highly interactive. Contents on these websites are frequently changing based on user’s activities. These kinds of adaptability based on user’s interaction gives these websites dynamic nature. For example, let’s say there is a food ordering website where users can order food, make payments, wishlist restaurants of their choice, etc. shows the dynamic nature of this website.

So, back to our question, why javaScript is optional? Well, for making static websites, you don’t need JavaScript at all just HTML and CSS would work. JavaScript is just for building web applications i.e, dynamic websites.

# How JavaScript Is Different From HTML?

JavaScript is very different from HTML. JavaScript is a fully-fledged programming language whereas HTML is a markup language. Programming language is basically a set of commands used to write computer programs and then this program is converted to machine-readable code. Whereas markup language provides a set of rules for encoding documents that are both human-readable as well as machine-readable.

You can declare variables, write functions, implement conditionals, looping based on conditions, etc. All the programming concepts are present inside javaScript.

JavaScript on its own is a very vast topic and needs a good amount of time to learn. However here we will see how we can provide interactivity to websites using javaScript in conjunction with HTML.

# Integrating JavaScript Inside HTML

We can integrate javaScript inside HTML using \<script> tag. We have two options, one is to write the javaScript code between the \<script> tag inside an HTML file. And the second option is to write JavaScript code in a separate file and then link that file inside HTML using the src attribute of the \<script> tag.

Writing javaScript code inside HTML file within \<script> tag:

```html
<script>
  // Your code goes here!
</script>
```

Writing JavaScript in a separate file ‘index.js’ and linked that file inside HTML. You have to specify the pathname of the file to the src attribute.

```html
<script src="index.js"></script>
```

Make sure to not add this \<script> tag inside \<head> of the HTML as it may slow down your website. When the website loads we always want the visible content of the website to load first and then javaScript to load. For this reason, always specify this \<script> tag after \<body> tag. Like this,

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML JavaScript</title>
  </head>
  <body>
    <h1>Hey there!</h1>
  </body>
  <script src="index.js"></script>
</html>
```

If you don’t want to specify the \<script> tag after \<body> of the HTML and want to specify in the \<head> section then you can use defer attribute of the \<script> tag which enables the browser to download the script in parallel to parsing the page and execute the downloaded javaScript code only after the page has finished parsing. Like this,

```html
<script src="index.js" defer></script>
```

Specifying above \<script> inside the \<head> of the HTML:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="index.js" defer></script>
    <title>HTML JavaScript</title>
  </head>
  <body>
    <h1>Hey there!</h1>
  </body>
</html>
```

# How does JavaScript add Interactivity To a Website?

Common uses for JavaScript are image manipulation, form validation, fetching data from a remote server, dynamic changes of content, etc.

Well, just linking the file and adding the \<script> tag won’t do anything, you have to write JavaScript code to perform actions.

Let’s see how JavaScript adds interactivity to the website. For adding interactivity, javaScript needs access to HTML’s in-built DOM API.

# DOM API

DOM is an acronym of Document Object Model which basically has the collection of all the HTML elements like \<body>, \<p>, \<a>, \<h1>, etc.

Apart from these DOM also has the methods for all HTML elements and more importantly, it also has the events associated with each HTML element.

Event is basically a kind of situation when something happens like user clicks an HTML element, the user moves the mouse cursor over HTML element, etc. JavaScripts performs certain actions based on these events.

All these HTML elements are present inside DOM in a hierarchical order. See the figure below which represents the hierarchy among the elements. The \<html> element is root or parent of all the elements inside the DOM then \<body> and \<head> are its direct children and both of them are siblings. Accordingly, the rest of the elements also have some relation among them.

![DOM structure](dom.png)

Now, what JavaScript does is to make use of this DOM API and gets access to each and every element of the HTML.

By making use of this DOM API JavaScript does the following amazing things:

- JavaScript can add/change/remove HTML elements
- JavaScript can add/change/remove HTML attributes
- JavaScript can add/change/remove CSS styles
- JavaScript can react to HTML events
- JavaScript can add/change/remove HTML events

# Adding and removing HTML elements using JavaScript:

Firstly, we need to grab an HTML element in JavaScript using DOM API. We can do this in many ways:

## Grabbing elements by its class name:

Specify the class name of an element inside the quote.

```js
document.getElementsByClassName(“”);
```

Here, we grabbed the element \<p> having ‘para’ class name and stored it inside the javaScript variable paragraph for further usage of this grabbed element.

```html
<html>
  <body>
    <h1>Hey there!</h1>
    <p class="para"></p>
  </body>
  <script>
    let paragraph = document.getElementsByClassName("para");
  </script>
</html>
```

## Grabbing element by its tag name:

Specify the tag name of an element inside the quote.

```js
document.getElementsByTagName(“”);
```

Here, we grabbed the element <p> having ‘p’ as its tag name and stored it inside the javaScript variable paragraph for further usage of this grabbed element.

```html
<html>
  <body>
    <h1>Hey there!</h1>
    <p class="para"></p>
  </body>
  <script>
    let paragraph = document.getElementsByTagName("p");
  </script>
</html>
```

## Grabbing element by its Id name:

Specify the id of an element inside the quote.

```js
document.getElementById(“”);
```

Here, we grabbed the element \<p> having ‘el’ as its id and stored it inside the javaScript variable paragraph for further usage of this grabbed element.

```html
<html>
  <body>
    <h1>Hey there!</h1>
    <p class="para" id="el"></p>
  </body>
  <script>
    let paragraph = document.getElementById("el");
  </script>
</html>
```

## Grabbing elements by using CSS selector:

Specify the CSS selector associated with the particular element inside the quote.

```js
document.querySelector(“”);
document.querySelector("p.para");
document.querySelector("p#el");
```

Here, we grabbed the element \<p> having ‘para’ as its CSS selector and we can also use its id as a CSS selector and stored it inside the javaScript variable paragraph for further usage of this grabbed element.

```html
<html>
  <body>
    <h1>Hey there!</h1>
    <p class="para" id="el"></p>
  </body>
  <script>
    let paragraph = document.querySelector("p.para");
  </script>
</html>
```

Now, these are the ways by which we can grab an HTML element in JavaScript.

After grabbing an element we can now add, change and remove elements in HTML based on this grabbed element.

## Adding element in an HTML using JavaScript:

For adding an element, we first need to create an element using the createElement() method. Pass the name of the element inside this function to create that element.

```js
const newEl = document.createElement("p");
```

Then we simply add this created element inside our grabbed element as its child using the appendChild() method. This method takes the created element as its argument.

Let’s see the complete code for adding element:

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="index.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <h1>Hey there!</h1>
    <div class="container"></div>
  </body>
  <script>
    const divEl = document.getElementsByClassName("container");
    const newEl = document.createElement("p");
    divEl.appendChild(newEl);
  </script>
</html>
```

The newly created paragraph element ‘newEl’ is added as a child of the ‘divEl’ element.

Removing elements in an HTML using JavaScript:

We can easily remove the element from HTML using the removeChild() method. Let’s say we want to remove the above-added paragraph element from the \<div> tag,

```js
divEl.removeChild(newEl);
```

# Listening To An Event

Remember we discussed an event which is a situation when the user clicks the HTML element, fills the form, etc. JavaScript specifies what to do if such an event occurs by adding event listeners or event handlers to the HTML element which listens or handles these events by invoking some kind of function. The function is the action that is triggered when a certain event is fired.

We can listen to or handle the above events by specifying an event handler as an attribute to an HTML element on which that event is happening. Like this,

```html
<button onclick=""></button>
```

Specify the name of the function as a value to this onclick attribute.

# Understanding By Example

Here, we will be implementing the above concepts in a simple demo example in which the user is greeted by a message when he/she clicks the button.

![Project demo](demo1.png)

When you click the button, a click event is fired and you will be greeted. Like this,

![Project demo](demo2.png)

Let’s take a look at code for this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Greet Me</title>
    <style>
      body {
        background-color: antiquewhite;
      }

      h1 {
        color: orangered;
        text-align: center;
        font-size: 50px;
      }

      .container {
        display: flex;
        justify-content: center;
      }
      .content {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 40%;
        height: 300px;
        background-color: rgb(188, 145, 231);
        border-radius: 15px;
      }

      button {
        height: 25%;
        width: 25%;
        margin-top: 10px;
        background-color: brown;
        color: bisque;
        font-weight: bold;
        font-size: 20px;
        border-radius: 15px;
      }

      button:hover {
        background-color: bisque;
        color: brown;
      }

      #message {
        position: absolute;
        top: 35%;
        font-weight: 500;
        font-family: sans-serif;
        font-size: 30px;
        color: aliceblue;
      }
    </style>
  </head>
  <body>
    <h1>Click me for a surprise!</h1>
    <div class="container">
      <div class="content">
        <button onclick="displayMessage()">Click here</button>
        <p id="message"></p>
      </div>
    </div>
  </body>
  <script>
    function displayMessage() {
      document.getElementById("message").innerHTML =
        "Good morning! Wish you a very happy day.";
    }
  </script>
</html>
```

Let’s review the above code:

We simply have an empty \<p> element having id ‘message’ to display the greeting message when the user clicks the button.

```html
<p id="message"></p>
```

Then we have a button element that fires a click event when it is clicked. We have specified an onclick event handler as an attribute that triggers a function displayMessage() when the user clicks the button.

```html
<button onclick="displayMessage()">Click here</button>
```

Finally, we implemented the displayMessage() function inside our JavaScript which simply grabs the \<p> element and injects the message string using innerHTML property. This function is only invoked when the user clicks the button.

```html
<script>
  function displayMessage() {
    document.getElementById("message").innerHTML =
      "Good morning! Wish you a very happy day.";
  }
</script>
```

So, that’s it we have completed this demo using basic JavaScript concepts discussed earlier.

# Key takeaways

Finally, we are done with this article. We have covered all the basic terminologies and implementation of JavaScript inside HTML, we have discovered why there is a need of having JavaScript in every front-end developers toolkit. We’ve explored DOM API and its important methods. Got the taste of handling events by using a simple demo example. But still, we barely scratched the surface of JavaScript and of course, this article is just to introduce you to various topics so that you can explore and learn each topic individually in isolation.

So, this is not the end of the road for you, just mark down these topics and start learning each of them in great detail. We have various articles on these topics which might be helpful to you. So do check out those articles and also keep an eye on our future posts.


Welcome to WebHawk

A go-to place for web and tech enthusiasts

Featured Posts

Drag and drop in HTML

Web Development vs Web Design

JavaScript in Conjunction with HTML