\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{raposinha}
\pdfinfo{
  /Title (html-css.pdf)
  /Creator (Cheatography)
  /Author (raposinha)
  /Subject (HTML+CSS Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{947B63}
\definecolor{LightBackground}{HTML}{F8F6F5}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{HTML+CSS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{raposinha} via \textcolor{DarkBackground}{\uline{cheatography.com/197915/cs/42020/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}raposinha \\
  \uline{cheatography.com/raposinha} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 12th May, 2024.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}div\textgreater{}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}section\textgreater{}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}a\textgreater{}} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}link rel="" href=""\textgreater{}} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.48 cm} x{5.52 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Positioning elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{position attribute}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
position: static & The default, their normal position. (inline, block...) \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
position: relative & Position relative to itself. It only affects selected element so it will not affect others. \tn 
% Row Count 7 (+ 4)
% Row 3
\SetRowColor{white}
 & Can be used alongside 'left', 'right','top','bottom' to move in the opposite position \tn 
% Row Count 11 (+ 4)
% Row 4
\SetRowColor{LightBackground}
 & Can be used alongside 'z-index','x-index' to move alongside the x or y axis, 0 by default, like 3D maps. \tn 
% Row Count 15 (+ 4)
% Row 5
\SetRowColor{white}
position: absolute & Position relative to its container, so its movement will affect other elements because it stops belonging to the same plane as the others, like a layer. The container's position must be relative. \tn 
% Row Count 23 (+ 8)
% Row 6
\SetRowColor{LightBackground}
position: fixed & It always stays the same place, because its position is relative to the viewport. \tn 
% Row Count 26 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Floating elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Block elements take up the whole block, line elements take up the line. We can line elements up with properties like {\bf{float}}.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
float: (left/right) & The element with this property will float on that direction inside the container, and their siblings will float around it. \tn 
% Row Count 10 (+ 7)
% Row 2
\SetRowColor{LightBackground}
clear: (left/right/both) & Stops the element from floating around the element who has the float property on. \tn 
% Row Count 15 (+ 5)
% Row 3
\SetRowColor{white}
.container::after\{ content: ''; display: block, clear: both \} & Containers don't detect floating elements, so if other content is removed they will {\bf{collapse}} and the floating element will overflow. \tn 
% Row Count 22 (+ 7)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{overflow: auto;} \tn 
% Row Count 23 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{FlexBox (Flexible box layout)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{A layout method for laying out elements in one dimension, row or column} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
display: flex; & Activates this layout method. Used in container element. \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
flex-direction: row; & The default, lines elements out horizontally. \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
flex-direction: column; & Vertically. \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{flex-direction: column-reverse;;} \tn 
% Row Count 11 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{flex-direction: row-reverse;} \tn 
% Row Count 12 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Aligning items}}} \tn 
% Row Count 13 (+ 1)
% Row 7
\SetRowColor{white}
row & Align across main axis (horizontal) \tn 
% Row Count 15 (+ 2)
% Row 8
\SetRowColor{LightBackground}
justify-content \seqsplit{(flex-start(default)/flex-end/center/space-evenly/space-around/space-between)} & main axis \tn 
% Row Count 20 (+ 5)
% Row 9
\SetRowColor{white}
column & Align across cross axis (vertical) \tn 
% Row Count 22 (+ 2)
% Row 10
\SetRowColor{LightBackground}
align-items \seqsplit{(flex-start(default)/flex-end/center/)} & cross axis \tn 
% Row Count 25 (+ 3)
% Row 11
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Flex containers want to fit the same amount of children in the same line.} \tn 
% Row Count 27 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\seqsplit{flex-wrap(no-wrap(default)/wrap)} & when there's no more container width available, items make themselves smaller to fit in the same line/items jump to the next line. \tn 
% Row Count 34 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{FlexBox (Flexible box layout) (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{align-content ()} \tn 
% Row Count 1 (+ 1)
% Row 14
\SetRowColor{white}
\seqsplit{align-self(flex-start/flex-end)} & Use on the child element, overrides other container porperties directed to child \tn 
% Row Count 5 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Grid}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Grids are useful for distributing elements in rows and columns at the same time.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Under Inspect, if we click the tag 'grid' next to the element we can visualize the grid's size and distribution} \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
Display: grid & Define a grid in the container \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{grid-template-columns:} 100px 100px; & Define 2 columns \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
grid-template-rows: 100px 100px 100px; & Define  3 rows \tn 
% Row Count 11 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{grid-template-rows: repeat(3, 100px);} \tn 
% Row Count 12 (+ 1)
% Row 6
\SetRowColor{LightBackground}
grid-template: repeat(3, 100px) / repeat(2, 100px) & Define 2 columns and 3 rows \tn 
% Row Count 15 (+ 3)
% Row 7
\SetRowColor{white}
Center grids and its' content (default is stretch) & justify-items: center; align-items: center; justify-content: center; align-content: center; \tn 
% Row Count 20 (+ 5)
% Row 8
\SetRowColor{LightBackground}
Stretch to fit size & (DEFAULT) \tn 
% Row Count 21 (+ 1)
% Row 9
\SetRowColor{white}
grid-template: repeat(3, 100px) / 30\% 70\% & Define two columns, each occupying x\% of the available space \tn 
% Row Count 24 (+ 3)
% Row 10
\SetRowColor{LightBackground}
grid-template: repeat 100px auto 100px/ 30fr 70fr & Define two columns,  each occupying the respective fraction of the available space. The row in the middle will decrease and increase with the screen, top and bottom will stay fixed \tn 
% Row Count 33 (+ 9)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Grid (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Defining gaps} \tn 
% Row Count 1 (+ 1)
% Row 12
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{row-gap} \tn 
% Row Count 2 (+ 1)
% Row 13
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{column-gap} \tn 
% Row Count 3 (+ 1)
% Row 14
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{gap} \tn 
% Row Count 4 (+ 1)
% Row 15
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Placing items} \tn 
% Row Count 5 (+ 1)
% Row 16
\SetRowColor{white}
grid-row & (n)moves item to n row, (n/x) item starts from n and finishes in x row (see grid tag) \tn 
% Row Count 10 (+ 5)
% Row 17
\SetRowColor{LightBackground}
grid-column(n, n/x) & (n) moves item to n column, (n/x) item starts from n and finishes in x line (see grid tag) \tn 
% Row Count 15 (+ 5)
% Row 18
\SetRowColor{white}
grid-area (n/x/y/z) & The first two n represent the start (row,column), the last two the item numbers (start, end) \tn 
% Row Count 20 (+ 5)
% Row 19
\SetRowColor{LightBackground}
\seqsplit{grid-template-areas(""} "") & Set up the grid to host a  grid template, the properties are written like classes: two headers: "header header", The second quotes are used for rows:"row1 row2" \tn 
% Row Count 28 (+ 8)
% Row 20
\SetRowColor{white}
grid-area & Reference the properties mentioned in last one \tn 
% Row Count 31 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{6 cm} p{2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Object Oriented CSS}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{- Separate the content from the container} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Make a style just for the button class so it applies to all buttons, not just the ones inside .container:} \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
.container .btn \{\} & .btn\{\} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{- Separate structure from skin} \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Make classes that purely define the structure or logic (a button having rounded edges, a specific font, no border) and clases for 'skin' (such as a button's color, size...)} \tn 
% Row Count 10 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Variables or custom properties}}  \tn
% Row 0
\SetRowColor{LightBackground}
:root & This is a pseudo-class selector. We can use it to define custom properties or global variables. \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\{    -{}-color-primary: red; \} & This is a variable set on :root. \tn 
% Row Count 7 (+ 2)
% Row 2
\SetRowColor{LightBackground}
.mainText \{ background: var(-{}-color-primary);\} & This is a variable applied inside of a selector. \tn 
% Row Count 10 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Best practices}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{- Follow a naming convention: kebab case(.kebab-case), camel case (camelCase), pascal case (PascalCase), underscore (under\_score).} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{- Create logical sections on your stylesheet: big projects will need different stylesheets for each logical case which are then combined in a main one. Even in one stylesheet try to differentiate different concerns, such as basic styles, typography, forms, navBar, etc.} \tn 
% Row Count 9 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{- Avoid over-specific selectors: avoid direct children, element names, repeating the same name class over the document (specify, such as 'nav-item').} \tn 
% Row Count 12 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{- Avoid !important.} \tn 
% Row Count 13 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{- Sort CSS properties:  to automatically sort CSS properties type \textgreater{}sort in the command line up top.} \tn 
% Row Count 15 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{- Take advantage of style inheritance: to get the same font style in a link and a list, for example, give the font to the parent element.} \tn 
% Row Count 18 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{- Extract repetitive patterns.} \tn 
% Row Count 19 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{- Avoid repetitive values in your code.} \tn 
% Row Count 20 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\emph{ Selection\textgreater{} Add cursor below will show you how to edit multiple lines at the same time. \newline }} To address children of a same class use .mom .kid\{\} \newline * To automaticam}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Reusable animations}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}div class="animation-pop"} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{animate.style lets you use pre-made animations} \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Animations pt. II}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Animations can be more intricate than what we've seen so far.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
@keyframes animationName\{\} & We specify what happens in each keyframe. This property is divided in other small properties. \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{.. 0\% \{ transform: scale(1);\} ...} \tn 
% Row Count 8 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{.. 50\% \{ transform: scale(5);\} ...} \tn 
% Row Count 9 (+ 1)
% Row 4
\SetRowColor{LightBackground}
To call this animation, in the element we want using it, we declare: & .box3\{ animation-name: animationName; animation-duration: 5s;\} \tn 
% Row Count 13 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Other properties include} \tn 
% Row Count 14 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{animation-delay: 1s;} \tn 
% Row Count 15 (+ 1)
% Row 7
\SetRowColor{white}
\seqsplit{animation-iteration-count:} infinite; & The amount of times you want to repeat this animation. Use 0-9 and infinite for a loop. \tn 
% Row Count 20 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{animation-timing-function:} ease-in; & The timing functions to use, like in transform, you can make it start slow and continue at normal speed (ease-in), etc. \tn 
% Row Count 26 (+ 6)
% Row 9
\SetRowColor{white}
\seqsplit{animation-direction:} alternate; & Determines if you want to start the animation from start to end, from end to start or to alternate from start to end and from end to start. \tn 
% Row Count 33 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Animations: Transitions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{//For animations to appear smooth between one step and the next we can use transitions. \newline  \newline Properties to use: linear, ease-in (starts slow, continues as expected), ease-out (starts as expected, ends slow), cubic-bezier(.29,.13,.29,.8) (you determine the speed of the transform) \newline  \newline .box-2 \{ \newline     width: 100px; \newline     height: 100px; \newline     background: red; \newline     margin: 3rem; \newline     {\bf{transition: transform 0.5s ease-in-out 0.3, background 1s;}} \newline \} \newline  \newline .box:hover \{ \newline     transform: rotate(-15deg); \newline     transform: scale(1.5); \newline     transform: skew(15deg); \newline     transform: translate(10px, 50px); \newline     transform: rotate(30deg) scale(2); \newline     background: brown; \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cubic-bezier.com lets you manually pick the kind of bezier curve animation to use with its inputs \newline  \newline The next numeric value input is for animation delay, it takes 0.3 seconds to start after hovering it. \newline  \newline You can use more properties than transform to animate, you can also use background which will shift the background color}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Animations: 3D transformations}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The difference with 2d animations is that not just vertical and horizontal axis are included, but X and Y, which are able to position the element 'closer' or 'further away'.. To use 3d in animations transform() is included. The rotation origin is the center of the element in a X or Y axis point of view, like a matrix.} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
 & transform: perspective(200px) rotateY(50deg); \tn 
% Row Count 10 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The position where its transformed from can be changed from the center to others with transform-origin, and it uses X and Y.} \tn 
% Row Count 13 (+ 3)
% Row 3
\SetRowColor{white}
0 0 on transform-origin sets the center on the top left corner. & transform-origin: 0 0; \tn 
% Row Count 17 (+ 4)
% Row 4
\SetRowColor{LightBackground}
This transformation starts from the left and the middle & transform-origin: 0 50\%; \tn 
% Row Count 20 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{If many elements are to share an animation, they have to use the same class for transform(). This is easily done setting a container class.} \tn 
% Row Count 23 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Animations: 2d transformations}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & The transform property is used for these animations. They can be used on pseudo-properties like :hover or alone. \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{transform: rotate(-15deg);} \tn 
% Row Count 7 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{transform: scale(1.5);} \tn 
% Row Count 8 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{transform: skew(15deg);} \tn 
% Row Count 9 (+ 1)
% Row 4
\SetRowColor{LightBackground}
transform: translate(10px, 50px); & Moves an element to a specific position. Better than absolute positioning. \tn 
% Row Count 13 (+ 4)
% Row 5
\SetRowColor{white}
To use more than one transformation: & transform: rotate(30deg) scale(2); \tn 
% Row Count 15 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The order in which they're called matters, it will rotate first and scale second.} \tn 
% Row Count 17 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{The BOX model}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1704994242_boxmodel2.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{The numbers indicate the amount of space reserved for them. In here, content takes up 519pxx91px and there's a top and bottom margin of 16.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{The BOX model}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{This model refers to an element being put inside an invisible box when the DOM document is rendered.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{At the core of the box there's the content area where content is displayed.} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Box: \textless{}p\textgreater{} & Content area: text blah blah \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Outside of the {\bf{content area}} we have the {\bf{padding area}} used to add some space outside of the content area.} \tn 
% Row Count 8 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Next we have the {\bf{border area}}} \tn 
% Row Count 9 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{On top we have the {\bf{margin area}} used to create some space between elements, other boxes.} \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{For CSS, the rules are applied with {\bf{trouble}}: top, right, bottom, left.} \tn 
% Row Count 13 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{p \{ padding: 10px 20px 10 px 20px;\}} \tn 
% Row Count 14 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{10px 20px} \tn 
% Row Count 15 (+ 1)
% Row 9
\SetRowColor{white}
10px 20px 10px & 10px for top and bottom, 20 for right and left \tn 
% Row Count 17 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{If two elements are next to each others {\bf{their margins collpase}}, meaning they're combined and they share the same space.} \tn 
% Row Count 20 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.12 cm} x{4.88 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Sizing elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
width, height properties & they size the content area up or down \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
padding & it sizes up or down the padding \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
margin & it sizes up or down the margin \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
border (style, size color) & can size up the box if size is changed \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
box-sizing: content-box; & all box pieces add up to the size to the box but margin, which separates elements from others \tn 
% Row Count 12 (+ 4)
% Row 5
\SetRowColor{white}
box-sizing: border-box; & Adds everything up from the border so the total is 100px \tn 
% Row Count 15 (+ 3)
% Row 6
\SetRowColor{LightBackground}
 & We can use the universal ({\emph{) selector to apply the border-box property on all elements.  For pseudo-elements: ((}}::before, *::after...)) \tn 
% Row Count 21 (+ 6)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{width and height only apply to block level elements, which take up the whole horizontal space. If you add another element after a first one, it will start on the next block of space} \tn 
% Row Count 25 (+ 4)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Inline elements don't  respect width and height} \tn 
% Row Count 26 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Block elements use display: block; by default, inline display: inline;} \tn 
% Row Count 28 (+ 2)
% Row 10
\SetRowColor{LightBackground}
display: inline-block & They can use width, height and not start in a new line \tn 
% Row Count 31 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Overflow}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{When an element has a fixed size, content exceedind the designated space might happen. This is overflow.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{There are CSS properties  to control this:} \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
overflow: hidden; & hides the exceeding elements \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
overflow: scroll; & Gives you the option to scroll down to see the overflow content \tn 
% Row Count 9 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{overflow: auto;} \tn 
% Row Count 10 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{The overflow property actually has axis x and y, so you can combine these} \tn 
% Row Count 12 (+ 2)
% Row 6
\SetRowColor{LightBackground}
overflow: hidden scroll; & Hide the content on x axis and scroll on y \tn 
% Row Count 14 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Overflowing content}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1705501798_overflow.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} x{7.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Measurement units}}  \tn
% Row 0
\SetRowColor{LightBackground}
px & pixel size, absolute: it stays the same size regardless of device or screen size. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\% & size relative to the size of the container, it takes up x \% of the parent element's size. Browser's default is 100\% width and 0\% height (extends with content) \tn 
% Row Count 8 (+ 5)
% Row 2
\SetRowColor{LightBackground}
vw & size relative to viewport, it takes up the whole horitontal width space, regardless of content \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
vh & size relative to viewport, it takes up the whole vertical height space, regardless of content \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
em & size relative to the font size of parent (10em -\textgreater{} 10 times) \tn 
% Row Count 16 (+ 2)
% Row 5
\SetRowColor{white}
rem & size relative to the font size of the root element (16px by default). If we set html's font-size to 65,5\% it will be 10px. \tn 
% Row Count 20 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Images}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{There's two kind of images: {\bf{raster}}, made up by pixels, and {\bf{vectors}} made up by mathematical vectors. Raster images usually come from cameras or scanners. The more amount of pixels the bigger image file size, if smaller because they have less pixels, the blurrier they look. Vectors are software-made and look sharp at any size.} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{To check image compatibility, you can use caniuse.com} \tn 
% Row Count 9 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Another two types: content images and background images.} \tn 
% Row Count 11 (+ 2)
% Row 3
\SetRowColor{white}
background property & It's used to set a background color OR image, to use as image: background: url(/route) \tn 
% Row Count 16 (+ 5)
% Row 4
\SetRowColor{LightBackground}
background-repeat: & no repeat / repeat-x (alongside horizontal axis) / repeat-y \tn 
% Row Count 19 (+ 3)
% Row 5
\SetRowColor{white}
background-position & num num (right,down); By default backgrounds start from top left of the conmtainer element, we can move them around with this property \tn 
% Row Count 26 (+ 7)
% Row 6
\SetRowColor{LightBackground}
background-size & (right,down) or 100vh - remember that default height of elements is 0 before setting this! \tn 
% Row Count 31 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Images (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
\seqsplit{background-attachment} & fixed (background will not move even if you scroll and content does move) \tn 
% Row Count 4 (+ 4)
% Row 8
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{To check downloaded images by browser: Inspect, Network, Img. Many images will cause too many requests.} \tn 
% Row Count 7 (+ 3)
% Row 9
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{CSS Sprites can help lower the workload of user requests. \seqsplit{https://cssspritestool.com/} -\textgreater{} We can download, add the new image, copy the css rules and use only one image, likeso: span class="bg-dishes" (class prefix, image name for each). It's useful for small icons, not for all pictures because it will create a huge image file.} \tn 
% Row Count 14 (+ 7)
% Row 10
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Data URIs encode image files. They are protocoled in "data:(...)" form, which goes inside the 'src' tag. It loads faster but is heavier (on desktop).} \tn 
% Row Count 17 (+ 3)
% Row 11
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Clipping creates a path around an image and displays it in different shapes} \tn 
% Row Count 19 (+ 2)
% Row 12
\SetRowColor{white}
Filters change the look of image elements, can be combined with pseudo-selectors for a clean look & filter: \seqsplit{grayscale(70\%)/blur(10px)} \tn 
% Row Count 24 (+ 5)
% Row 13
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Supporting high-density screens (high res): Provide two files of the same image, one with x amount of pixels and another with twice the amount. Physical resolution and logical resolution are different, CSS uses logical. To use images with different DPR, we can export the same image into smaller sizes, depending on the sizes we want to use. Generally export at 7. Instead of using 'src' you can use 'scrset' for multiple sources.} \tn 
% Row Count 33 (+ 9)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Images (cont)}}  \tn
% Row 14
\SetRowColor{LightBackground}
\seqsplit{srcset="images/meal.jpg} 1x, images/meal@2x.jpg 2x" & Support multiple sources of the same image in different DPRs \tn 
% Row Count 3 (+ 3)
% Row 15
\SetRowColor{white}
Resolution switching to fetch one image or the other depending on width & \seqsplit{srcset="images/meal.jpg} 400w , images/meal@2x.jpg 800w" sizes=" (max-width: 500px) 100vw, (max-width: 500px) 50\%" \tn 
% Row Count 9 (+ 6)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\seqsplit{responsivebreakpoints.com} is useful to set different image resolutions for each breakpoint} \tn 
% Row Count 11 (+ 2)
% Row 17
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{To use lighter images, we can convert them to webp format. I might have to use 'picture' for better support with type as webp and jpg.} \tn 
% Row Count 14 (+ 3)
% Row 18
\SetRowColor{LightBackground}
To utilize art direction, for which shows different images on different display sizes. With this, different sources will be picked depending on each query & \textless{}picture\textgreater{}\textless{}source media="(max-width: 500px)" src="" \tn 
% Row Count 22 (+ 8)
% Row 19
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Icons} \tn 
% Row Count 23 (+ 1)
% Row 20
\SetRowColor{LightBackground}
fontawesome.com gives you free icons to use on your website & \textless{}i class="fa-solid fa-leaf fa-rotate-by" style="color: \#4b511f; -{}-fa-rotate-angle: 2deg; fa-2x""\textgreater{}\textless{}/i\textgreater{} \tn 
% Row Count 29 (+ 6)
% Row 21
\SetRowColor{white}
 & \textless{}span class="icon"\textgreater{}\textless{}i class="fa-solid fa-leaf"\textgreater{}\textless{}/i\textgreater{}\textless{}/span\textgreater{} \tn 
