Bootstrap Week 1 Vocabulary

Question 1

In Bootstrap (as in HTML and CSS) there are many utilities to help you with aligning images, text, columns, and other content.

In this week, you will learn about the align-items-* classes and the text-* classes for alignment.

Answer 1

Alignment

Question 2

The front end is synonymous with client-side or browser-side in web development.

Before online, networked computing, computers only ran self-contained software that was entirely in one location - the computer itself, or a disk connected to the computer. While some software does still run in this way, websites and web applications consist of code that’s run on both a client (such as a web browser, but could also be a desktop or mobile application) and on a server, with the two sides communicating with each other over a network and passing data back and forth to co-create the functionality of the website or web app.

The part of the code that’s on the server side is primarily concerned with data storage and management, as well processes such as user authentication and handling API calls. In the three-tier architecture model, the data tier and the business logic tier typically make up the back end.

Answer 2

Back End

Question 3

Bootstrap is a framework built on mobile-first, responsive design principles. In other words, Bootstrap helps designers build websites with mobile and tablet devices as their initial and target audiences.

Answer 3

Bootstrap

Question 4

Breakpoints are viewport widths that are set using CSS3 media queries in order to apply different CSS rules at varying viewport sizes. The concept and use of breakpoints is a major part of responsive web design.

Bootstrap 4 uses these breakpoints:

Size	  Viewport Width 
XS 	 < 576px 
SM	 ≥ 576px
MD	 ≥ 768px
LG	  ≥ 992px
XL	  ≥ 1200px

Answer 4

Breakpoints

Question 5

CodePen is a socially-based web development environment that allows developers of all levels to write code and see their results within their web browser, all in real-time. CodePen focuses on front-end web languages and tools such as HTML, CSS and Javascript.

Answer 5

CodePen

Question 6

A CLI, or command line interface, also known as a shell or a shell terminal.

There are many different shell applications. In MacOS, you will typically use the Terminal application. In Windows, two built-in options are Command Prompt and Powershell. If you have installed Git in Windows, you will also typically also have access to a shell called Git Bash.

Answer 6

Command Line Interface

Question 7

CSS, or Cascading Style Sheets, is a language use to style the HTML content on a web page, such as modifying colors, font types, font sizes, shadows, images, element positioning and more!!

Answer 7

CSS or Cascading Stylesheet

Question 8

A framework is similar to a library in that it is a compilation of reuseable code. Where the similarity ends is that a framework will also provide the skeletal structure for the web app, and by using it, you typically need to follow its pre-determined structure. This is a concept called inversion of control – a framework takes control of the architecture of a website or web application, whereas when a programmer is using a library, they retain control over where and how the library is used.

Answer 8

Framework

Question 9

The front end is synonymous with client-side or browser-side in web development.

Before online, networked computing, computers only ran self-contained software that was entirely in one location - the computer itself, or a disk connected to the computer. While some software does still run in this way, websites and web applications consist of code that’s run on both a client (such as a web browser, but could also be a desktop or mobile application) and on a server, with the two sides communicating with each other over a network and passing data back and forth to co-create the functionality of the website or web app. The part of the code that’s on the client side is primarily concerned with the user interface (UI) and with presenting data to, and retrieving data from, the user. In the three-tier architecture model, the presentation tier is the front end.

Answer 9

Front End

Question 10

Git is the industry standard version tracking software that is used by software development teams and individuals worldwide to keep track of and integrate changes.

Answer 10

Git

Question 11

GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 40 million developers.

Answer 11

Github

Question 12

The Bootstrap Grid system is composed of a series of divs with Bootstrap classes applied to them to create a responsive layout method. They make heavy use of the CSS Flexbox layout method and media queries/breakpoints, which are all part of CSS3.

All Bootstrap grids are created with div elements with specific Bootstrap classes applied to them. They will always use these classes: one of two container classes (container and container-fluid), the row class, and the responsive column classes (col-*). The column classes can be further specified to explicitly give a column span to any column (out of 12 potential columns per row) as well as breakpoints that specify the viewport sizes to which a column class applies (ex.: col-sm-4 will cause a column to span a third of a row (4 out of 12) for viewport sizes small AND UP).

The Bootstrap Grid system should not be confused with the similarly named CSS Grid. Bootstrap Grid and CSS Grid are two different concepts.

