diff --git a/HTML.md b/HTML.md new file mode 100644 index 0000000..19a0db0 --- /dev/null +++ b/HTML.md @@ -0,0 +1,296 @@ +# HTML and CSS3 Cheat Sheet + +## Table of Contents + +1. [HTML Basics](#html-basics) + 1.1 [Document Structure](#document-structure) + 1.2 [HTML Elements](#html-elements) + 1.3 [Headings](#headings) + 1.4 [Paragraphs](#paragraphs) + 1.5 [Lists](#lists) + 1.6 [Links](#links) + 1.7 [Images](#images) + +2. [HTML Advanced](#html-advanced) + 2.1 [Forms](#forms) + 2.2 [Tables](#tables) + 2.3 [Semantics](#semantics) + 2.4 [Media Elements](#media-elements) + 2.5 [IFrames](#iframes) + +3. [CSS3 Basics](#css3-basics) + 3.1 [Selectors](#selectors) + 3.2 [Box Model](#box-model) + 3.3 [Colors and Backgrounds](#colors-and-backgrounds) + 3.4 [Text Styling](#text-styling) + 3.5 [Fonts](#fonts) + +4. [CSS3 Advanced](#css3-advanced) + 4.1 [Flexbox](#flexbox) + 4.2 [Grid](#grid) + 4.3 [Transitions](#transitions) + 4.4 [Transforms](#transforms) + 4.5 [Animations](#animations) + +5. [Responsive Web Design](#responsive-web-design) + 5.1 [Media Queries](#media-queries) + 5.2 [Viewport](#viewport) + +6. [CSS Layout](#css-layout) + 6.1 [Floats](#floats) + 6.2 [Positioning](#positioning) + 6.3 [Display Property](#display-property) + 6.4 [Box Sizing](#box-sizing) + +7. [Advanced HTML Techniques](#advanced-html-techniques) + 7.1 [Canvas](#canvas) + 7.2 [SVG](#svg) + 7.3 [Web Components](#web-components) + 7.4 [Drag and Drop](#drag-and-drop) + +8. [Advanced CSS Techniques](#advanced-css-techniques) + 8.1 [Custom Properties (CSS Variables)](#custom-properties-css-variables) + 8.2 [CSS Grid Layout](#css-grid-layout) + 8.3 [Filter Effects](#filter-effects) + 8.4 [Clipping and Masking](#clipping-and-masking) + +## HTML Basics + +```html + + + + + + My Website + + + +
+

Welcome to My Website

+
+
+
+

Article Title

+

Article content goes here.

+
+
+

Section 1

+

This is a paragraph.

+ + Visit Example + Description of the image + + +``` + +## HTML Advanced + +```html + +
+ + + +
+ + + + + + + + + + +
NameAge
John Doe25
+ + + + + + +``` + +## CSS3 Basics + +```css +/* Selectors */ +h1 { + color: #3498db; +} +/* Box Model */ +div { + width: 200px; + height: 100px; + padding: 10px; + margin: 20px; + border: 2px solid #2ecc71; +} +/* Colors and Backgrounds */ +body { + background-color: #ecf0f1; +} +/* Text Styling */ +p { + font-size: 16px; + font-weight: bold; +} +/* Fonts */ +body { + font-family: 'Arial', sans-serif; +} +``` + +## CSS3 Advanced + +```css +/* Flexbox */ +.container { + display: flex; + justify-content: space-between; +} +/* Grid */ +.grid-container { + display: grid; + grid-template-columns: auto auto auto; +} +/* Transitions */ +button { + transition: background-color 0.3s ease; +} +button:hover { + background-color: #e74c3c; +} +/* Transforms */ +.box { + transform: rotate(45deg); +} +/* Animations */ +@keyframes slide { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} +.slider { + animation: slide 1s ease-in-out; +} +``` + +## Responsive Web Design + +```css +/* Media Queries */ +@media only screen and (max-width: 600px) { + body { + font-size: 14px; + } +} +/* Viewport */ +meta { + width: device-width; + initial-scale: 1.0; +} +``` + +## CSS Layout + +```css +/* Floats */ +.float-left { + float: left; +} +/* Positioning */ +.absolute-position { + position: absolute; + top: 10px; + left: 20px; +} +/* Display Property */ +.inline-block { + display: inline-block; +} +/* Box Sizing */ +box-sizing: border-box; +``` + +## Advanced HTML Techniques + +```html + + + + + + + + + + +
Drag me!
+
+ +``` + +## Advanced CSS Techniques + +```css +/* Custom Properties (CSS Variables) */ +:root { + --main-color: #3498db; + --secondary-color: #e74c3c; +} +body { + background-color: var(--main-color); +} +button { + background-color: var(--secondary-color); +} +/* CSS Grid Layout */ +.grid-container { + display: grid; + grid-template-columns: auto auto auto; +} +.grid-item { + padding: 20px; + text-align: center; + border: 1px solid #ccc; +} +/* Filter Effects */ +.image-container { + filter: grayscale(50%); +} +/* Clipping and Masking */ +.clipped-element { + clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); +} +``` + diff --git a/README.md b/README.md index 0da4b7f..280fa77 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ ### A compendium of various technical "cheat sheets". +- [HTML and CSS](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md) - [JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md) - [JavaScript Object Notation](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/JSON.md) - [Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)