Common Responsive Layouts with CSS Grid

HOLY GRAIL LAY-OUT

body { font-family: arial; }

.container { display: flex; flex-direction: column; min-height: 100vh; }

@media (min-width: 768px) { .container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto;

} }

header { grid-column: span 3; padding: 30px; text-align: center; font-size: 1.4em; background-color: #369; color: white; }

main { flex: 1; padding: 20px; }

nav { background-color: #f90; padding: 20px; }

aside { padding: 20px; background-color: #936; }

footer { grid-column: span 3; padding: 30px; text-align: center; font-size: 1.4em; background-color: #690; color: white; }

h1 { margin-bottom: 1em; font-size: 1.3em; font-weight: bold; }

REGEX

Regular expressions (regex or regexp) are extremely useful in extracting information from any text by searching for one or more matches of a specific search pattern (i.e. a specific sequence of ASCII or unicode characters).

One of the most interesting features is that once you’ve learned the syntax, you can actually use this tool in (almost) all programming languages ​​(JavaScript, Java, VB, C #, C / C++, Python, Perl, Ruby, Delphi, R, Tcl, and many others)

cheat sheet

Anchors — ^ and $ ^The matches any string that starts with The end$ matches a string that ends with end ^The end$ exact string match (starts and ends with The end) roar matches any string that has the text roar in it

Quantifiers — * + ? and {} abc* matches a string that has ab followed by zero or more c abc+ matches a string that has ab followed by one or more c abc? matches a string that has ab followed by zero or one c abc{2} matches a string that has ab followed by 2 c abc{2,} matches a string that has ab followed by 2 or more c abc{2,5} matches a string that has ab followed by 2 up to 5 c a(bc)* matches a string that has a followed by zero or more copies of the sequence bc a(bc){2,5} matches a string that has a followed by 2 up to 5 copies of the sequence bc

OR operator — | or [] a(b|c) matches a string that has a followed by b or c a[bc] same as previous

Character classes — \d \w \s and . \d matches a single character that is a digit \w matches a word character (alphanumeric character plus underscore) \s matches a whitespace character (includes tabs and line breaks) . matches any character

Bracket expressions — [] [abc] matches a string that has either an a or a b or a c -> is the same as a|b|c -> Try it! [a-c] same as previous [a-fA-F0-9] a string that represents a single hexadecimal digit, case insensitively -> Try it! [0-9]% a string that has a character from 0 to 9 before a % sign [^a-zA-Z] a string that has not a letter from a to z or from A to Z. In this case the ^ is used as negation of the expression