The following

outline Outline or outlining may refer to: * Outline (list), a document summary, in hierarchical list format * Code folding, a method of hiding or collapsing code or text to see content in outline form * Outline drawing, a sketch depicting the outer edg ...

is provided as an overview of and topical guide to web design and web development, two very related fields:

Web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

encompasses many different skills and disciplines in the production and maintenance of

websites A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and Wikipe ...

. The different areas of web design include web graphic design;

interface design User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and th ...

; authoring, including standardized code and

proprietary software Proprietary software is computer software, software that is deemed within the free and open-source software to be non-free because its creator, publisher, or other rightsholder or rightsholder partner exercises a legal monopoly afforded by modern ...

;

user experience design User experience design (UX design, UXD, UED, or XD) is the process of defining the experience a user would go through when interacting with a digital product or website. Design decisions in UX design are often driven by research, data analysis, an ...

; and

search engine optimization Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines. SEO targets unpaid traffic (known as "natural" or " organic" results) rather than di ...

. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing

markup Markup or mark-up can refer to: * Markup language, a standardized set of notations used to annotate a plain-text document's content to give information regarding the structure of the text or instructions for how it is to be displayed ** Lightweigh ...

. Web design partially overlaps

web engineering The World Wide Web has become a major delivery platform for a variety of complex and sophisticated enterprise applications in several domains. In addition to their inherent multifaceted functionality, these Web applications exhibit complex behavio ...

in the broader scope of

web development Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web application ...

. Web designers are expected to have an awareness of

usability Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience. In software engineering, usability is the degree to which a sof ...

and if their role involves creating markup then they are also expected to be up to date with

web accessibility Web accessibility, or eAccessibility,European CommissionCommunication from the Commission to the Council, the European Parliament and the , European Economic and Social Committee and the Committee of the Regions: eAccessibility, EC(2005)1095 pub ...

guidelines.

Web development Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web application ...

is the work involved in developing a

web site A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and Wikip ...

for the

Internet The Internet (or internet) is the global system of interconnected computer networks that uses the Internet protocol suite (TCP/IP) to communicate between networks and devices. It is a ''internetworking, network of networks'' that consists ...

(

World Wide Web The World Wide Web (WWW), commonly known as the Web, is an information system enabling documents and other web resources to be accessed over the Internet. Documents and downloadable media are made available to the network through web se ...

) or an intranet (a private network). Web development can range from developing a simple single static page of

plain text In computing, plain text is a loose term for data (e.g. file contents) that represent only characters of readable material but not its graphical representation nor other objects ( floating-point numbers, images, etc.). It may also include a limi ...