% Row Count 33 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.56 cm} x{5.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Hiding elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
display: none; & It hides the element as if it was never there. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
visibility: hidden; & Allocates space for hidden el \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Media queries}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Used to create responsive websites because they adapt to the device using it, not the other way around.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{On Chrome: View \textgreater{} Developer \textgreater{} Chrome DevTools \textgreater{} Toggle device ToolBar you can check the viewport size and how it looks in different screens} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
Breakpoint & When after changing sizes the screen looks bad. Use this as a basis, not popular device models. \tn 
% Row Count 11 (+ 5)
% Row 3
\SetRowColor{white}
@media & The type of media it will adress, used in breakpoints \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
@media screen & For web browsers \tn 
% Row Count 15 (+ 1)
% Row 5
\SetRowColor{white}
@media print & For printers. Useful to set font sizes to pt and cm for sizing. \tn 
% Row Count 18 (+ 3)
% Row 6
\SetRowColor{LightBackground}
@media screen and() & Create a condition \tn 
% Row Count 20 (+ 2)
% Row 7
\SetRowColor{white}
@media screen and(min-width: 600px) & If the condition is applied  (minimum size of screen is 600px) the rules will apply, otherwise they won't. Classes can be referenced to inside. \tn 
% Row Count 27 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.56 cm} x{5.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pseudo-class selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{.box:nth-of-type(x)} & Style the x occurrence with this class ('box') \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Font types}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1707762179_font-types.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.368 cm} x{3.116 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Typography}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{There's 3 fonts, serif, sans-serif and monospace} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{3}{x{8.4cm}}{Styling fonts} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{font-family} &  & Determines the font used by the element. \tn 
% Row Count 5 (+ 3)
% Row 3
\SetRowColor{white}
Font stacks & font-family: Arial, Helvetica, sans-serif; & Multiple fonts, if the first font is not available, the computer looks for the next in line. The third is a generic font, and will be one of the three: serif, sans-serif or monospace. \tn 
% Row Count 17 (+ 12)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{font-weight} & 100-900, bold(700),bolder,lighter,normal(400) & Determines the bolness of the font. \tn 
% Row Count 20 (+ 3)
% Row 5
\SetRowColor{white}
\seqsplit{font-style} & normal,italic,bold &  \tn 
% Row Count 22 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{font-size} & px,em,rem, & Determines the size of the font. \tn 
% Row Count 24 (+ 2)
% Row 7
\SetRowColor{white}
System font stack & Each computer will interpret the font differently depending on OS or version. To make sure the website is readable for the user, this approach is recommended. & font-family: (apple-system) \tn 
% Row Count 34 (+ 10)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.368 cm} x{3.116 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Typography (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{Sizing fonts} \tn 
% Row Count 1 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{3}{x{8.4cm}}{Pixels (px) will look different on different OS, browsers ... it's better to use relative units. It's 16px by default. 1 rem is equal to the default font (16px * 1rem = 16px), 62,5\% is equal to 10px. Be it px or relative units, always set the font size relative to the html element.} \tn 
% Row Count 7 (+ 6)
% Row 10
\SetRowColor{LightBackground}
\seqsplit{line-height} & on body will determine the default height between lines &  \tn 
% Row Count 11 (+ 4)
% Row 11
\SetRowColor{white}
\seqsplit{letter-spacing} & will separate letters from each other &  \tn 
% Row Count 14 (+ 3)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{word-spacing} \tn 
% Row Count 15 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Forms: file inputs}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1712057830_forms-file-inputs.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Forms: grouping related fields}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1712058498_forms-related-fields.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Forms: Radio buttons}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1711989567_forms-radio.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Forms: Checkboxes}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1711734264_forms-checkboxes.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Checkboxes also have default and disable options}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Drop-down lists}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1711732070_Design sans titre (2).png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Datalists}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1711564957_datalists.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Forms}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{To align fields, wrap label and input into a div} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
input{[}type='text'{]}, input{[}type='email'{]} \{ & Adding properties to different input types \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
input{[}type='text'{]}:focus, input{[}type='email'{]}:focus \{ & Adding properties to different input types at a given point (when the element is being focused on) \tn 
% Row Count 9 (+ 5)
% Row 3
\SetRowColor{white}
 & To remove the resize option from the textarea element: resize: none; \tn 
% Row Count 13 (+ 4)
% Row 4
\SetRowColor{LightBackground}
 & To remove the default ugly outline or border from selected inputs, use outline:none \tn 
% Row Count 18 (+ 5)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Attributes}}} \tn 
% Row Count 19 (+ 1)
% Row 6
\SetRowColor{LightBackground}
type & Determine what input type will be used, will have many different input options (text, email, number, password, date) \tn 
% Row Count 25 (+ 6)
% Row 7
\SetRowColor{white}
value & Automatically fills the given input with a set value \tn 
% Row Count 28 (+ 3)
% Row 8
\SetRowColor{LightBackground}
placeholder & Automatically fills the given input with a set value and disappears when typing on it \tn 
% Row Count 33 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
readonly value="" & Input can be selected but not modified \tn 
% Row Count 2 (+ 2)
% Row 10
\SetRowColor{white}
disabled & Input can't be selected or modified and won't be sent to the server \tn 
% Row Count 6 (+ 4)
% Row 11
\SetRowColor{LightBackground}
maxlength & Input can't exceed this amount \tn 
% Row Count 8 (+ 2)
% Row 12
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{autofocus} \tn 
% Row Count 9 (+ 1)
% Row 13
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{} \tn 
% Row Count 9 (+ 0)
% Row 14
\SetRowColor{white}
{\bf{Datalists}} & These provide input suggestions for autocomplete. \tn 
% Row Count 12 (+ 3)
% Row 15
\SetRowColor{LightBackground}
{\bf{Drop-down lists}} & They give the user options to choose from in different ways. \tn 
% Row Count 15 (+ 3)
% Row 16
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Checkboxes}}} \tn 
% Row Count 16 (+ 1)
% Row 17
\SetRowColor{LightBackground}
 & input:checkbox -\textgreater{} \textless{}input type="checkbox" name="" id="" /\textgreater{} \tn 
