Editing Web development (section)

=== Front-end development ===
[[Front-end web development|Front-end development]] is the process of designing and implementing the user interface (UI) and [[user experience]] (UX) of a [[web application]]. It involves creating visually appealing and interactive elements that users interact with directly. The primary technologies and concepts associated with front-end development include:

==== Technologies ====
The 3 core technologies for front-end development are:
* '''HTML (Hypertext Markup Language):''' [[HTML]] provides the structure and organization of content on a webpage.
* '''CSS (Cascading Style Sheet):''' Responsible for styling and layout, [[CSS]] enhances the presentation of HTML elements, making the application visually appealing.
* '''JavaScript:''' It is used to add interactions to the web pages. Advancement in [[JavaScript]] has given rise to many popular front- end frameworks like React, Angular and Vue.js etc.

==== User interface design ====
[[User experience design]] focuses on creating interfaces that are intuitive, accessible, and enjoyable for users. It involves understanding user behavior, conducting usability studies, and implementing design principles to enhance the overall satisfaction of users interacting with a website or application. This involves [[Website wireframe|wireframing]], [[Software prototyping|prototyping]], and implementing design principles to enhance user interaction. Some of the popular tools used for UI Wireframing are -

* Sketch for detailed, [[Vector-based graphical user interface|vector-based design]]
* Moqups for beginners
* [[Figma]] for a free wireframe app
* UXPin for handing off design documentation to developers
* MockFlow for project organization
* [[Justinmind (software)|Justinmind]] for interactive wireframes
* Uizard for AI-assisted wireframing

Another key aspect to keep in mind while designing is [[Web accessibility|Web Accessibility]]- Web accessibility ensures that digital content is available and usable for people of all abilities. This involves adhering to standards like the [[Web Content Accessibility Guidelines]] (WCAG), implementing features like alternative text for images, and designing with considerations for diverse user needs, including those with disabilities.

==== Responsive design ====
It is important to ensure that web applications are accessible and visually appealing across various devices and screen sizes. [[Responsive web design|Responsive design]] uses CSS media queries and flexible layouts to adapt to different viewing environments.

==== Front-end frameworks ====
A [[Web framework|framework]] is a high-level solution for the reuse of software pieces, a step forward in simple library-based reuse that allows for sharing common functions and generic logic of a domain application.<ref>{{Cite journal |last1=Salas-Zárate |first1=María del Pilar |last2=Alor-Hernández |first2=Giner |last3=Valencia-García |first3=Rafael |last4=Rodríguez-Mazahua |first4=Lisbeth |last5=Rodríguez-González |first5=Alejandro |last6=López Cuadrado |first6=José Luis |date=May 2015 |title=Analyzing best practices on Web development frameworks: The lift approach |journal=Science of Computer Programming |language=en |volume=102 |pages=1–19 |doi=10.1016/j.scico.2014.12.004|doi-access=free }}</ref>

Frameworks and [[Library (computing)|libraries]] are essential tools that expedite the development process. These tools enhance developer productivity and contribute to the maintainability of large-scale applications. Some popular front-end frameworks are:

* '''[[React (software)|React]]:''' A JavaScript library for building user interfaces, maintained by Facebook. It allows developers to create reusable UI components.
* '''[[Angular (web framework)|Angular]]:''' A TypeScript-based front-end framework developed and maintained by Google. It provides a comprehensive solution for building dynamic single-page applications.
* '''[[Vue.js]]:''' A progressive JavaScript framework that is approachable yet powerful, making it easy to integrate with other libraries or existing projects.

==== State management ====
Managing the state of a web application to ensure data consistency and responsiveness. State management libraries like [[Redux (JavaScript library)|Redux]] (for [[React (software)|React]]) or [[Vuex]] (for [[Vue.js]]) play a crucial role in complex applications.