Jevel's Resources

Since neither HMTL nor CSS support code blocks with language-specific syntax highlighting natively, unlike Markdown and JS, my blocks are pretty basic. Because unformatted text also doesn't ignore whitespaces those need to be taken into account, too – do NOT follow Prettier's autoformatting!

CSS:

/* CODE BLOCK START */

.code {
background: burlywood;
display: block flex;
padding: 12px;
white-space: pre-wrap;
}

/* CODE BLOCK END */

HTML:

<pre><code class="code">YOUR CODE HERE</code></pre>

An additional step needs to be taken when wrapping code with special characters such as ">". A simple code tag is not sufficient within unformatted text boxes as those will be read by the browser, so those characters need to be encoded.

To spare anyone the effort to memorize each HTML entity, W3docs' Online HTML Encoder / Decoder does the job for free.

Despite plain HTML being capable of generating tables they don't tend to work well in responsive designs. Some people resort to flexboxes but I personally prefer to use grids. Please keep in mind that I primarily use grid tables for my hardware specs when testing software, so feel free to change the class names to better reflect what content your table consists of.

CSS:

/* GRID TABLE START */

.table-container {
display: grid;
grid-template-columns: auto auto;
gap: 4px;
padding: 4px;
background-color: black;
}

.table-head {
background-color: #3e0f23;
padding: 8px;
text-align: center;
font-size: 12px;
font-weight: bold;
}

.table-entry {
background-color: #3e0f23;
padding: 8px;
text-align: center;
font-size: 12px;
}

/* GRID TABLE END */

HTML:

<!-- GRID TABLE START -->

<div class="table-container">
	<div class="table-head">Ihr Revier</div>
	<div class="table-entry">die Autobahn</div>
	<div class="table-head">Ihr Tempo</div>
	<div class="table-entry">mörderisch</div>
	<div class="table-head">Ihre Gegner</div>
	<div class="table-entry">Autoschieber, Mörder und Erpresser</div>
	<div class="table-head">Einsatz</div>
	<div class="table-entry">rund um die Uhr</div>
	<div class="table-head">Für</div>
	<div class="table-entry">die Männer von Cobra 11</div>
	<div class="table-head">Unsere Sicherheit</div>
	<div class="table-entry">ihr Job</div>

<!-- GRID TABLE END -->

In case you need an example, here's an actual specs table without bogus data .

This snippet wraps any image inside a figure , allowing the usage of figcaption to add captions and image descriptions for accessibility tools.

CSS:

/* IMAGE CAPTION START */

figure {
padding: 2px;
margin: auto;
}

figcaption {
color: white;
font-size: 12px;
font-style: italic;
padding: 2px;
text-align: center;
}   

/* IMAGE CAPTION END */

HTML :

<figure>
    <img
	src="YOUR IMAGE"
	alt="ÝOUR ALT TEXT"
	width="100%"
	/>
    <figcaption>YOUR CAPTION</figcaption>
</figure>