Loading...
 
Web development is a broad term for the work involved in developing a web site for the Internet

Web Development

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services.1

Related Topics

Skills

Learning Web Development? These Skills Will Make You Stand Out

Standards

  • W3 - Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, device APIs, and other technologies for Web Applications (“WebApps”). This section also includes information on how to make pages accessible to people with disabilities (WCAG), to internationalize them, and make them work on mobile devices.
  • Web Content Accessibility Guidelines (WCAG) 2.1 overs a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
  • Google HTML/CSS Style Guide - This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.
  • HTML5 (and Some CSS) Best Practice - These tips are meant for beginners and those who wish to freshen up on HTML best practices. I tried to list here many things that, although simple, make a huge difference on code readability. Hopefully everyone who reads this will be able to learn something new. Enjoy!
  • HTTP Security Best Practice
  • Best Practices for a Faster Web App with HTML5 - Much of HTML5 aims to deliver native browser support for components and techniques that we have achieved through JavaScript libraries thus far. Using these features, when present, can end up delivering a much faster experience for your users. In this tutorial, I won't recap the excellent performance research that you've seen at Yahoo's Exceptional Performance site or Google's Page Speed docs and Let's make the web faster site. Instead I'll focus on how putting HTML5 and CSS3 to use today can make your web apps more responsive.
  • HTML5 Style Guide and Coding Conventions - Web developers are often uncertain about the coding style and syntax to use in HTML. Between 2000 and 2010, many web developers converted from HTML to XHTML. With XHTML, developers were forced to write valid and "well-formed" code. HTML5 is a bit more sloppy when it comes to code validation.
  • Information Architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming, technical writing, enterprise architecture, and critical system software design. Information architecture has somewhat different meanings in these different branches of IS or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling websites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape.2
  • Model-View-Controller - The MVC paradigm is a way of breaking an application, or even just a piece of an application's interface, into three parts: the model, the view, and the controller.

WCAG

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.3

Understanding Levels of Conformance

  • WCAG Level A: This level represents the bare-minimum of compliance.
  • WCAG Level AA: This level is the target compliance level that legally covers where a group that works with the public needs to be according to the Americans with Disabilities Act (ADA).
  • WCAG Level AAA: Any organization that has achieved this level of compliance is exceeding requirements. It is the highest level achievable, meaning it complies with the success criteria of all three levels.

WCAG Resources

Content

  • Use plain language and avoid figures of speech, idioms, and complicated metaphors. - 3.1.5 Reading Level
  • Make sure that button, a, and label element content is unique and descriptive. - 1.3.1 Info and Relationships
  • Use left-aligned text for left-to-right languages, and right-aligned text for right-to-left languages. - 1.4.8 Visual Presentation

Page Structure

  • Validate your HTML. - 4.1.1 Parsing
  • Use a lang attribute on the html element. - 3.1.1 Language of Page
  • Provide a unique title for each page or view. - 2.4.2 Page Titled
  • Ensure that viewport zoom is not disabled. - 1.4.4 Resize text
  • Use landmark elements to indicate important content regions. - 4.1.2 Name, Role, Value
  • Ensure a linear content flow. - 2.4.3 Focus Order
  • Avoid using the autofocus attribute. - 2.4.3 Focus Order
  • Remove session timeouts. - 2.2.1 Timing Adjustable
  • Remove title attribute tooltips. - 4.1.2 Name, Role, Value

Keyboard

  • Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input. - 2.4.7 Focus Visible
  • Check to see that keyboard focus order matches the visual layout. - 1.3.2 Meaningful Sequence
  • Remove invisible focusable elements. - 2.4.3 Focus Order

Images

  • Make sure that all img elements have an alt attribute. - 1.1.1 Non-text Content.
  • Make sure that decorative images have empty alt attribute values. - 1.1.1 Non-text Content
  • Provide a text alternative for complex images such as charts, graphs, and maps. - 1.1.1 Non-text Content
  • For images containing text, make sure the alt description includes the image's text. - 1.1.1 Non-text Content
SVGs
  • Make sure that svg elements include the code focusable="false" when they are the child element of a focusable element. - 1.3.1 Info and Relationships
  • Add aria-hidden="true" to svg that is decorative. - 4.1.2 Name, Role, Value
  • Make sure that svg utilizing the use element has whitespace between the svg and use elements. - 2.1.2 No Keyboard Trap
  • Ensure that img elements with an svg source includes the role="img" attribute. - 4.1.2 Name, Role, Value

Headings

  • Use heading elements to introduce content. - 2.4.6 Headings or Labels
  • Use only one h1 element per page or view. - 2.4.6 Headings or Labels
  • Heading elements should be written in a logical sequence. - 2.4.6 Headings or Labels
  • Don't skip heading levels. - 2.4.6 Headings or Labels