Answer 12

Grid

Question 13

Homebrew is a package manager for MacOS.

Answer 13

Homebrew

Question 14

The jumbotron component in Bootstrap is utilized by adding the jumbotron class to an appropriate element such as div or header or section.

It is a “lightweight, flexible component for showcasing hero unit style content.”

Answer 14

Jumbotron

Question 15

A library is a collection of reusable code that can be imported into a project and used where needed. The word library is often used interchangeably with the word framework in software development, but they are not the same – a framework typically provides much more structure for the architecture of the project than a library and is more opinionated about how the project should work.

Answer 15

Library

Question 16

Bootstrap has a built-in class called list-unstyled that will remove the automatic styles from an HTML list made with <ol> or </ol><ul>. For example, when used with a <ul> tag like <ul class="list-unstyled">, it will remove the bullet points from the listitems inside the <ul>.</ul></ul></ul></ul>

Answer 16

list-unstyled

Question 17

Media Queries are a new feature in CSS3. The viewport meta tag in HTML5 must be used in order to allow CSS media queries to work. Bootstrap makes heavy use of media queries.

Here is an example of a media query from the Bootstrap.css file:

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

The @media begins the media query. It looks for a min-width of 1200px for the viewport, then applies the styles inside the { } block if that condition is true. This use of a media query is called setting a breakpoint - 1200px is the breakpoint at which the inner styles are applied.

The min-width value is most often used for creating breakpoints for mobile-first design. Along with min-width, there are many other values that are possible for a media query to check, such as max-width and resolution

Answer 17

Media Queries

Question 18

Mobile-first development emphasizes optimizing websites and applications for use on mobile devices first, then optimizing for desktop and other uses second.

Answer 18

Mobile-First

Question 19

The Navbar feature puts a Navigation header at the top of the page. You can make it extend or collapse depending on the screen size. A standard navigation bar is created with

Answer 19

Navbar

Question 20

Node.js is an asynchronous, event-driven runtime environment for JavaScript based on Chrome V8 engine technology that allows JavaScript to run on a computer/server outside of a browser. It is instrumental in providing a way to use JavaScript across the entire web stack and is quickly gaining in popularity.

Answer 20

Node.js

Question 21

NPM stands for Node Package Manager and is the foremost package manager for web development and the world’s largest software registry for both public, open-source software and private software. The open source community uses NPM to share packages of source code, and private companies also use NPM for managing code privately.

Answer 21

NPM

Question 22

Bootstrap offers a set of offset-* classes that can be used to offset columns to the right in a responsive way.

Answer 22

offset-*

Question 23

Bootstrap offers a set of order-* classes to change the order of columns in a responsive way.

Answer 23

order-*

Question 24

Responsive Web Design means web design that adapts to different viewports and changes the website display to be optimized for the current viewport. This is primarily accomplished by use of the meta viewport tag that was added to the HTML specification in HTML5, along with media queries which allow the creation of breakpoints at certain viewport sizes and different CSS rules to be applied at different viewpoints.

Answer 24

Responsive Web Design

Question 25

Software documentation is written text or illustration that accompanies computer software or is embedded in the source code. The documentation either explains how the software operates or how to use it, and may mean different things to people in different roles.

Answer 25

Software Documentation

Question 26

A viewport is the portion of a website or application’s UI that is viewable by the user. It is sized in CSS pixels (also known as software pixels), versus hardware pixels. Screen resolutions are usually expressed as hardware pixels plus a PPI (pixels per inch), also known as pixel density. Pixel density can differ greatly among devices, so hardware pixels cannot be used to consistently describe viewport sizes. CSS pixels are calculated for consistency and used in giving the measurements for viewports. The meta viewport attribute, new in HTML5, allows the browser to access the viewport of the device and thereby enable the use of media queries and other means of creating responsive websites.

Note: The viewport is not the same as the screen resolution converted to CSS pixels (although it can be, such as on smartphones and with desktop/laptop browsers set to fullscreen mode). For example, on a desktop/laptop web browser not in fullscreen mode, the viewport is the size in CSS pixels of the browser window minus the size of the scrollbars, the address bar, the tabs across the top, the bookmarks bar, the downloads bar, and such.

Answer 26

Viewport