Overview of and topical guide to web design and web development
The following outline is provided as an overview of and topical guide to web design and web development, two very related fields:
Web design – field that encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardized code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all.[1] 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. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating markup then they are also expected to be up to date with web accessibility guidelines.
Web development – work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).[2] Web development can range from developing a simple single static page of plain text to complex web-based internet applications (web apps), electronic businesses, and social network services. A more comprehensive list of tasks to which web development commonly refers, may include web engineering, web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development.
Among web professionals, “web development” usually refers to the main non-design aspects of building web sites: writing markup and coding.[3] Web development may use content management systems (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 developers) 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 or information systems 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. 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
[edit]
- Graphic design
- Typography
- Page layout
- User experience design (UX design)
- User interface design (UI design)
- Web Design techniques
- Responsive web design (RWD)
- Adaptive web design (AWD)
- Progressive enhancement
- Tableless web design
- Software
- Adobe Photoshop
- Adobe Illustrator
- Adobe XD
- Figma
- Sketch (software)
- Affinity Designer
- Inkscape
Web development
[edit]
- Front-end web development – 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.
- HyperText Markup Language (HTML) (*.html)
- Cascading Style Sheets (CSS) (*.css)
- CSS framework
- JavaScript (*.js)
- Package managers for JavaScript
- npm (originally short for Node Package Manager)
- Package managers for JavaScript
- Server-side scripting (also known as “Server-side (web) development” or “Back-end (web) development”)
- ASP (*.asp)
- ASP.NET Web Forms (*.aspx)
- ASP.NET Web Pages (*.cshtml, *.vbhtml)
- ColdFusion Markup Language (*.cfm)
- Go (*.go)
- Google Apps Script (*.gs)
- Hack (*.php)
- Haskell (*.hs) (example: Yesod)
- Java (*.jsp) via JavaServer Pages
- JavaScript or TypeScript using Server-side JavaScript (*.ssjs, *.js, *.ts) (example: Node.js)
- Lasso (*.lasso)
- Lua (*.lp *.op *.lua)
- Node.js (*.node)
- Parser (*.p)
- Perl via the CGI.pm module (*.cgi, *.ipl, *.pl)
- PHP (*.php, *.php3, *.php4, *.phtml)
- Progress WebSpeed (*.r,*.w)
- Python (*.py) (examples: Pyramid, Flask, Django)
- R (*.rhtml) – (example: rApache)
- React (*.jsx, *.tsx)
- Ruby (*.rb, *.rbw) (example: Ruby on Rails)
- SMX (*.smx)
- Tcl (*.tcl)
- Full stack web development – involves both front-end and back-end (server-side) development
- Web framework
- Types of framework architectures
- Model–view–controller
- Three-tier architecture
- Types of framework architectures
- Software
- Atom
- IntelliJ IDEA
- Sublime Text
- Visual Studio Code
See also
[edit]
- Outline of computers
- Outline of computing and Outline of information technology
- Outline of computer science
- Outline of artificial intelligence
- Outline of cryptography
- Outline of the Internet
- Outline of Google
- Outline of software
- Types of software
- Outline of free software
- Outline of search engines
- Outline of software development
- Outline of software engineering
- Outline of web design and web development
- Outline of computer programming
- Programming languages
- Outline of C++
- Outline of Perl
- Programming languages
- Types of software
- Outline of computer engineering
- Outline of computer science
- Outline of computing and Outline of information technology
References
[edit]
.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}body.skin-vector-2022 .mw-parser-output .reflist-columns-2{column-width:27em}body.skin-vector-2022 .mw-parser-output .reflist-columns-3{column-width:22.5em}.mw-parser-output .references[data-mw-group=upper-alpha]{list-style-type:upper-alpha}.mw-parser-output .references[data-mw-group=upper-roman]{list-style-type:upper-roman}.mw-parser-output .references[data-mw-group=lower-alpha]{list-style-type:lower-alpha}.mw-parser-output .references[data-mw-group=lower-greek]{list-style-type:lower-greek}.mw-parser-output .references[data-mw-group=lower-roman]{list-style-type:lower-roman}.mw-parser-output div.reflist-liststyle-upper-alpha .references{list-style-type:upper-alpha}.mw-parser-output div.reflist-liststyle-upper-roman .references{list-style-type:upper-roman}.mw-parser-output div.reflist-liststyle-lower-alpha .references{list-style-type:lower-alpha}.mw-parser-output div.reflist-liststyle-lower-greek .references{list-style-type:lower-greek}.mw-parser-output div.reflist-liststyle-lower-roman .references{list-style-type:lower-roman}
External links
[edit]
.mw-parser-output .side-box{margin:4px 0;box-sizing:border-box;border:1px solid #aaa;font-size:88%;line-height:1.25em;background-color:var(–background-color-interactive-subtle,#f8f9fa);color:inherit;display:flow-root}.mw-parser-output .infobox .side-box{font-size:100%}.mw-parser-output .side-box-abovebelow,.mw-parser-output .side-box-text{padding:0.25em 0.9em}.mw-parser-output .side-box-image{padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .side-box-imageright{padding:2px 0.9em 2px 0;text-align:center}@media(min-width:500px){.mw-parser-output .side-box-flex{display:flex;align-items:center}.mw-parser-output .side-box-text{flex:1;min-width:0}}@media(min-width:640px){.mw-parser-output .side-box{width:238px}.mw-parser-output .side-box-right{clear:right;float:right;margin-left:1em}.mw-parser-output .side-box-left{margin-right:1em}}.mw-parser-output .sister-box .side-box-abovebelow{padding:0.75em 0;text-align:center}.mw-parser-output .sister-box .side-box-abovebelow>b{display:block}.mw-parser-output .sister-box .side-box-text>ul{border-top:1px solid #aaa;padding:0.75em 0;width:220px;margin:0 auto}.mw-parser-output .sister-box .side-box-text>ul>li{min-height:31px}.mw-parser-output .sister-logo{display:inline-block;width:31px;line-height:31px;vertical-align:middle;text-align:center}.mw-parser-output .sister-link{display:inline-block;margin-left:7px;width:182px;vertical-align:middle}@media print{body.ns-0 .mw-parser-output .sistersitebox{display:none!important}}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sistersitebox img[src*=”Wiktionary-logo-v2.svg”]{background-color:white}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sistersitebox img[src*=”Wiktionary-logo-v2.svg”]{background-color:white}}.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}
Web design at Wikipedia’s sister projects
- Definitions from Wiktionary
- Media from Commons
- Quotations from Wikiquote
- Texts from Wikisource
- Textbooks from Wikibooks
- Resources from Wikiversity
Web development at Wikipedia’s sister projects
- Definitions from Wiktionary
- Media from Commons
- Quotations from Wikiquote
- Texts from Wikisource
- Textbooks from Wikibooks
- Resources from Wikiversity
.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:”: “}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:”a0 · “;font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:” (“;font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:”)”;font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:” “counter(listitem)”a0 “}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:” (“counter(listitem)”a0 “}.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox-styles+.navbox,.mw-parser-output .navbox+span.mw-empty-elt+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd;color:inherit}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf;color:inherit}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf;color:inherit}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff;color:inherit}.mw-parser-output .navbox-even{background-color:#f7f7f7;color:inherit}.mw-parser-output .navbox-odd{background-color:transparent;color:inherit}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin–responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}
Retrieved from “https://en.wikipedia.org/w/index.php?title=Outline_of_web_design_and_web_development&oldid=1346251721”