Lists

  • Use list elements (ol, ul, and dl) for list content. - 1.3.1 Info and Relationships

Controls

  • Use the a element for links. - 1.3.1 Info and Relationships
  • Ensure that links are recognizable. - 1.4.1 Use of Color
  • Ensure that controls have :focus states. - 2.4.7 Focus Visible
  • Use the button element for buttons. - 1.3.1 Info and Relationships
  • Provide a skip link and make sure that it is visible when focused. - 2.4.1 Bypass Blocks
  • Identify links that open in a new window. - G201: Giving users advanced warning when opening a new window

Tables

  • Use the table element to describe tabular data. - 1.3.1 Info and Relationships
  • Use th for table headers (with appropriate scope attributes). - 4.1.1 Parsing
  • Use the caption element to provide a title for the table. - 2.4.6 Headings or Labels

Forms

  • All inputs in a form are associated with a corresponding label element. - 3.2.2 On Input
  • Use fieldset and legend elements where appropriate. - 1.3.1 Info and Relationships
  • Inputs use autocomplete where appropriate. - 1.3.5 Identify Input Purpose
  • Make sure that form input errors are displayed in list above the form after submission. - 3.3.1 Error Identification
  • Associate input error messaging with the input it corresponds to. - 3.3.1 Error Identification
  • Make sure that error, warning, and success states are not visually communicated by just color. - 1.4.1 Use of Color

Media

  • Make sure that media does not autoplay. - 1.4.2 Audio Control
  • Ensure that media controls use appropriate markup. - 1.3.1 Info and Relationships
  • Check to see that all media can be paused. - 2.1.1 Keyboard
Video
  • Confirm the presence of captions. - 1.2.2 Captions
  • Remove seizure triggers. - 2.3.1 Three Flashes or Below Threshold
Audio
  • Confirm that transcripts are available. - 1.1.1 Non-text Content

Appearance

  • Check your content in specialized browsing modes. - 1.4.1 Use of Color
  • Increase text size to 200%. - 1.4.4 Resize text
  • Double-check that good proximity between content is maintained. - 1.3.3 Sensory Characteristics
  • Make sure color isn't the only way information is conveyed. - 1.4.1 Use of Color
  • Use a simple, straightforward, and consistent layout. - 1.4.10 Reflow

Animation

  • Ensure animations are subtle and not do not flash too much. - 2.3.1 Three Flashes or Below Threshold
  • Provide a mechanism to pause background video. - 2.2.2 Pause, Stop, Hide
  • Make sure all animation obeys the prefers-reduced-motion media query. - 2.3.3 Animation from Interactions

Color contrast

  • Check the contrast for all normal-sized text. - 1.4.3 Contrast
  • Check the contrast for all large-sized text. - 1.4.3 Contrast
  • Check the contrast for all icons. - 1.4.11 Non-text Contrast
  • Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.). - 1.4.11 Non-text Contrast
  • Check text that overlaps images or video. - 1.4.3 Contrast
  • Check custom ::selection colors. - 1.4.3 Contrast

Mobile/Touch

  • Check that the site can be rotated to any orientation. - 1.3.4 Orientation
  • Remove horizontal scrolling. - 1.4.10 Reflow
  • Button and link icons can be activated with ease. - 2.5.5 Target Size
  • Ensure sufficient space between clickable items in order to provide a scroll area. - 2.4.1 Bypass Blocks

Basics

HTML5

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and, as of December 2012, is a candidate recommendation of the World Wide Web Consortium (W3C). Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.4

Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation.5

Javascript

Javascript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side network programming (with Node.js), game development and the creation of desktop and mobile applications.6

Front-End Web Frameworks

Grid Design

Grid Design A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.7

Responsive Web Design

Responsive Web Design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).8

Responsive design in a nutshell9

The basic idea of responsive web design is that a website should "respond" to the device it's being viewed on. In broad terms, this can mean things like:

  • Adapting the layout to suit different screen sizes, from widescreen desktops to tiny phones
  • Resizing images to suit the screen resolution
  • Serving up lower-bandwidth images to mobile devices
  • Simplifying page elements for mobile use
  • Hiding non-essential elements on smaller screens
  • Providing larger, finger-friendly links and buttons for mobile users, and
  • Detecting and responding to mobile features such as geolocation and device orientation.

HTML5 Boilerplate

HTML5 Boilerplate A template for HTML5 and CSS3 front-end development.10

Twitter Bootstrap

Twitter Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. 11

Skeleton

Skeleton: Responsive CSS Boilerplate

Foundation by ZURB

Foundation by ZURB is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Foundation is maintained by ZURB and is an open source project.12