% Row Count 19 (+ 3)
% Row 18
\SetRowColor{white}
{\bf{Radio-boxes}} & Used when we want to select just one choice \tn 
% Row Count 22 (+ 3)
% Row 19
\SetRowColor{LightBackground}
 & \textless{}input type="radio" name="" id=""\textgreater{} \tn 
% Row Count 24 (+ 2)
% Row 20
\SetRowColor{white}
{\bf{Sliders}} & Allows the user to select from a range of values with JavaScript help \tn 
% Row Count 28 (+ 4)
% Row 21
\SetRowColor{LightBackground}
 & \textless{}input type="range" min="0" max="10" value="5" /\textgreater{} \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{File inputs}}} \tn 
% Row Count 1 (+ 1)
% Row 23
\SetRowColor{white}
Data validation & We can follow different constraints to make sure users input valid inputs and avoid malware. This can be done through HTML5 alone and JavaScript. \tn 
% Row Count 9 (+ 8)
% Row 24
\SetRowColor{LightBackground}
 & With HTML5 we can use the 'required' attribute to force completion, minlength to force a minimum length for the input, maxlength. Some restriction come with type, like email or date. min and max should be used in numeric fields to avoid corrupt inputs. \tn 
% Row Count 22 (+ 13)
% Row 25
\SetRowColor{white}
Hidden fields & These are used to send data from the form to the server, like IDs. \tn 
% Row Count 26 (+ 4)
% Row 26
\SetRowColor{LightBackground}
 & Never ever store sensitive values on these. \tn 
