# Web Development Basics

## Backend

The server-side of the application is called the Backend. It is the part of the website that users can't see or interact with directly. The backend is responsible for storing and arranging data, managing permissions, and performing various server-side operations that support the functionality of the website.

### **1. Models Tab**

The Models tab in the backend typically refers to the data models used by the application. These models define the structure of the data, how it is stored in the database, and the relationships between different data entities. For example, in a blog application, you might have models for Users, Posts, and Comments.

### **2. Permissions Tab**

The Permissions tab deals with the access control mechanisms of the application. It defines who can access what parts of the application and what actions they can perform. This could include different user roles (e.g., admin, editor, viewer) and their respective permissions (e.g., read, write, delete).

## Frontend

The client side of the application is called the Frontend. It is the part of the application that users can interact with directly. The frontend is responsible for the layout, design, and interactivity of the website, making it user-friendly and visually appealing.

### **1. Design Tab**

The Design tab in the frontend refers to the tools and components used to create the visual layout of the application. This includes the arrangement of elements on the page, styling, and responsiveness to different screen sizes. Frontend developers use HTML, CSS, and JavaScript to implement these designs.

***

## What is a Div?

A `div` is a container element in web development. It is used to group other elements and apply styles or perform layout tasks. `div` elements are a fundamental part of HTML and are commonly used to structure a webpage. Hence we use it in Brokenatom too.

## Working with Flex

Flexbox is a layout model in CSS that allows for the easy arrangement of elements within a container. It is particularly useful for creating responsive layouts where elements need to adjust their size and position based on the available space.

[Box Method for Frontend development](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) \
[Responsive Web Design](https://www.w3schools.com/css/css_rwd_intro.asp)\
[Web design explained by Figma](https://www.figma.com/resource-library/web-design/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.brokenatom.io/welcome-to-brokenatom/web-development-basics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.