to complex web-based internet applications (

web apps A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serve ...

electronic business Electronic business (or "Online Business" or "e-business") is any kind of business or commercial transaction that includes sharing information across the internet. Commerce constitutes the exchange of products and services between businesses, grou ...

es, and

social network service A social networking service or SNS (sometimes called a social networking site) is an online platform which people use to build social networks or social relationships with other people who share similar personal or career content, interests, act ...

s. A more comprehensive list of tasks to which web development commonly refers, may include

web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

web content development Web content development is the process of researching, writing, gathering, organizing, and editing information for publication on websites. Website content may consist of prose, graphics, pictures, recordings, movies, or other digital assets that ...

, client liaison,

client-side Client-side refers to operations that are performed by the client in a client–server relationship in a computer network. General concepts Typically, a client is a computer application, such as a web browser, that runs on a user's local comp ...

server-side In the client–server model, server-side refers to programs and operations that run on the server. This is in contrast to client-side programs and operations which run on the client. General concepts Typically, a server is a computer applicati ...

scripting Script may refer to: Writing systems * Script, a distinctive writing system, based on a repertoire of specific elements or symbols, or that repertoire * Script (styles of handwriting) ** Script typeface, a typeface with characteristics of handw ...

web server A web server is computer software and underlying hardware that accepts requests via HTTP (the network protocol created to distribute web content) or its secure variant HTTPS. A user agent, commonly a web browser or web crawler, initi ...

and

network security Network security consists of the policies, processes and practices adopted to prevent, detect and monitor unauthorized access, misuse, modification, or denial of a computer network and network-accessible resources. Network security involves th ...

configuration, and

e-commerce E-commerce (electronic commerce) is the activity of electronically buying or selling of products on online services or over the Internet. E-commerce draws on technologies such as mobile commerce, electronic funds transfer, supply chain mana ...

development. Among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing

and coding. Web development may use

content management systems A content management system (CMS) is computer software used to manage the creation and modification of digital content (content management).''Managing Enterprise Content: A Unified Content Strategy''. Ann Rockley, Pamela Kostur, Steve Manning. New ...

(CMS) to make content changes easier and available with basic technical skills. For larger organizations and businesses, web development teams can consist of hundreds of people (

web developer A web developer is a programmer who develops World Wide Web applications using a client–server model. The applications typically use HTML, CSS, and JavaScript in the client, and any general-purpose programming language in the server. is used ...

s) and follow standard methods like Agile methodologies while developing websites. Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a

graphic designer A graphic designer is a professional within the graphic design and graphic arts industry who assembles together images, typography, or motion graphics to create a piece of design. A graphic designer creates the graphics primarily for publishe ...

information systems An information system (IS) is a formal, sociotechnical, organizational system designed to collect, process, store, and distribute information. From a sociotechnical perspective, information systems are composed by four components: task, people ...

technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of web developer specialization: front-end developer, back-end developer, and

full-stack developer In computing, a solution stack or software stack is a set of software subsystems or components needed to create a complete platform such that no additional software is needed to support applications. Applications are said to "run on" or "run on t ...

. Front-end developers are responsible for behaviour and visuals that run in the user browser, back-end developers deal with the servers and full-stack developers are responsible for both. Currently, the demand for React and Node.JS developers are very high all over the world.

Web design

* Graphic design **

Typography Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing ( leading), an ...

Page layout In graphic design, page layout is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives. The high-level page layout involves deciding on the ...

User experience design User experience design (UX design, UXD, UED, or XD) is the process of defining the experience a user would go through when interacting with a digital product or website. Design decisions in UX design are often driven by research, data analysis, an ...

(UX design) *

User interface design User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and ...

(UI design) * Web Design techniques ** Responsive web design (RWD) ** Adaptive web design (AWD) **

Progressive enhancement Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access r ...

** Tableless web design *

Software Software is a set of computer programs and associated software documentation, documentation and data (computing), data. This is in contrast to Computer hardware, hardware, from which the system is built and which actually performs the work. ...

Adobe Photoshop Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc. for Windows and macOS. It was originally created in 1988 by Thomas and John Knoll. Since then, the software has become the industry standard not only in ras ...

Adobe Illustrator Adobe Illustrator is a vector graphics editor and design program developed and marketed by Adobe Inc. Originally designed for the Apple Macintosh, development of Adobe Illustrator began in 1985. Along with Creative Cloud (Adobe's shift to month ...

Sketch (software) Sketch is a vector graphics editor for macOS developed by the Dutch company Sketch B.V. (formerly named Bohemian Coding). It was first released on 7 September 2010 and won an Apple Design Award in 2012. It also has a web application that allows ...

Affinity Designer Affinity Designer is a vector graphics editor developed by Serif for macOS, iPadOS, and Microsoft Windows. It is part of the "Affinity trinity" alongside Affinity Photo and Affinity Publisher. Affinity Designer is available for purchase direct ...

Inkscape Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (SVG) format. Other formats can be imported and exported. Inkscape can render primitive vector shapes (e.g. re ...

Web development

Front-end web development 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. Tools used for front-end development There are severa ...

– the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. **

HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...

(HyperText Markup Language) (*.html) **

CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone t ...

(Cascading Style Sheets) (*.css) ***

CSS framework A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additio ...

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

(*.js) ***

Package manager A package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner. A package manager deals w ...

s for JavaScript **** npm (originally short for Node Package Manager) *

Server-side scripting Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. The alternative is for the web server itself ...

(also known as "Server-side (web) development" or "Back-end (web) development") **

ActiveVFP ActiveVFP (also known as AVFP) is a server-side scripting framework designed for Web development to produce dynamic Web pages. Similar to PHP, but using the native Visual Foxpro (VFP) language and database (or other databases like Microsoft SQL ...

(*.avfp) **

ASP Asp may refer to: Places * Asp, part of Densbüren, Aargau, Switzerland * Aspe (''Asp'' in Valencian), Alicante, Spain * Asp Lake, a lake in Minnesota Animals * Asp (fish) * Asp (snake), in antiquity, one of several venomous snakes ** ''Cera ...

(*.asp) ** ASP.NET Web Forms (*.aspx) **

ASP.NET Web Pages Razor is an ASP.NET programming syntax used to create dynamic web pages with the C# or VB.NET programming languages. Razor was in development in June 2010 and was released for Microsoft Visual Studio 2010 in January 2011. Razor is a simple-synta ...

(*.cshtml, *.vbhtml) **

ColdFusion Markup Language ColdFusion Markup Language, more commonly known as CFML, is a scripting language for web development that runs on the JVM, the .NET framework, and Google App Engine. Multiple commercial and open source implementations of CFML engines are availab ...

(*.cfm) ** Go (*.go) **

Google Apps Script Google Apps Script is a scripting platform developed by Google for light-weight application development in the Google Workspace platform. Google Apps Script was initially developed by Mike Harm as a side project while working as a developer on G ...

(*.gs) **

Hack Hack may refer to: Arts, entertainment, and media Games * ''Hack'' (Unix video game), a 1984 roguelike video game * ''.hack'' (video game series), a series of video games by the multimedia franchise ''.hack'' Music * ''Hack'' (album), a 199 ...

(*.php) **

Haskell Haskell () is a general-purpose, statically-typed, purely functional programming language with type inference and lazy evaluation. Designed for teaching, research and industrial applications, Haskell has pioneered a number of programming lan ...

(*.hs) (example:

Yesod Yesod (Hebrew: יְסוֹד ''Yəsōḏ'', Tiberian: ''Yăsōḏ'', "foundation") is a sephirah or node in the kabbalistic Tree of Life, a system of Jewish philosophy. Yesod, located near the base of the Tree, is the sephirah below Hod and Ne ...

) **

Java Java (; id, Jawa, ; jv, ꦗꦮ; su, ) is one of the Greater Sunda Islands in Indonesia. It is bordered by the Indian Ocean to the south and the Java Sea to the north. With a population of 151.6 million people, Java is the world's mo ...

(*.jsp) via

JavaServer Pages Jakarta Server Pages (JSP; formerly JavaServer Pages) is a collection of technologies that helps software developers create dynamically generated web pages based on HTML, XML, SOAP, or other document types. Released in 1999 by Sun Microsystems, J ...

using

Server-side JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, ofte ...

(*.ssjs, *.js) (example:

Node.js Node.js is an open-source server environment. Node.js is cross-platform and runs on Windows, Linux, Unix, and macOS. Node.js is a back-end JavaScript runtime environment. Node.js runs on the V8 JavaScript Engine and executes JavaScript code ou ...

) **

Lasso A lasso ( or ), also called lariat, riata, or reata (all from Castilian, la reata 're-tied rope'), is a loop of rope designed as a restraint to be thrown around a target and tightened when pulled. It is a well-known tool of the Spanish a ...

(*.lasso) **

Lua Lua or LUA may refer to: Science and technology * Lua (programming language) * Latvia University of Agriculture * Last universal ancestor, in evolution Ethnicity and language * Lua people, of Laos * Lawa people, of Thailand sometimes referred t ...

(*.lp *.op *.lua) **

NodeJS Node.js is an open-source server environment. Node.js is cross-platform and runs on Windows, Linux, Unix, and macOS. Node.js is a back-end JavaScript runtime environment. Node.js runs on the V8 JavaScript Engine and executes JavaScript code ou ...

(*.node) **

Parser Parsing, syntax analysis, or syntactic analysis is the process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar. The term ''parsing'' comes from Lati ...

(*.p) **

Perl Perl is a family of two High-level programming language, high-level, General-purpose programming language, general-purpose, Interpreter (computing), interpreted, dynamic programming languages. "Perl" refers to Perl 5, but from 2000 to 2019 it ...

via the

CGI.pm CGI.pm is a large and once widely used Perl module for programming Common Gateway Interface (CGI) web Web most often refers to: * Spider web, a silken structure created by the animal * World Wide Web or the Web, an Internet-based hypertext ...

module (*.cgi, *.ipl, *.pl) **

PHP PHP is a General-purpose programming language, general-purpose scripting language geared toward web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1993 and released in 1995. The PHP reference implementati ...

(*.php, *.php3, *.php4, *.phtml) ** Progress WebSpeed (*.r,*.w) ** Python (*.py) (examples:

Pyramid A pyramid (from el, πυραμίς ') is a structure whose outer surfaces are triangular and converge to a single step at the top, making the shape roughly a pyramid in the geometric sense. The base of a pyramid can be trilateral, quadrila ...

Flask Flask may refer to: Container * Hip flask, a small container used to carry a small amount of liquid * Laboratory flask, laboratory glassware for holding larger volumes than simple test tubes ** Erlenmeyer flask, a common laboratory flask wit ...

Django Django may refer to: Arts and entertainment Film * ''Django'' (1966 film), a 1966 Italian Western by Sergio Corbucci which had a particular influence on the Spaghetti Western genre and a number of unofficial prequels and sequels ** ''Django, Prep ...

) ** R (*.rhtml) – (example: rApache) **

React REACT or React may refer to: Science and technology * REACT (telescope), a telescope at Fenton Hill Observatory, New Mexico, US Computing * React (JavaScript library) , a JavaScript library for building user interfaces, from Facebook ** React Nat ...

(*.jsx) **

Ruby A ruby is a pinkish red to blood-red colored gemstone, a variety of the mineral corundum (aluminium oxide). Ruby is one of the most popular traditional jewelry gems and is very durable. Other varieties of gem-quality corundum are called sapp ...

(*.rb, *.rbw) (example:

Ruby on Rails Ruby on Rails (simplified as Rails) is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web ...

) ** SMX (*.smx) **

Tcl TCL or Tcl or TCLs may refer to: Business * TCL Technology, a Chinese consumer electronics and appliance company ** TCL Electronics, a subsidiary of TCL Technology * Texas Collegiate League, a collegiate baseball league * Trade Centre Limited ...

(*.tcl) **

WebDNA WebDNA is a server-side scripting, interpreted language with an embedded database system, specifically designed for the World Wide Web. Its primary use is in creating database-driven dynamic web page applications. Released in 1995, the name was r ...

(*.dna,*.tpl) * Full stack web development – involves both front-end and back-end (server-side) development *

Web framework A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build an ...

** Types of framework architectures ***

Model–view–controller Model–view–controller (MVC) is a software architectural pattern commonly used for developing user interfaces that divide the related program logic into three interconnected elements. This is done to separate internal representations of infor ...

***

Three-tier architecture In software engineering, multitier architecture (often referred to as ''n''-tier architecture) is a client–server architecture in which presentation, application processing and data management functions are physically separated. The most wide ...

Atom Every atom is composed of a nucleus and one or more electrons bound to the nucleus. The nucleus is made of one or more protons and a number of neutrons. Only the most common variety of hydrogen has no neutrons. Every solid, liquid, gas ...

IntelliJ IDEA IntelliJ IDEA is an integrated development environment (IDE) written in Java for developing computer software written in Java, Kotlin, Groovy, and other JVM-based languages. It is developed by JetBrains (formerly known as IntelliJ) and is a ...

Sublime Text Sublime Text is a shareware text and source code editor available for Windows, macOS, and Linux. It natively supports many programming languages and markup languages. Users can customize it with themes and expand its functionality with ...

Visual Studio Code Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by Microsoft with the Electron Framework, for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code compl ...

References

External links

{{Outline footer

Computer programming Computer programming is the process of performing a particular computation (or more generally, accomplishing a specific computing result), usually by designing and building an executable computer program. Programming involves tasks such as anal ...

Web design

Web development

See also

References

External links