Introduction to Front-End Development

Study Notes

Front-end development focuses on the visible aspects of a website or app, including layout, colors, text, images, animations, and how elements react to user interaction.
The goal is to make websites visually appealing, interactive, and user-friendly.

HTML: Provides the structure for webpage content, such as headings, paragraphs, and images.
CSS: Styles the content created using HTML, allowing for customization of colors, fonts, and layout.
JavaScript: Makes the content interactive, enabling features like animations, clicking actions, and content visibility changes.

React, Angular, and Vue: Popular front-end frameworks that enhance website interactivity and responsiveness.

Back-end development powers the invisible parts of a website. It handles tasks such as data storage, business logic, security, and server configuration.
Crucial for functionality that isn't visible to the user, such as logging in and verifying user credentials.

Programming Languages: Python, Java, PHP, and Ruby are common languages used for back-end logic.
Databases: MySQL, MongoDB, and PostgreSQL store and manage data, including user accounts, content, and settings.
Frameworks: Tools like Express (Node.js), Django (Python), ASP.NET (C#), and Spring (Java) help organize and structure back-end code.

Full-stack developers handle both the front-end and back-end aspects of web applications, integrating design, functionality, and data management.
Full-stack developers can build entire working web applications.
They ensure the design, interactivity, data access, and database integrity of a site.

Back-end Framework: A toolkit for building and managing the server-side of an application. It simplifies development by automating tasks, pre-writing code, and providing templates.
Key Features: Handling requests from the front end, managing databases, implementing security measures, and structuring the application's architecture.
Example: A back-end framework helps manage data storage, user authentication, and server-side logic (behind-the-scenes).

**Purpose:**HTML (HyperText Markup Language) structures web page content.
Structure: Defines elements like headings, paragraphs, links, images, and forms. Creating tags (opening and closing tags) establishes the webpage's structure.

Functionality: provide additional details to HTML elements.
Format: Attributes are in the form of name-value pairs within the opening tag of an element.
Usage Examples: They modify an element's behavior or appearance. The class attribute specifies CSS classes. The id attribute gives a unique identifier. style defines inline CSS. title describes the element (popup). Other attributes such as src, alt, href, target, rel, and type are used alongside tags like <img>, <a>, <form>, etc. for links, images, and various input fields.