Terminology Flashcards
Understand basic coding concepts without searching every time
What is a viewport?
A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the document you’re viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode). Content outside the viewport is not visible onscreen until scrolled into view.
The portion of the viewport that is currently visible is called the visual viewport. This can be smaller than the layout viewport, such as when the user has pinched-zoomed. The layout viewport remains the same, but the visual viewport became smaller.
https://developer.mozilla.org/en-US/docs/Glossary/Viewport
What does using media queries do in CSS?
Media queries allow you to apply CSS styles depending on a device’s media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.
Media queries are used for the following:
- To conditionally apply styles with the CSS @media and @import at-rules.
- To target specific media for the <style>, <link></link>, <source></source>, and other HTML elements with the media= or sizes=" attributes.</style>
- To test and monitor media states using the Window.matchMedia() and EventTarget.addEventListener() methods.
Syntax-a media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
Media types define the broad category of device for which the media query applies: all, print, screen. The type is optional (assumed to be all) except when using the not or only logical operators.
Media features describe a specific characteristic of the user agent, output device, or environment:
any-hover
any-pointer
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
What is RWD?
RWD is Responsive Web Design is NOT a separate technology…it’s an approach.
Responsive web design (RWD) is a web design approach to make web pages render well on all screen sizes and resolutions while ensuring good usability. It is the way to design for a multi-device web. In this article, we’ll help you understand some techniques that can be used to master it.
The difference is mainly to do with the devices involved, and the technologies available to create solutions:
We used to talk about desktop or mobile, but now there are many different types of device available such as desktop, laptop, mobile, tablets, watches, etc. Instead of catering for a few different screen sizes, we now need to design sites defensively to cater for common screen sizes and resolutions, plus unknowns.
Mobile devices used to be low-powered in terms of CPU/GPU and available bandwidth. Some didn’t support CSS or even HTML, and as a result, it was common to perform server-side browser sniffing to determine device/browser type before then serving a site that the device would be able to cope with. Mobile devices often had really simple, basic experiences served to them because it was all they could handle. These days, mobile devices are able to handle the same technologies as desktop computers, so such techniques are less common.
You should still use the techniques discussed in this article to serve mobile users a suitable experience, as there are still constraints such as battery life and bandwidth to worry about.
User experience is also a concern. A mobile user of a travel site might just want to check flight times and delay information, for example, and not be presented with a 3D animated globe showing flight paths and your company history. This can be handled using responsive design techniques, however. (YES!)
Modern technologies are much better for creating responsive experiences. For example, responsive images/media technologies now allow appropriate media to be served to different devices without having to rely on techniques like server-side sniffing.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
What does CSS stand for?
CSS stands for Cascading Style Sheets, and that first word cascading is incredibly important to understand — the way that the cascade behaves is key to understanding CSS.
Conflicts of CSS article: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
What is inheritance in CSS?
The significant here is the concept of inheritance, which means that some CSS properties by default inherit values set on the current element’s parent element and some don’t. This can also cause some behavior that you might not expect.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
What is a CSS pseudo-element?
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Syntax:
selector::pseudo-element {
property: value;
}
CSS
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
What is a CSS pseudo-class?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
What is a CSS transition property?
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Constituent properties
This property is a shorthand for the following
CSS properties:
transition-behavior Experimental
transition-delay
transition-duration
transition-property
transition-timing-function
SYNTAX
/* Apply to 1 property /
/ property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* property name | duration | behavior */
transition: display 4s allow-discrete;
/* Apply to 2 properties */
transition:
margin-right 4s,
color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;
/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;
What is Typography in CSS?
Overview: Styling text
In this article we’ll start you on your journey towards mastering text styling with CSS. Here we’ll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
Prerequisites: HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS).
Objective: To learn the fundamental properties and techniques needed to style text on web pages.
What is involved in styling text in CSS?
Text inside an element is laid out inside the element’s content box. It starts at the top left of the content area (or the top right, in the case of RTL language content), and flows towards the end of the line. Once it reaches the end, it goes down to the next line and flows to the end again. This pattern repeats until all the content has been placed in the box. Text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br></br> element.
Note: If the above paragraph leaves you feeling confused, then no matter — go back and review our Box model article to brush up on the box model theory before carrying on.
The CSS properties used to style text generally fall into two categories, which we’ll look at separately in this article:
Font styles: Properties that affect a text’s font, e.g., which font gets applied, its size, and whether it’s bold, italic, etc.
Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
What is CSS custom properties (variables) used for?
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the @property at-rule or by custom property syntax (e.g., –primary-color: blue;). Custom properties are accessed using the CSS var() function (e.g., color: var(–primary-color);).
Complex websites have very large amounts of CSS, and this often results in a lot of repeated CSS values. For example, it’s common to see the same color used in hundreds of different places in stylesheets. Changing a color that’s been duplicated in many places requires a search and replace across all rules and CSS files. Custom properties allow a value to be defined in one place, then referenced in multiple other places so that it’s easier to work with. Another benefit is readability and semantics. For example, –main-text-color is easier to understand than the hexadecimal color #00ff00, especially if the color is used in different contexts.
Custom properties defined using two dashes (–) are subject to the cascade and inherit their value from their parent. The @property at-rule allows more control over the custom property and lets you specify whether it inherits its value from a parent, what the initial value is, and the type constraints that should apply.
How do I create fancy boxes in CSS?
CSS boxes are the building blocks of any web page styled with CSS. Making them nice looking is both fun and challenging. It’s fun because it’s all about turning a design idea into working code; it’s challenging because of the constraints of CSS. Let’s do some fancy boxes.
Before we start getting into the practical side of it, make sure you are familiar with the CSS box model. It’s also a good idea, but not a prerequisite, to be familiar with some CSS layout basics.
On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the techniques it’s also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/create_fancy_boxes
HTML
<div>Hi! I want to be fancy.</div>
Ok, that’s a very small bit of HTML, what can we tweak on that element? All the following:
Its box model properties: width, height, padding, border, etc.
Its background properties: background, background-color, background-image, background-position, background-size, etc.
Its pseudo-element: ::before and ::after
and some aside properties like: box-shadow, rotate, outline, etc.
So we have a very large playground. Let the fun begin.
In CSS. what is a Combinators?
Overview: Building blocks
The final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
Prerequisites: Basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective: To learn about the different combinator selectors that can be used in CSS.
Descendant combinator
The descendant combinator — typically represented by a single space (“ “) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
What is a website wireframe?
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.[1]: 166 The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume.[2] Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually driven by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.[3]: 131 The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.[1]: 167 In other words, it focuses on what a screen does, not what it looks like.[1]: 168 Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.
Wireframes focus on:
The range of functions available
The relative priorities of the information and functions
The rules for displaying certain kinds of information
The effect of different scenarios on the display[1]: 169
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.[3]: 131 Wireframes help establish functionality and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”[1]: 167 Within the process of building a website, wireframing is where thinking becomes tangible.[4]: 186
Wireframes are also utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.[2]
https://en.wikipedia.org/wiki/Website_wireframe
Does JavaScript go from left to right or top to bottom?
Top to bottom
What is a statement?
An action to be carried out
What is a string in JavaScript?
It is a sequence of characters
What does ;; do in JavaScript?
Loops forever since it’s conditions are empty
Does return work in both a loop and a function?
No, “return” only works inside a function
Does “break” and “continue” work inside a loop and a function?
No, “break” and “continue” only work inside a loop