Web Servers

Nginx

Nginx (pronounced "engine x") is a web server. It can act as a reverse proxy server for HTTP, HTTPS, SMTP, POP3, and IMAP protocols, as well as a load balancer and an HTTP cache.13

Apache

The Apache HTTP Server, colloquially called Apache, is the world's most widely used web server software. Originally based on the NCSA HTTPd server, development of Apache began in early 1995 after work on the NCSA code stalled. Apache played a key role in the initial growth of the World Wide Web, quickly overtaking NCSA HTTPd as the dominant HTTP server, and has remained the most popular HTTP server since April 1996. In 2009, it became the first web server software to serve more than 100 million websites.14

1 Web development. (2013, October 11). In Wikipedia, The Free Encyclopedia. Retrieved 00:18, October 13, 2013, from http://en.wikipedia.org/w/index.php?title=Web_development&oldid=576687229
2 Information architecture. (2014, June 2). In Wikipedia, The Free Encyclopedia. Retrieved 03:23, June 4, 2014, from http://en.wikipedia.org/w/index.php?title=Information_architecture&oldid=611274917
4 HTML5. (2014, August 16). In Wikipedia, The Free Encyclopedia. Retrieved 23:05, August 30, 2014, from http://en.wikipedia.org/w/index.php?title=HTML5&oldid=621532511
5 Cascading Style Sheets. (2014, August 30). In Wikipedia, The Free Encyclopedia. Retrieved 22:57, August 30, 2014, from http://en.wikipedia.org/w/index.php?title=Cascading_Style_Sheets&oldid=623420712
6 JavaScript. (2014, August 28). In Wikipedia, The Free Encyclopedia. Retrieved 22:49, August 30, 2014, from http://en.wikipedia.org/w/index.php?title=JavaScript&oldid=623199819
7 Grid (graphic design). (2014, May 11). In Wikipedia, The Free Encyclopedia. Retrieved 03:28, June 4, 2014, from http://en.wikipedia.org/w/index.php?title=Grid_(graphic_design)&oldid=608099148
8 Responsive web design. (2014, May 31). In Wikipedia, The Free Encyclopedia. Retrieved 03:30, June 4, 2014, from http://en.wikipedia.org/w/index.php?title=Responsive_web_design&oldid=610873831
10 Paul Irish. (2016, December 30). In Wikipedia, The Free Encyclopedia. Retrieved 17:00, March 5, 2017, from https://en.wikipedia.org/w/index.php?title=Paul_Irish&oldid=757370335
11 Bootstrap (front-end framework). (2017, November 9). In Wikipedia, The Free Encyclopedia. Retrieved 18:17, November 26, 2017, from https://en.wikipedia.org/w/index.php?title=Bootstrap_(front-end_framework)&oldid=809488115
12 Foundation (framework). (2017, February 17). In Wikipedia, The Free Encyclopedia. Retrieved 16:50, March 5, 2017, from https://en.wikipedia.org/w/index.php?title=Foundation_(framework)&oldid=765970128
13 Nginx. (2016, February 19). In Wikipedia, The Free Encyclopedia. Retrieved 16:50, February 20, 2016, from https://en.wikipedia.org/w/index.php?title=Nginx&oldid=705793829
14 Apache HTTP Server. (2015, April 15). In Wikipedia, The Free Encyclopedia. Retrieved 21:36, April 26, 2015, from http://en.wikipedia.org/w/index.php?title=Apache_HTTP_Server&oldid=656547757

Last edited by MichaelAlber .
Page last modified on Sunday June 21, 2020 20:24:33 UTC.

Books

Linux Command Line and Shell Scripting Bible Linux Command Line and Shell Scripting Bible - Linux Command Line and Shell Scripting Bible is your essential Linux guide. With detailed instruction and abundant examples, this book teaches you how to bypass the graphical interface and communicate directly with your computer, saving time and expanding capability.


Linux Bible Linux Bible - Linux continues to be an excellent, low-cost alternative to expensive operating systems. Whether you're new to Linux or need a reliable update and reference, this is an excellent resource. Veteran bestselling author Christopher Negus provides a complete tutorial packed with major updates, revisions, and hands-on exercises so that you can confidently start using Linux today.


Learning Python Learning Python - Portable, powerful, and a breeze to use, Python is the popular open source object-oriented programming language used for both standalone programs and scripting applications.


Modern PHP: New Features and Good Practices Modern PHP: New Features and Good Practices - PHP is experiencing a renaissance, though it may be difficult to tell with all of the outdated PHP tutorials online. With this practical guide, you'll learn how PHP has become a full-featured, mature language with object-orientation, namespaces, and a growing collection of reusable component libraries.