Frontend Development 1 (HTML & CSS)
Selector
When CSS is not being applied inline, the tags to be formatted are targeted as selectors. The formatting rules for that selector are then applied within a set of curly braces {}.
Family name
When listing multiple fonts in a font family property, the specific font names are called family names.
Distributed Version Control System (DVCS)
A type of version control where the complete codebase, including the full version history, is mirrored on every developer's computer. Examples include Git or Mercurial.
HTML
Hypertext Markup Language is the core language for structuring web page content.
HTTPS
Hypertext Transfer Protocol Secure also allows browser to communicate with web servers, but it is slower and more secure because it handles the encryption and decryption of information being passed.
HTTP
Hypertext Transfer Protocol is the communications standard that browsers use to communicate with web servers, allowing them to request pages and pass user input over the Internet.
Full Stack
A web development skillset that incorporates knowledge of front end, middle tier, and back end programming. A full stack developer has enough knowledge to build a complete web application.
icon fonts
Fonts that provide simple icon images, often highly scalable and usually through a combination of imported files, HTML, and CSS
animation
In the context of GIF files, the animation supported is a simple looping-in-place of various image frames.
Flash of ... text
The unintended consequence of using an imported font whereby the text is displayed poorly before the imported font is applied. Some browsers apply the text in a default font (FOUT, Flash of Unstyled Text) or hide it completely (FOIT, Flash of Invisible Text) until the imported font is applied.
Self-closing tag
A tag that isn't designed to surround some other content, and therefore has no syntax that denotes the tag closing after its original opening.
IDE
Integrated Development Environment
property shorthand
Many properties in CSS can be specified at a very modular level, like font-size, font-family, and line-height for text. But a quicker way to assign multiple related property values like this would be the font shorthand property.
Computer Network
When two or more computers are connected for the purpose of transmitting data electronically.
Spacing/Whitespace
Whitespace, such as the space or tab characters, is largely ignored inside the code (after the first character).
View Source
A browser feature that lets the user see the underlying code being used to generate the page, as delivered to the browser.
PNG
A common image file format usable in all browsers, blending some of the features of jpeg and gif. Stands for Portable Network Graphics. Typically pronounced "ping". Supports transparency but not animation.
GIF
A common image file format usable in all browsers, often best for line art, illustrations or images with few complex colors. Stands for Graphics Interchange Format. Typically pronounced hard-g "gif", but the originator intended it to be pronounced with a soft-g "jif". Supports basic animation and transparency.
JPG/JPEG
A common image file format usable in all browsers, often best for photos or images with many complex colors. Stands for Joint Photographic Experts Group, which developed the format. Typically pronounced "J-Peg".
Client/Server Architecture
A computer network architecture in which each computer or process on the network is either a client or a server. The server provides the resources requested by one or more clients.
CDN
A content delivery network is an online host that your website can use to access a common development resource, such as a font, stylesheet, or script. Referencing external resources like this can speed up development time or reduce download time for users through browser caching. It also introduces outside dependencies, though.
Project
A division within a solution that contains one or more code files. A solution will always contain one or more project.
Web page
A file that utilizes HTML to mark up or describe its content and can be viewed in a browser.
Website
A folder of webpages and additional resources, often hosted and available on the Web and associated with a domain name.
CSS font family
A font family in CSS is the property to specify the font to be used. However, it is usually set to a collection of font choices, listed in the order of highest preference first. This can be important because a specified font may not exist on the user's computer, or there may even be a problem importing a font.
JavaScript
A language primarily known for providing event handling, form validation and programming logic in the browser, extending the functionality of web page content. However, JavaScript can also be used as a programming language on the web server for certain types of development.
root-relative link
A link referencing its destination (href) relative to the current website's root folder. Requires that the page be processed by a webserver that understands the location of the site root folder. Uses either the / or ~/ prefix. Examples: /downloads/faq.html or (on a Microsoft web server) ~/downloads/faq.aspx
Browser (Web Client/User Agent)
A program that can make requests for Web pages and renders the resulting HTML, CSS, JavaScript and images into a usable interface.
Web Application
A program that exists on the internet, rather than a desktop, that a user interacts with, as opposed to a static web page that never changes and only presents information.
Developer Tools/Inspector
A suite browser features for developers to analyze the code and the browser's use of it. Specifically, the Inspector allows users to see how CSS and JavaScript has been interpreted in combination with the HTML.
Meta tag
A tag that describes information about the HTML page itself
CSS pseudo-class
Additional code added to a CSS selector, with a : prefix, that targets the selector in various states. A common example is changing the formatting of a link depending on if it has been visited, is selected, or the user is hovering over it. (clicker hovering over a nav bar item, for example)
Response
An action by the Web server that returns a Web page and all the necessary accompanying resources to the requesting client browser.
Request
An action by the browser that is routed to a web server to ask for a Web page. Often accomplished by submitting a URL in a browser's address bar or clicking a link or a button on a Web page.
Solution
An application. A solution contains all of the basic files necessary to run a program.
CSS
Cascading Style Sheets is a language that provides formatting and layout for a web page's content (HTML).
Transparency
An image with transparency has a "see-through" background. When you place it atop another background, that background shows through. (All digital images are some form of rectangle. With transparency, instead of having the image fill the entire rectangle, or having an image sitting on a specific background that extends to the edges of the rectangle, transparency allows that main image to sit on a "blank" background that will be determined by the background upon which it is placed.)
Imported style
As an additional option, CSS style sheets can be imported at the top of other CSS style sheets. One common example would be to import fonts.
Block and inline tags
Block level tags are designed to break up the flow of content on the page with line breaks, normally extend the entire width of their container, and are designed to contain other tags. Inline tags do not normally break the flow of content and are designed to be contained inside block tags ultimately, but not to contain block elements themselves.
Internal Style
CSS can be applied in the head tag of an HTML page, using the style tag, setting formatting rules for the entire page. This technique is somewhat re-usable, but generally discouraged in favor of external styles.
External style
CSS can be applied through a link in the head tag of an HTML page, referencing a re-usable CSS file. This is the most re-usable technique for applying CSS and THE BEST PRACTICE.
Inline Style
CSS can be applied to a specific tag, directly in the HTML code, using the style attribute and applying CSS property-value pairs, separated by semi-colons. This is the most specific way to apply CSS, but the least re-usable and therefore usually discouraged.
CSS Properties and Property-Value Pairs
CSS is applied to HTML by assigning values to specific formatting properties
Generic family
Generic font families are generally used as the "last resort" in the list of font family choices, and "fall back" to a font of a general type that is guaranteed to be available through the browser. These families include cursive, fantasy, monospace, serif, sans-serif.
Hex/Hexadecimal shorthand
Hex shorthand allows many common color choices (those that use repeating digits for contributing colors) to be shortened to only 3 digits, rather than 6. This also limits the color range to 4096 total color combinations (16 shades per continuing color), rather than 16+ million. Examples: #333 is shorthand for #333333 (a darker shade of gray), #0F0 shortens #00FF00 (green), but #123455 (a shade of blue) cannot be expressed with hex shorthand because it doesn't meet the pattern requirements.
RGB
RGB is a color coding system that lists the combined red, blue, and green levels that contribute to any specific color. It supports over 16 million different colors (256 different shades for each of the 3 contributing colors.) There are 4 ways to designate the RGB value: using hexadecimal, hex shorthand, standard numbers, or percentages.
RGBA
RGBA is a color coding system that was added later to CSS, based off fthe original RGB system, which provides for transparency levels. The last value specified is the A, and it stands for "alpha transparency". It supports a range from 0 to 1, where 0 is no transparency (solid color) and 1 is fully transparent (no color.) All decimal values between 0 and 1 designate some partial level of transparency, such as 0.4 being 40% transparent. Example: rgba(10%, 10%, 70%, 0.75) for a 75% transparent blue.
Semantic and Non-Semantic tags
Semantic tags are those that describe the content, rather than what the content looks like. Semantic tags are generally preferred over non-semantic tags where possible.
Attributes and Attribute-Value pairs
Some tags can or must additionally contain attributes or attribute-value pairs to provide additional information about them. These attributes or attribute-value pairs are always included in the opening tag itself, after the tag name.
(Character) Entity References
Special characters such as the copyright symbol, temperature degree character, or a non-breaking space. Always designated with & symbol and a semi-colon surrounding a special character node.
Hosting
The act of making Web content available over the Internet or even over a private Intranet network.
World Wide Web (WWW)
The combined collection of all website content available on the internet.
Intranet
The combined hardware and software infrastructure for a private network that provides content with a smaller distribution.
Internet
The combined hardware and software infrastructure that provides the world's largest computer network, providing a platform for shared information and communications.
Back End
The data that a user is interacting with on a web application, such as a list of customers or information about products they can purchase.
User Interface (UI)
The environment where users interact with a program. Examples include console applications, Windows applications, and Web applications.
XHTML
The last widely implemented version of HTML before HTML5, known for its stricter syntax to aid in easier validation.
HTML5
The latest version of the HTML standard, which follows HTML4 and XHTML after that. Loosened several XHTML syntax requirements and put the focus on a wider range of semantic tags, form fields, and browser functionality for HTML.
Hexadecimal
The original RGB color coding syntax for the Web, hexadecimal is used to specify RGB values (levels of red, green and blue) using only 2 digits per contributing color. So black is represented as #000000, white is #FFFFFF, red is #F00000, green is #00FF00, blue is #0000FF, a lighter gray is #DDDDDD, and a darker gray is #333333. Hexadecimal means a 16-based numbering system. So one digit can express 0-15, where after 9, instead of moving to a 2nd digit like we do in our 10-based decimal system, we use A for 10, B for 11, up to F for 15. After F, we move to a 2nd digit, and so 10 becomes 16 in a hexadecimal system, 11 becomes 17. Continuing, the pattern plays out with 1A becoming 25, 1F becoming 31, and 20 becoming 32. Ultimately the top of the range is reached at FF becoming 255, with a total of 256 possible options for each of the 3 contributing colors of red, green and blue.
Front End
The part of a web application that a user interacts with. Typically this is a website.
Middle Tier
The part of a web application that performs the actual processing of data.
Tag/Element
The primary building block for marking up content in an HTML document. The tag/element name is enclosed within angle brackets. Typically designed in opening and closing pairs to denote what content is "marked up" inside the tag.
Title
The relatively short name or description of the page, used in the title bar or page tab of the browser. It is also used in bookmarking or favoriting a page, and by search engines as the text for the link to that page.
Web server
The software that handles hosting a website (a folder of webpages), responding with the appropriate code and resources when a request is made.
HTML tag
The tag that immediately follows the DTD and surrounds all other content in the file.
Domain
The user-friendly name that is being rented and associated with a website available on the Web.
Body tag
This is the second and last tag nested directly inside the HTML tag, and contains that content of the page that will be rendered onscreen in the browser. It may also contain JavaScript code or links, typically at the bottom, for scripts that don't require immediate implementation.
URL
Uniform Resource Locator - the full address of a resource on the Internet, including the domain.
Github
a Git repository hosting service.
CSS gradient
a blending of two or more colors over a distance and trajectory.
User Experience (UX)
a concept in application design that evaluates a person's feelings and attitudes toward using a particular product, system, or application. UX enables the development of applications that are centered on ease of use and accessibility for the user.
Repository
a data structure which stores a set of files as well as the history of changes made to those files.
Telephone link
a hyperlink designed to launch a phone call targeted at the specified phone number. Designed for mobile phones or other devices with phone capabilities.
email link
a hyperlink designed to prepare an email message to be sent to a particular address. In doing so, the browser launches the user's default email program.
CSS Named Colors
a limited palette of colors identified by specific names .There are 16 core colors, but browsers tend to support a fuller list of 140 based on the CSS3 recommendation.
Absolute link
a link referencing its destination (href) explicitly and completely, including protocol, domain and path. Used to link to resources external to the current website. Examples: http://www.domain.com/folderpath/filename.html, http://centriq.com/events-category/alumni/ or http://google.com
Relative link
a link referencing its destination (href) relative to the current file's location. Used to link to files within the same website. Examples: faq.html, downloads/faq.html, or ../downloads/faq.html
font
a named collection of character designs following a similar aesthetic, typically mapping to commonly recognized letters, numerals, and symbols used in written languages. Can be used to change the look, feel, and readability of the text. Examples: Times, Ariel, etc.
Source Control (aka Version Control or Revision Control)
a set of practices and tools designed to manage changes to an application's source code over time and keep source code backed up in a safe place.
Box shadow
a shadow applied to an HTML element's box model. Box Shadows can have color, horizontal and vertical length, blur radius, and spread.
Text shadow
a shadow applied to text within an HTML element. Typically used to add definition and/or color contrast. Shadows can have horizontal and vertical length, blur radius, and color.
Pixels/Px
a standard unit of measurement for the number of pixels. Doesn't allow users to adjust sizes in their browsers easily, though. More control for the designer, but less responsive. EMs are more responsive..
Centralized Version Control System (CVCS)
a type of version control where there is a single copy of the complete codebase, including full version history, on a server and each individual developer checks out certain files to make changes which are committed directly to that single copy. Examples include Subversion or Perforce.
em
a unit of measurement typically used for fonts or spacing that should be tied to the font size in the current context. Technically stands for the width of a capital M with the current font.
Git
an open-source distributed version control system
named anchor and bookmark type hyperlink
any tag with an ID property can become a "named anchor" or bookmark. The tag's scroll location on the page can now become the destination of a hyperlink. Hyperlinks use the tag's id as an href destination by using the # prefix. Often used for pages with considerable content that requires scrolling. Examples: http://domain.com/folderpath/filename.html#bookmark, /documentation/specs.html#memory, or #top
Specificity
is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
Imported font
pulling a specific font into the browser for use.
link/hyperlink
text or an image within an HTML page that can be clicked to take the user to another Web page or resource. Requires <a> and href attribute
Class
the class attribute can be applied to any HTML tag to further explain its role in the HTML, primarily to apply custom CSS.
Doctype Declaration (DTD)
the first line of code at the top of the HTML file that declares the version of HTML being used.
Head tag
the first tag placed immediately inside the html tag. It provides code about the document, rather than actual page content. This includes the title, meta tags about the document, and access to resources like CSS, favicons, or immediately used JavaScript.
ID
the id attribute can be applied to any HTML tag to uniquely identify it on the page. That ID value can be used to target the tag with JavaScript and to apply custom CSS. (Although nothing "enforces" the uniqueness of the ID on the page, the whole purpose of using an ID instead of a class is to make it unique on the page for targeting with JavaScript and CSS.)
Merge
the process of bringing together two different versions of a repository.
Branching
the process of creating a copy of a repository to create an environment where changes can be made in isolation.
Clone
the process of creating a local copy of a remote repository.
Fetch
the process of pulling down an updated version of a remote repository but not immediately merging it with the local repository.
Pull
the process of pulling down an updated version of a remote repository but not immediately merging it with the local repository.
Push
the process of pushing committed changes from the local repository to the remote repository.
Commit
the process of saving changes from the working copy to the local repository.