% Row Count 29 (+ 3)
% Row 27
\SetRowColor{white}
 & \textless{}input type="hidden" name="course-id" value="1234" /\textgreater{} \tn 
% Row Count 32 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 28
\SetRowColor{LightBackground}
Submitting the form & Both buttons and inputs can be created to create a submit option: \tn 
% Row Count 4 (+ 4)
% Row 29
\SetRowColor{white}
 & \textless{}button type="submit"\textgreater{}\textless{}/button\textgreater{} \tn 
% Row Count 6 (+ 2)
% Row 30
\SetRowColor{LightBackground}
 & \textless{}input type="submit" value="" /\textgreater{} \tn 
% Row Count 8 (+ 2)
% Row 31
\SetRowColor{white}
 & To actually submit the form to the server, we need aid from server-side technologies like NodeJS, Django, etc. \tn 
% Row Count 14 (+ 6)
% Row 32
\SetRowColor{LightBackground}
 & To test, we can use the website \seqsplit{https://formspree.io/} \tn 
% Row Count 17 (+ 3)
% Row 33
\SetRowColor{white}
 & Forms need to have an action attribute (where we send data) and a method attribute (how we're sending data) \tn 
% Row Count 23 (+ 6)
% Row 34
\SetRowColor{LightBackground}
 & \textless{}form \seqsplit{action="https://formspree}.io/f/???" method="POST"\textgreater{} \tn 
% Row Count 26 (+ 3)
% Row 35
\SetRowColor{white}
 & and inputs need to have a 'name' \tn 
% Row Count 28 (+ 2)
% Row 36
\SetRowColor{LightBackground}
 & \textless{}input type="email" name="email" id="e-mail" /\textgreater{} \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Forms (cont)}}  \tn
% Row 37
\SetRowColor{LightBackground}
 & with POST, the input value will be included on the body of the HTTP request. With GET, they will be appended to the URL. \tn 
% Row Count 6 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Imports}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{@import url();} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{@import url(animations.css);} \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Animations}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.32 cm} x{5.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Font formatting}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{text-align:} & (center,end,justify...) \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{text-indent:} & Adds a little space before the paragraph. To avoid adding it to the paragraph subsequent to a heading and add it to the next paragraph, we can use relational selector p + p. (rem,px...) \tn 
% Row Count 8 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{text-decoration:} & (underline,line-through...) \tn 
% Row Count 10 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{text-transform:} & (lowercase,uppercase,capitalize...) \tn 
% Row Count 12 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{white-space:} & (no-wrap) \tn 
% Row Count 14 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{text-overflow} & (ellipsis) \tn 
% Row Count 16 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{line-clamp:} & (n) \tn 
% Row Count 17 (+ 1)
% Row 7
\SetRowColor{white}
\seqsplit{column-count:} & (n) Separates text into (n) columns \tn 
% Row Count 19 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{column-gap:} & (rem,px...) Makes a gap between prior columns \tn 
% Row Count 21 (+ 2)
% Row 9
\SetRowColor{white}
\seqsplit{column-rule:} & Creates a visual separator between columns, ex: 3px, dotted, \#999 \tn 
% Row Count 24 (+ 3)
% Row 10
\SetRowColor{LightBackground}
direction: & ltr, ltr (text direction) \tn 
% Row Count 25 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}