Front-end web development: Difference between revisions

Revision as of 17:09, 12 February 2024

Latest revision as of 21:56, 18 July 2025

(44 intermediate revisions by 30 users not shown)

Line 2:

{{Software development process}}

'''Front-end web development''' is the development of the [[graphical user interface]] of a [[website,]] through the use of [[HTML]], [[CSS]], and [[JavaScript]], so that users can view and interact with that website.<ref name="mozilla">{{cite web|language=en

|url=https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer

|title=Front-end web developer

Line 36:

===HyperText Markup Language===

{{Main article|HTML|Markup language}}

[[HyperText Markup Language]] (HTML) is the backbone of any website development process, without which a web page does not exist. Hypertext means that text has links, termed hyperlinks, embedded in it. When a user clicks on a word or a phrase that has a hyperlink, it will bring another web-page. A markup language indicates text can be turned into images, tables, links, and other representations. It is the HTML code that provides an overall framework of how the site will look. HTML was developed by [[Tim Berners-Lee]]. The latest version of HTML is called [[HTML5]] and was published on October 28, 2014 by the [[World Wide Web Consortium|W3C]] recommendation. This version contains new and efficient ways of handling elements such as video and audio files.

HyperText Markup Language (HTML) is the modern standard for displaying and structuring [[web content]] across the [[internet]].<ref>{{Cite web |title=HTML Standard |url=https://html.spec.whatwg.org/multipage/ |access-date=2024-09-30 |website=html.spec.whatwg.org}}</ref> HTML defines what elements will be displayed on a website, and how they will be arranged. All major [[Web browser|web browsers]] are designed to interpret HTML, and most modern websites serve HTML to the user.<ref>{{Cite web |date=2024-08-02 |title=The web and web standards - Learn web development {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards |access-date=2024-09-30 |website=developer.mozilla.org |language=en-US}}</ref> [[Hypertext]] is text displayed on a [[computer]] with references to other text, these references (or links,) are termed "[[Hyperlink|hyperlinks]]." When an internet user interacts with a hyperlinked item, the website serves the user the linked data. This data can be another HTML web-page, JavaScript, or anything else. The latest major release of HTML is [[HTML5]], originally published on October 28, 2014 as a [[World Wide Web Consortium|W3C]] recommendation.<ref>{{Cite web |date=October 28, 2014 |title=HTML5 |url=https://www.w3.org/TR/2018/SPSD-html5-20180327/ |access-date=September 30, 2024 |website=w3}}</ref><ref>{{Cite web |title=Web Standards |url=https://www.w3.org/standards/ |access-date=2024-09-30 |website=W3C |language=en}}</ref>

===Cascading Style Sheets (CSS)===

{{Main article|CSS}}

[[Cascading Style Sheets]] (CSS) controlscontrol the presentation aspectand style of thea sitewebsite. andCSS allowsuses youra sitecascading system to haveresolve itsstyle ownconflicts uniqueby look.applying Itstyle doesrules thisbased byon maintainingspecificity, style[[Inheritance sheets(object-oriented thatprogramming)|inheritance]], sitand onimportance. top[[Media ofqueries]] otherallow stylefor rulesadjustments andto arethe triggeredsite's basedlayout onand otherappearance inputs,depending on factors such as device screen size and resolution. The CSS can be addedapplied externally,in internally,three orways: embeddedexternal stylesheets linked in thean HTML tagsfile, internal ''<style>'' blocks, or inline within individual elements.<ref>{{Cite web |last=Abed |first=Sudad |date=2019 |title=Inserting CSS |url=https://www.uoanbar.edu.iq/catalog/file/lects/ITC/sudadAbed/WebAppsDev/5'th%20Lecture.pdf}}</ref>

===Cascading Style Sheets (CSS)===

[[Cascading Style Sheets]] (CSS) controls the presentation aspect of the site and allows your site to have its own unique look. It does this by maintaining style sheets that sit on top of other style rules and are triggered based on other inputs, such as device screen size and resolution. The CSS can be added externally, internally, or embedded in the HTML tags.<ref>{{Cite web |last=Abed |first=Sudad |date=2019 |title=Inserting CSS |url=https://www.uoanbar.edu.iq/catalog/file/lects/ITC/sudadAbed/WebAppsDev/5'th%20Lecture.pdf}}</ref>

===JavaScript===

[[JavaScript]] is an event-based [[imperative programming]] language (as opposed to HTML's [[declarative programming|declarative language]] model) that is used to transform a static HTML page into a dynamic interface. JavaScript code can use the [[Document Object Model]] (DOM), provided by the HTML standard, to manipulate a web page in response to events, like user input.

Using a technique called [[AJAX]], JavaScript code can also actively retrieve content from the web (independent of the original HTML page retrieval), and also react to server-side events as well, adding a truly dynamic nature to the web page experience.

===WebAssembly===

[[WebAssembly]], supported by all the major browsers (i.e. from the major vendors Google, Apple, Mozilla and Microsoft), is the only alternative to JavaScript for running code in web browsers (without the help of plug-ins, such as [[Adobe Flash|Flash]], [[Java (software platform)|Java]] or [[Silverlight]]; all being discontinued, as browsers are dropping plug-in support). Prior to its adoption, there was [[asm.js]] (a subset of JavaScript; and thus strictly works in all browsers), that's also used as a compiler target with efficient support in browsers such as [[Internet Explorer 11]]; and for such browsers that do not support WebAssembly directly, it can be compiled to asm.js and those browsers supported that way. Generally speaking programmers do not program in WebAssembly (or asm.js) directly, but use languages such as [[Rust (programming language)|Rust]], C or [[C++]] or in theory any language, that compile to it.

*

#

* [[File:Front-End-Developer-Mindmap.png|right]][[:es:Usuario:Saloca]]

==Goals for development==