Guest Post on CSS-Tricks

Developer
Shankar Cabus
Size
6,425 Kb
Views
66,792
  1. Guest Post on CSS-Tricks Previews
  2. Guest Post on CSS-Tricks HTML Codes
  3. Guest Post on CSS-Tricks CSS Codes
  4. Guest Post on CSS-Tricks JS Codes

How do I make an guest post on css-tricks?

What is a guest post on css-tricks? How do you make a guest post on css-tricks? This script and codes were developed by Shankar Cabus on 24 June 2022, Friday.

Guest Post on CSS-Tricks Previews
IQ Test

Guest Post on CSS-Tricks - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Guest Post on CSS-Tricks</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://s.cdpn.io/3/css-tricks-v10-1.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article>
<h1>Title of Your Article</h1>
<p class="time"> Published <time datetime="2013-06-13"> June 13, 2013 </time> by Guest Author
</p>
<em class="explanation">This top paragraph is where I introduce you and explain how this guest post came about. I will write it, but you can provide links that you want used. It's an &lt;em> for various syndication reasons.</em>
This is <em>your</em> intro paragraph. This is where you explain briefly what this article is going to be about. Hopefully it's quite enticing and interesting.
<strong>Note</strong> that there are no &lt;p> tags around these paragraphs. I publish in WordPress and use their auto-p functionality. Not a big deal, just easier if you don't use them. So here on CodePen, we're using Markdown which automatically does that. Don't use Markdown for anything else though. While I love it, I don't use it while publishing articles on CSS-Tricks (legacy reasons).
<strong>Also note</strong> there are no super hard-and-fast rules for post formatting. If you want to do something usual or fancy or whatever, I'm typically down.
<h3>Subheads are &lt;h3> tags</h3>
They probably should be &lt;h2> tags but again for legacy reasons they are not. h3's have a bunch of margin above them to set them apart.
Breaking articles into sections is a good idea. It just flows better and is easier to scan.
You can use &lt;strong>, &lt;b>, &lt;em>, and &lt;i> as needed, but don't nest them as I don't load the bold-and-italic version of my body font for performance reasons.
<h4>Sub-subheads</h4>
Sub-sections using &lt;h4> tags. Like if you were going going to make a section all about the font property and then sub-heads for each of the sub-properties. Sub-sections should be related to the larger section they are a part of.
<h4>Another sub-subhead</h4>
These don't have as much space above or below them as the h3's.
<h3>The HTML (Example Section Title)</h3>
A common thing when demonstrating a front end technique is to break into sections by language.
<pre rel="HTML"><code markup="tt" class="language-markup"><div>
<h3 class="title">Example Code</h3>
<ul> <li>This</li> <li>Little</li> <li>Piggy</li>
</ul>
</div></code></pre>
Things to note about posting code blocks:
<ul> <li>Do not escape HTML</li> <li>Use two spaces for indenting</li> <li>HTML uses &lt;pre rel="HTML">&lt;code markup="tt" class="language-markup"></li> <li>CSS uses &lt;pre rel="CSS">&lt;code class="language-css"></li> <li>JS uses &lt;pre rel="jQuery">&lt;code class="language-javascript"></li> <li>For any JS library, replace the rel="" with that library name, like "jQuery"</li> <li>No extra lines at top or bottom of the code block</li>
</ul>
Inline code is in &lt;code> tags. HTML in code tags don't need to be escaped either, even though I have here.
<h3>The CSS (Example Header)</h3>
Block quotes are like this:
<blockquote>To live is to love or something.</blockquote>
You don't need paragraph tags inside blockquotes unless they are more than one paragraph. Then put paragraph tags around both.
<blockquote><p>This is the first paragraph of a multi-paragraph quote.</p>
<p>And this is the second.</p></blockquote>
<pre rel="CSS"><code class="language-css">.selector {
property: value;
}</code></pre>
<h3>The JavaScript (...just another example)</h3>
<ul> <li>Oh by the way you can nest lists if you need to. <ol> <li>Itty</li> <li>Bitty</li> <li>Titty</li> </ol> </li> <li>They can be of any type.</li>
</ul>
<pre rel="jQuery"><code class="language-javascript">$("pre code").each(function() { var content = $(this).html(); $(this).text(content);
});</code></pre>
yadda yadda yadda.
<h3>Another Lovely Section</h3>
I host all images in articles right on the CSS-Tricks CDN. Link them up however you need to temporarily and I'll upload them.
If the image blending into white makes sense (<a href="http://css-tricks.com/poll-results-mobile-web-design-responsibility/">example</a>) then just use an &lt;img>.
Otherwise, mark it up in a &lt;figure> tag which gives it a frame and sets it apart. This is the standard.
<figure> <img src="http://s.cdpn.io/3/star.png" /> <figcaption>This is a star.</figcaption>
</figure>
Use &lt;figcaption> tags within the &lt;figure> to write captions if needed.
Images will never scale up, but if they are wider than the column, they will scale down.
<table> <tr> <th>Header</th> <th>Header</th> <th>Header</th> <tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
</table>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://s.cdpn.io/3/prism.js'></script> <script src="js/index.js"></script>
</body>
</html>

Guest Post on CSS-Tricks - Script Codes CSS Codes

body { background: url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png);
}
article { background: white; border: 20px solid #D6D5D5; padding: 40px; width: 80%; max-width: 700px; margin: 20px auto;
}

Guest Post on CSS-Tricks - Script Codes JS Codes

// HTML in article should just be HTML, not escaped
// CSS-Tricks doesn't do it exactly this way, but close enough.
$("pre code").each(function() { var content = $(this).html(); $(this).text(content);
});
Guest Post on CSS-Tricks - Script Codes
Guest Post on CSS-Tricks - Script Codes
Home Page Home
Developer Shankar Cabus
Username shankarcabus
Uploaded June 24, 2022
Rating 3
Size 6,425 Kb
Views 66,792
Do you need developer help for Guest Post on CSS-Tricks?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shankar Cabus (shankarcabus) Script Codes
Name
JusBrasil logo single element
Vertical align
Front in Aracaju Logo Pure CSS
A Pen by Shankar Cabus
Compass pure CSS
Conical gradient in pure CSS
Single element heart
Flat Progress Bar CSS e HTML
Transformers Cube with device orientation
Super Mario CSS
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!