301-session-04.md

Responsive Web Design and Regular Expressions

Resources:

• A Complete Guide to Grid

  • https://css-tricks.com/snippets/css/complete-guide-grid/
  • https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df
  • https://abookapart.com/products/get-ready-for-css-grid-layout
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://cssgridgarden.com/

• Regex

  • https://levelup.gitconnected.com/wtf-is-regex-really-4dd563ee5ce0
  • https://regex101.com/
  • https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285
  • https://www.computerhope.com/jargon/r/regex.htm - CHEAT SHEET !!!

Grid CSS

CSS Grid Layout is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

Terminology

1. Grid Container

   • The element on which display: grid is applied. It’s the direct parent of all the grid items.

2. Grid Item

   • The children of the grid container.

3. Grid Line

   • The dividing lines that make up the structure of the grid. They can be vertical or horizontal.

4. Grid Cell

   • The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid.

5. Grid Track

   • The space between two adjacent grid lines.

Regex

A regular expression - shortened as regex or regexp; also referred to as rational expression is a sequence of characters that define a search pattern. Usually such patterns are used by string-searching algorithms for "find" or "find and replace" operations on strings, or for input validation.

RegEx allows us to check for patterns in text strings such as trying to match a valid email address or password. One of the great superpowers of RegEx is being able to define your own search criteria for a pattern to fit your needs, and it is like a language of its own.

Back to ReadMe