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
Resources
Web technology for developers - The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.
Skills
Learning Web Development? These Skills Will Make You Stand Out
- A Basic Understanding of Networking - Internet Protocol Suite
- Understand How HTTP Works - Hypertext Transfer Protocol (HTTP)
- Learn To Work in Unix Shells - Bash
- Learn To Use Git
- Learn To Use Browser Developer Tools - Chrome DevTools
- Learn an Additional Language - PHP, Python, Javascript
- Learn to Comment Your Code Properly
Related Topics
- WebStorm - The smartest JavaScript IDE : WebStorm - The smartest JavaScript IDE
- HTML5 : HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.
- Basic Index-html : Basic HTML5 index.html file
- 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.
- Nginx : NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server.
- Apache : The Apache HTTP Server, colloquially called Apache, is the world's most widely used web server software.
Development
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. 2
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.3
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.4
- 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.5
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
- How to Meet WCAG (Quick Reference)
- Understanding WCAG 2.1
- Techniques for WCAG 2.1
- Web Content Accessibility Guidelines (WCAG) 2.0
- Web Content Accessibility Guidelines (WCAG) 2.1
- The A11Y Project Checklist
- ADA Website Compliance Checklist. Accessibility Guidelines. WCAG 2.1
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
- Learn to Code HTML & CSS
- Introduction to HTML
- Must-Have Social Meta Tags for Twitter, Google+, Facebook and More
HTML Meta Tags
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.6
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.7
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.8
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.9
- 65 Resources for Grid-Based Design
- Design Grids for Web Pages
- Grid-based Layout
- Visual Design
- Setting Type on the Web to a Baseline Grid
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).10
Responsive design in a nutshell11
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.12
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. 13
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.14
