Through using FreeCodeCamp to learn about Responsive Web Design, I've found myself having to look up some concepts repeatedly, or only finding the answer after a substantial search. This is meant to be a collection of "how to's" that I would normally not write, but it serves as an easy source of content to fulfill this challenge, and will hopefully be a great shorthand reference for both myself and you, weary boostrap-pulling camper!

Units of Length (px, %, ...) must be used for every specified amount unless the value is 0.

Clockwise notation is usable for both padding and margin properties: [top → left]. If values are left unfilled, the opposite side is completed by the browser

padding: 0; No padding on any side

margin: 10px 0 2px; Margin is set to 10px on top, 2px on the bottom, and 0px on the left and right

The width and height of blocks must be set either automatically based on contents (default), e.g.: width: auto; or given in units of length (the padding, margin, border, too)

Acceptable units of length:

• px: pixels
• %: % of parent element
• em: font-size of element
• rem: font-size of root element in the DOM
• vw: 1% of viewport width
• vh: 1% of viewport height

It's all about the overflow property on an element. overflow: scroll; leads to both x & y scrollers, but overflow: auto; lets the browser decide, so there is usually just a y-scrollbar for text. You could also specify overflow-x or overflow-y properties.

There is also the question of where the scrollbar gets placed. Apparently IE (yuck!) puts them inside the element, thus not changing the space the element takes on the screen. However, Firefox and (apparently) Chrome put them outside. Given the market share of these two browsers, it's not a bad idea to code for them. This documentation page you are reading now sets the width of the navmenu at the top of the page on mobile/iPad viewports (<815px) at width: 98vw; to accomodate the space required by the scrollbar.

display: flex; turns an element into a block-level flex container. The flex-flow property is shorthand for the flex-direction and flex-wrap properties. For example:

All the flexbox's children should have a flex shorthand property defined. The three values are flex-grow flex-shrink flex-basis, as in the following code:

Alignment within a flexbox is set via justify-content(singular) or align-items(plural). Useful values are: center|flex-start|flex-end|stretch (stretch is default).You can center an icon or text within an element based off this example:

The CSS Grid divides the viewport into different zones based on a row-and-column model. These zones can be defined using grid-template-columns and grid-template-rows properties. You have two ways of addressing these zones:

1. You can use the grid-column and grid-row properties to define the lines (inclusive of the edges [1, #rows|#cols+1]) between which you want to draw a grid element. For example, the following creates a small grid item in the upper 1/9th, and another 4 times the size in the lower right corner:
   .grid-container{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 8px 16px;/*row, then column gap*/
}

.grid-item1{
  grid-column: 1/2;
  grid-row: 1/2;
}

.grid-item2{
  grid-column: 2/4;
  grid-row: 2/4;
}

2. You can use grid-template-areas to name those zones via a template and then use the grid-area property to address them. For example:
   .grid-container{
  display: grid;
  grid-template-areas:
  "sidebar nav"
  "sidebar main";
}

.sidebar{ grid-area: sidebar; }

nav { grid-area: nav; }

main { grid-area: main;}


You can set up recurring dynamic grid layouts using repeat() and minmax() functions in combination with autofill and autofit parameters (not covered here). Sara Soueidan's explanation of the difference between auto-fill and auto-fit ends with two strong video examples and explanation (Scroll to the last two videos above the anchor to which this links)

Since writing "#ef45da" for a color or "300px" for an offset can get repetitive, and more importantly, can cause errors. In this document, for example, at viewports bigger than a tablet, the left-sided navbar is 300px wide, requiring the main section to have an identical margin-left of 300 px.

Variables are what the people need for code legibility and maintainability in this instance. Technically, they are called CSS custom properties, and are declared with the "--" prefix, e.g.: --variable-name. You can access the variable's value with the "var()" function, as in: var(--variable-name).

Declaring it on the :root pseudo-class allows all elements to access it. Unfortunately, you can't use them in @media queries, because they aren't children of the root element, and thus don't inherit the value of the variable. This example code from this page should help make this more concrete:

Here's the syntax for different CSS selectors:

A more complete list from W3Schools.

In the CSS, you have to declare the a:active pseudo-class after the a:hover one. So, just remember this mnemonic:

"LuV HA" (love her) = :link, :visited, :hover, :active .

Give the <nav> a fixed position (in this example, at the top of the screen)

In addition, you have to offset all the targets of the navigation links so they don't get covered by the navbar height (49px in this example). Note: you may need to fiddle with the margin to get the elements to line up well. The solution uses the pseudoelement ::before to avoid excessive padding that can rise up to hundreds of pixels. This example only works if all the backgrounds around the target are the same.

The following method works even if the targeted elements have different backgrounds.

Code Credit & Other Solutions: Nicholas Gallagher

The virtual viewport isn't always what the device's hardware pixel width is. You can force mobile devices to actually use the mobile design of your website instead of their default virtual viewport by adding the following to to your <head> element:

(on Codepen, [Settings→HTML Tab→Stuff for <head>])

Bootstrap Users:

I started using Bootstrap at first to accomplish the Web Design Projects before I switched to FreeCodeCamp's Beta (which had way more lesson material on responsive design). I wrote a tool that tells you which Bootstrap breakpoint your device is actually displaying: Displayed Pixel Width Tool.

How to make an image responsive (Code credit: FreeCodeCamp Beta)

How to make an embedded Youtube video responsive (Code credit: John Surdakowski)

I have found two ways to include icons and other symbols:

1. Font Awesome (CDN Method):

   The html that inserts the icon depends on the specific icon (go to the Font Awesome page to find it). It gets inserted as a typographic offset ( <i>). For example, for the dollar bill I used in my product landing page:

   <i class="far fa-money-bill-alt"></i>

   The class "fa*": b = brand, /s|""/ = solid, r = regular, l = light

   You must sign up for a free account that gets you access to a hashcode-indexed js file on a CDN. After that, include the following code in your <head>element

   <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous" ></script>

   (on Codepen, [Settings→HTML Tab→Stuff for <head>])

2. HTML Elements:

   HTML elements and symbols can be inserted as text.