diff --git a/README.md b/README.md
index 483c2e6..dcff35f 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
## 🤔 Why Awesome-Cheatsheets?
-I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I reorganized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
+I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
@@ -75,6 +75,7 @@ Feel free to take a look. You might learn new things. They have been designed to
#### Basics
- [HTML5](frontend/html5.html)
+- [CSS3](frontend/css3.css)
#### Frameworks
diff --git a/frontend/css3.css b/frontend/css3.css
new file mode 100644
index 0000000..c367428
--- /dev/null
+++ b/frontend/css3.css
@@ -0,0 +1,683 @@
+/****************************
+ * CSS3 CHEATSHEET - Beginner Friendly
+ * Learn more: https://web.dev/learn/css/
+ * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS
+ * PDF for Better Readability: https://github.com/LeCoupa/awesome-cheatsheets/files/8880372/CSS_Cheatsheet.pdf
+ * Brief overview about CSS: http://jonkinney.com/assets/21/advanced_css.pdf
+ * (Advance) Know more about each topic in-depth: https://www.ciwcertified.com/resources/documents/sample-chapter/CCT02CDHTCSCK1405.PDF
+ *
+ *
+ *
+ * Table of contents
+ * -------------------
+ * 01 | Font
+ * 02 | Text
+ * 03 | Background
+ * 04 | Border
+ * 05 | Box Model
+ * 06 | Colors
+ * 07 | Template Layout
+ * 08 | Table
+ * 09 | Columns
+ * 10 | List & Markers
+ * 11 | Animations
+ * 12 | Transitions
+ * 13 | CSS Flexbox (Important)
+ * - Parent Properties (flex container)
+ * - Child Properties (flex items)
+ * 14 | CSS Grid (Useful in Complex Web Designs)
+ * - Parent Properties (Grid container)
+ * - Child Properties (Grid items)
+ * 15 | Media Queries
+ *
+ *
+ *
+ *****************************/
+
+/***************************
+
+------------ 01: Font -----------
+
+There are many properties related to the font, such as the face, weight, style, etc. These
+properties allow you to change the style or complete look of your text.
+
+*******************************/
+
+/** Body Selector which applies properties to whole body
*/
+body {
+ /* Font-Family */
+ font-family: "Segoe UI", Tahoma, sans-serif; /* You can declare multiple fonts. */
+ /*if first font doesn't exists other ones will be declared serial wise */
+
+ /* Font-Style */
+ font-style: italic;
+
+ /* Font-Variant */
+ font-variant: small-caps;
+
+ /* Font-Weight */
+ font-weight: bold;
+
+ /* Font-Size */
+ font-size: larger;
+
+ /* Font */
+ font: style variant weight size family;
+}
+
+/***************************
+
+------------ 02: Text -----------
+
+Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the
+document.
+
+*******************************/
+
+/* Applies to all tags with class 'container' ex: */
+.container {
+ /* Text-Align */
+ text-align: justify;
+
+ /* Letter-Spacing */
+ letter-spacing: 0.15em;
+
+ /* Text-Decoration */
+ text-decoration: underline;
+
+ /* Word-Spacing */
+ word-spacing: 0.25em;
+
+ /* Text-Transform */
+ text-transform: uppercase;
+
+ /* Text-Indent */
+ text-indent: 0.5cm;
+
+ /* Line-Height */
+ line-height: normal;
+}
+
+/***************************
+
+------------ 03: Background -----------
+
+As the name suggests, these properties are related to background, i.e., you can change the color,
+image, position, size, etc., of the document.
+
+*******************************/
+
+/* Applies to all tags with id 'wrapper' ex: */
+#wrapper {
+ /* Background-Image */
+ background-image: url("Path");
+
+ /* Background-Position */
+ background-position: right top;
+
+ /* Background-Size */
+ background-size: cover;
+
+ /* Background-Repeat */
+ background-repeat: no-repeat;
+
+ /* Background-Attachment */
+ background-attachment: scroll;
+
+ /* Background-Color */
+ background-color: fuchsia;
+
+ /* Background */
+ background: color image repeat attachment position;
+}
+
+/***************************
+
+------------ 04: Border -----------
+
+Border properties are used to change the style, radius, color, etc., of buttons or other items of
+the document.
+
+*******************************/
+
+/* You can also select multiple items */
+div,
+.container {
+ /* Border-Width */
+ border-width: 5px;
+
+ /* Border-Style */
+ border-style: solid;
+
+ /* Border-Color */
+ border-color: aqua;
+
+ /* Border-Radius */
+ border-radius: 15px;
+
+ /* Border */
+ border: width style color;
+}
+
+/***************************
+
+------------ 05: Box Model -----------
+
+In laymen's terms, the CSS box model is a container that wraps around every HTML element. It
+consists of margins, borders, padding, and the actual content.
+It is used to create the design and layout of web pages.
+
+*******************************/
+
+.wrapper {
+ /* Float */
+ float: none;
+ /* Clear */
+ clear: both;
+ /* Display */
+ display: block;
+ /* Height */
+ height: fit-content;
+ /* Width */
+ width: auto;
+ /* Margin */
+ margin: top right bottom left;
+ /* Padding */
+ padding: top right bottom left;
+ /* Overflow */
+ overflow: hidden;
+ /* Visibility */
+ visibility: visible;
+ /* z-index */
+ z-index: 1;
+ /* position */
+ position: static | relative | fixed | absolute | sticky;
+
+}
+
+/***************************
+
+------------ 06: Colors -----------
+
+With the help of the color property, one can give color to text, shape, or any other object.
+
+*******************************/
+
+p,
+span,
+.text {
+ /* Color - 1 */
+ color: cornsilk;
+ /* Color - 2 */
+ color: #fff8dc;
+ /* Color - 3 */
+ color: rgba(255, 248, 220, 1);
+ /* Color - 4 */
+ color: hsl(48, 100%, 93%);
+ /* Opacity */
+ opacity: 1;
+}
+
+/***************************
+
+------------ 07: Template Layout -----------
+
+Specifies the visual look of the content inside a template
+
+*******************************/
+
+/* '*' selects all elements on a page */
+* {
+ /* Box-Align */
+ box-align: start;
+
+ /* Box-Direction */
+ box-direction: normal;
+
+ /* Box-Flex */
+ box-flex: normal;
+
+ /* Box-Flex-Group */
+ box-flex-group: 2;
+
+ /* Box-Orient */
+ box-orient: inline;
+
+ /* Box-Pack */
+ box-pack: justify;
+
+ /* Box-Sizing */
+ box-sizing: margin-box;
+
+ /* max-width */
+ max-width: 800px;
+
+ /* min-width */
+ min-width: 500px;
+
+ /* max-height */
+ max-height: 100px;
+
+ /* min-height */
+ min-height: 80px;
+}
+
+/***************************
+
+------------ 08: Table -----------
+
+Table properties are used to give style to the tables in the document. You can change many
+things like border spacing, table layout, caption, etc.
+
+*******************************/
+
+table {
+ /* Border-Collapse */
+ border-collapse: separate;
+
+ /* Empty-Cells */
+ empty-cells: show;
+
+ /* Border-Spacing */
+ border-spacing: 2px;
+
+ /* Table-Layout */
+ table-layout: auto;
+
+ /* Caption-Side */
+ caption-side: bottom;
+}
+
+/***************************
+
+------------ 09: Columns -----------
+
+These properties are used explicitly with columns of the tables, and they are used to give the
+table an incredible look.
+
+*******************************/
+
+/* Applies to */
+/* Not */
+table.nice-table {
+ /* Column-Count */
+ column-count: 10;
+
+ /* Column-Gap */
+ column-gap: 5px;
+
+ /* Column-rule-width */
+ column-rule-width: medium;
+
+ /* Column-rule-style */
+ column-rule-style: dotted;
+
+ /* Column-rule-color */
+ column-rule-color: black;
+
+ /* Column-width */
+ column-width: 10px;
+
+ /* Column-span */
+ column-span: all;
+}
+
+/***************************
+
+------ 10: List & Markers -------
+
+List and marker properties are used to customize lists in the document.
+
+*******************************/
+
+li,
+ul,
+ol {
+ /* List-style-type */
+ list-style-type: square;
+
+ /* List-style-position */
+ list-style-position: 20px;
+
+ /* List-style-image */
+ list-style-image: url("image.gif");
+
+ /* Marker-offset */
+ marker-offset: auto;
+}
+
+/***************************
+
+------------ 11: Animations -----------
+
+CSS animations allow one to animate transitions or other media files on the web page.
+
+*******************************/
+
+svg,
+.loader {
+ /* Animation-name */
+ animation-name: myanimation;
+
+ /* Animation-duration */
+ animation-duration: 10s;
+
+ /* Animation-timing-function */
+ animation-timing-function: ease;
+
+ /* Animation-delay */
+ animation-delay: 5ms;
+
+ /* Animation-iteration-count */
+ animation-iteration-count: 3;
+
+ /* Animation-direction */
+ animation-direction: normal;
+
+ /* Animation-play-state */
+ animation-play-state: running;
+
+ /* Animation-fill-mode */
+ animation-fill-mode: both;
+}
+
+/***************************
+
+------------ 12: Transitions -----------
+
+Transitions let you define the transition between two states of an element.
+
+*******************************/
+
+a,
+button {
+ /* Transition-property */
+ transition-property: none;
+
+ /* Transition-duration */
+ transition-duration: 2s;
+
+ /* Transition-timing-function */
+ transition-timing-function: ease-in-out;
+
+ /* Transition-delay */
+ transition-delay: 20ms;
+}
+
+/***************************
+
+------------ 13: CSS Flexbox (Important) -----------
+
+Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align
+items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill
+the space. And overall, it makes the responsive design more manageable.
+
+*******************************/
+
+/* ---------------------- Parent Properties (flex container) ------------ */
+
+section,
+div#wrapper {
+ /* display */
+ display: flex;
+
+ /* flex-direction */
+ flex-direction: row | row-reverse | column | column-reverse;
+
+ /* flex-wrap */
+ flex-wrap: nowrap | wrap | wrap-reverse;
+
+ /* flex-flow */
+ flex-flow: column wrap;
+
+ /* justify-content */
+ justify-content: flex-start | flex-end | center | space-between | space-around;
+
+ /* align-items */
+ align-items: stretch | flex-start | flex-end | center | baseline;
+
+ /* align-content */
+ align-content: flex-start | flex-end | center | space-between | space-around;
+}
+
+
+/* ---------------------- Child Properties (flex items) ------------ */
+
+p,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a {
+ /* order */
+ order: 5; /* default is 0 */
+
+ /* flex-grow */
+ flex-grow: 4; /* default 0 */
+
+ /* flex-shrink */
+ flex-shrink: 3; /* default 1 */
+
+ /* flex-basis */
+ flex-basis: | auto; /* default auto */
+
+ /* flex shorthand */
+ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
+
+ /* align-self */
+ align-self: auto | flex-start | flex-end | center | baseline | stretch;
+}
+
+/***************************
+
+------------ 14: CSS Grid (Useful in Complex Web Designs) -----------
+
+Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design
+layouts more easily and consistently across browsers.
+
+*******************************/
+
+
+/* ---------------------- Parent Properties (Grid container) ------------ */
+
+section,
+div#wrapper {
+ /* display */
+ display: grid | inline-grid;
+
+ /* grid-template-columns */
+ grid-template-columns: 12px 12px 12px;
+
+ /* grid-template-rows */
+ grid-template-rows: 8px auto 12px;
+
+ /* grid-template */
+ grid-template: none | / ;
+
+ /* column-gap */
+ column-gap: ;
+
+ /* row-gap */
+ row-gap: ;
+
+ /* grid-column-gap */
+ grid-column-gap: ;
+
+ /* grid-row-gap */
+ grid-row-gap: ;
+
+ /* gap shorthand */
+ gap: ;
+
+ /* grid-gap shorthand */
+ grid-gap: ;
+
+ /* justify-items */
+ justify-items: start | end | center | stretch;
+
+ /* align-items */
+ align-items: start | end | center | stretch;
+
+ /* place-items */
+ place-items: center;
+
+ /* justify-content */
+ justify-content: start | end | center | stretch | space-around | space-between;
+
+ /* align-content */
+ align-content: start | end | center | stretch | space-around | space-between;
+
+ /* place-content */
+ place-content: / ;
+
+ /* grid-auto-columns */
+ grid-auto-columns: ...;
+
+ /* grid-auto-rows */
+ grid-auto-rows: ...;
+
+ /* grid-auto-flow */
+ grid-auto-flow: row | column | row dense | column dense;
+
+}
+
+
+/* ---------------------- Child Properties (Grid items) ------------ */
+
+p,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a {
+ /* grid-column-start */
+ grid-column-start: | | span | span | auto;
+
+ /* grid-column-end */
+ grid-column-end: | | span | span | auto;
+
+ /* grid-row-start */
+ grid-row-start: | | span | span | auto;
+
+ /* grid-row-end */
+ grid-row-end: | | span | span | auto;
+
+ /* grid-column shorthand */
+ grid-column: / | / span ;
+
+ /* grid-row shorthand */
+ grid-row: / | / span ;
+
+ /* grid-area */
+ grid-area: | / / / ;
+
+ /* justify-self */
+ justify-self: start | end | center | stretch;
+
+ /* align-self */
+ align-self: start | end | center | stretch;
+
+ /* place-self */
+ place-self: center;
+}
+
+
+/***************************
+
+------------ 15: MEDIA QUERIES -----------
+
+Using media queries are a popular technique for delivering a tailored style sheet to
+desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
+
+|----------------------------------------------------------|
+| Responsive Grid Media Queries - 1280, 1024, 768, 480 |
+| 1280-1024 - desktop (default grid) |
+| 1024-768 - tablet landscape |
+| 768-480 - tablet |
+| 480-less - phone landscape & smaller |
+|----------------------------------------------------------|
+
+*******************************/
+
+
+@media all and (min-width: 1024px) and (max-width: 1280px) { }
+
+@media all and (min-width: 768px) and (max-width: 1024px) { }
+
+@media all and (min-width: 480px) and (max-width: 768px) { }
+
+@media all and (max-width: 480px) { }
+
+/* Small screens - MOBILE */
+@media only screen { } /* Define mobile styles - Mobile First */
+
+@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
+
+/* Medium screens - TABLET */
+@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
+
+@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
+
+/* Large screens - DESKTOP */
+@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
+
+@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
+
+/* XLarge screens */
+@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
+
+@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
+
+/* XXLarge screens */
+@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
+
+/*------------------------------------------*/
+
+
+
+/* Portrait */
+@media screen and (orientation:portrait) { /* Portrait styles here */ }
+/* Landscape */
+@media screen and (orientation:landscape) { /* Landscape styles here */ }
+
+
+/* CSS for iPhone, iPad, and Retina Displays */
+
+/* Non-Retina */
+@media screen and (-webkit-max-device-pixel-ratio: 1) {
+}
+
+/* Retina */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3/2),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+}
+
+/* iPhone Portrait */
+@media screen and (max-device-width: 480px) and (orientation:portrait) {
+}
+
+/* iPhone Landscape */
+@media screen and (max-device-width: 480px) and (orientation:landscape) {
+}
+
+/* iPad Portrait */
+@media screen and (min-device-width: 481px) and (orientation:portrait) {
+}
+
+/* iPad Landscape */
+@media screen and (min-device-width: 481px) and (orientation:landscape) {
+}
+
+/* Make Sure you don't forgot to add */
+ /* within tag */
+
+
+
diff --git a/frontend/html5.html b/frontend/html5.html
index 06bc17a..e5bdd88 100644
--- a/frontend/html5.html
+++ b/frontend/html5.html
@@ -50,6 +50,7 @@
+
diff --git a/languages/C#.txt b/languages/C#.txt
index b537983..abb9d65 100644
--- a/languages/C#.txt
+++ b/languages/C#.txt
@@ -162,7 +162,7 @@ CHEATSHEET C#
8. C# compiler at the Command Line
- csc File.cs -> Compiles Files.cs producing File.exe
+ csc File.cs -> Compiles File.cs producing File.exe
csc -target:library File.cs -> Compiles File.cs producing File.dll
csc -out:My.exe File.cs -> Compiles File.cs and creates My.exe
csc -define:DEBUG -optimize -out:File2.exe *.cs -> Compiles all the C# files in the current directory with optimizations enabled and defines the DEBUG symbol. The output is File2.exe
diff --git a/languages/java.md b/languages/java.md
index 6d608c0..dedf5c4 100644
--- a/languages/java.md
+++ b/languages/java.md
@@ -26,11 +26,14 @@ public class HelloWorld {
| Type | Set of values | Values | Operators |
|:-------:|:-----------------------:|:----------------------------:|:---------:|
+| short | integers | between -2^15 and + (2^15)-1 | + - * / % |
| int | integers | between -2^31 and + (2^31)-1 | + - * / % |
-| double | floating-point numbers | real numbers | + - * / |
+| long | integers | between -2^63 and + (2^63)-1 | + - * / % |
+| float | integers | real numbers 32 bit | + - * / |
+| double | floating-point numbers | real numbers 64 bit | + - * / |
| boolean | boolean values | true or false | && \|\| ! |
-| char | characters | | |
-| String | sequences of characters | | |
+| char | characters | 16 bit | |
+| String | sequences of characters |it's not a primitive data type| |
### DECLARATION AND ASSIGNMENT STATEMENTS
@@ -44,6 +47,16 @@ a = 13212; //a is the variable name; 13212 is the literal which is assign to the
//Initialization statement
int c = a + b;
+
+//Compound assignment expressions
+a += b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a + b
+a -= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a - b
+a *= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a * b
+a /= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a / b
+a %= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a % b
+a ^= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a ^ b
+a &= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a & b
+a \|= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a \| b
```
### COMPARISON OPERATORS
diff --git a/languages/php.php b/languages/php.php
index 83d8da2..62ec245 100644
--- a/languages/php.php
+++ b/languages/php.php
@@ -17,7 +17,7 @@ var_dump($arr); // Print anything, with type hints for any value and sizes
$string = 'Awesome cheatsheets';
str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
-str_replace('Awesome', 'Bonjour', $string); // Replace all occurence (PHP >= 8.0)
+str_replace('Awesome', 'Bonjour', $string); // Replace all occurence
strcmp($string, 'Awesome cheatsheets'); // Compare two strings
strpos($string, 'a', 0); // Get position in the string
str_split($string, 2); // Split the string
diff --git a/tools/docker.sh b/tools/docker.sh
index c19579e..728d5e2 100644
--- a/tools/docker.sh
+++ b/tools/docker.sh
@@ -12,6 +12,7 @@ docker stop # Gracefully stop the specified cont
docker ps -a # See a list of all containers, even the ones not running
docker kill # Force shutdown of the specified container
docker rm # Remove the specified container from this machine
+docker rm -f # Remove force specified container from this machine
docker rm $(docker ps -a -q) # Remove all containers from this machine
docker images -a # Show all images on this machine
docker rmi # Remove the specified image from this machine