Writing the article

If you are writing the article directly in WordPress, please use the "text" editor in WordPress instead of the "visual" one, especially if you are planning to write code.

Images should be a maximum of 800px wide.

<h2>Section headline example</h2>

Example paragraph, no <p></p> needed:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<h3>Sub-section headline example</h3>

For code snippets replace < and > with < and >

Example for HTML:

<pre class="brush:html"><code> &lt;div class="st-container"&gt; &lt;/div&gt;&lt;!-- // st-container --&gt; </code></pre>

Example for CSS:

<pre class="brush:css"><code> body { background: #000; } </code></pre>

Example for JavaScript:

<pre class="brush:js"><code> ... </code></pre>

Available brushes for code hightlighting: html, scss, css, js, xml, php, mysql or any other if needed: https://highlightjs.org/

Available styles and shortcodes

``

Attention: Some of these techniques are very experimental and won't work in all browsers.

``

Codepen embed example:

[codepen_embed height="542" theme_id="light" slug_hash="148b441363a320d4b46cb5ff835525ef" default_tab="result" user="SaraSoueidan"]See the Pen <a href='https://codepen.io/SaraSoueidan/pen/148b441363a320d4b46cb5ff835525ef/'>feTurbluence: baseFrequency</a> by Sara Soueidan (<a href='https://codepen.io/SaraSoueidan'>@SaraSoueidan</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]

Codesandbox example: <iframe src="https://codesandbox.io/embed/v8439q295l?fontsize=12" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

Optional browser support icons shortcode: [browsersupport chrome="all" safari="all" opera="all" firefox="flag" ie="9+"] (If a browser is not supported at all, just leave it out)

Add this to the end of the article if needed:

``

References and Credits

• Some resource
• Some resource

``

Ad shortcode: [adrotate group="2"]