CSnap/cheetsheetz
CSnap
/
cheetsheetz
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added HTML and CSS sheet.

This commit is contained in:
CSnap 2023-11-19 07:38:48 +00:00
parent 8105fe6bf9
commit f661565b3d
2 changed files with 297 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
HTML.md Normal file
View File

@ -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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</section>
<h2>Section 1</h2>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
</body>
</html>
```
## HTML Advanced
```html
<!-- Forms -->
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
<!-- Tables -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
</tr>
</table>
<!-- Semantics -->
<aside>
<h3>Side Content</h3>
<p>Additional information.</p>
</aside>
<!-- Media Elements -->
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<!-- IFrames -->
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
```
## 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
<!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(0, 0, 200, 100);
</script>
<!-- SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<!-- Web Components -->
<my-custom-element></my-custom-element>
<!-- Drag and Drop -->
<div id="drag" draggable="true">Drag me!</div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text');
var draggedElement = document.getElementById(data);
event.target.appendChild(draggedElement);
}
</script>
```
## 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%);
}
```

1
README.md
View File

@ -2,6 +2,7 @@
### A compendium of various technical "cheat sheets". ### 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](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) - [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) - [Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)