This post illustrates all the available HTML trappings you may use to add to your blog post. You can quickly insert any of the elements into your post by copying the simple HTML markup shown just below the element below.

# Innovative Components
In addition to the standard elements detailed below, we also have *innovative* UI components—creative components built by Bov Academy students. You can see the list of the innovative components on [this blog post](https://blog.bovacademy.com/evolution-ui-an-entire-innovative-ui-framework/).

# Standard Elements

Notes (aka Bibliography)

We start with Notes first because it is a crucial part of every article or blog post, and we don’t want you to gloss over it.

Whenever you cite text from another writer, or whenever you refer to some other source, add an HTML sup tag with a number where you quote or refer to the material. The sup tag allows us to add the number as a superscript next to the material you are citing. Then, in the Notes section, you will add the same corresponding number and a link to the original source material. This sounds much more complicated than it is. The following example illustrates:

Enjoy the virtuosity of Churchill:

We shall go on to the end, we shall fight in France, we shall fight on the seas and oceans, we shall fight with growing confidence and growing strength in the air, we shall defend our island, whatever the cost may be, we shall fight on the beaches, we shall fight on the landing grounds, we shall fight in the fields and in the streets, we shall fight in the hills …1

Notes

  1. Winston Churchill, We Shall Fight on the Beaches, Speech (1940)

Put the entire Notes, including the citations, at the bottom of the blog post.


Highlight Text

Sometimes you want to highlight a word or more within a sentence. Use this highlightText button on the Text Editor to insert the HTML to highlight the text you want students to focus on. Highlight only a word or two or just a small portion of a sentence; don’t highlight long sentences or more than one sentence. Also, don’t use this highlight element too often, or else your course content will look like a Christmas tree.

Here is an example of highlighted text:

In this example, we are highlighting the words highlight me to bring attention to them.

  In this example, we are highlighting the words highlight me  to bring attention to them.


Expandable Block

First, you rarely, if ever, would need to use the expandable block for typical course content. We have published many courses and not one of them has the expandable block.

Second, use the expandable block in instances where you have content that would be best presented in a tab-view (that is, where clicking on a button or an section title reveals hidden content).

Title for First Item Goes Here

Content for first item goes here.

Title for Second Item Goes Here

Content for second item goes here.


List Group

Use the List Group to display content that is best organized in rows, similar to a single-column table layout.

  • badge itemList group item1
  • List group item2
  • List group item3
  • List group item4
  • badge itemList group item1
  • List group item2
  • List group item3
  • List group item4


Popover

The Modern Developer Style Guide requires you to avoid linking to Wikipedia and similar websites that have the potential to impede rather than illuminate. As an alternative to linking to those external resources, use a Popover to add contextual detail. Also use a Popover to explain or elaborate on a specific word or technology.

Click this underlined popover text to show the popover.
Click this underlined  popover  text to show the popover.


Extra-Tip Box

In the Text Editor (accessible next to the Visual Editor), you will see an extraTipBox button. Use that button to add the HTML for the extra-tip box that follows. Use the extra-tip box to add related information that adds clarity, supporting explanation, or evidence. Also, use it to add extra tips relevant to the subject discussed in the paragraph where the extra-tip box is used.

Notice the extra-tip box aligns to the right of the paragraph. Also, notice in the “HTML” section (when you click the HTML tab) that the extra-tip box markup appears before the paragraph tag.

You will likely have a second paragraph like this one.





  Add a paragraph along with the extra tip box.


Attention Box

In the Text Editor (accessible next to the Visual Editor), you will see an AttentionBox button. Use that button to add the HTML for this attention box. Use the attention box for the following:

  • To reiterate an important point
  • To alert the reader to something he or she might have missed and can’t afford to miss
  • To warn the reader about a common error or mistake to watch out for
  • To add dramatic emphasis.

Pay Close Attention:

This conspicuous yet lovely blue box is an attention box. You can remove the optional h4 header entitled “Pay Close Attention.”

Pay Close Attention:

This conspicuous yet lovely blue box is an attention box. You can remove the optional h4 header entitled "Pay Close Attention."


Steps List

Use the following Steps List to give instructions, which require numbered steps, in a lovely styled list:

  1. Step 1 instruction
  2. Step 2 instruction
  3. Step 3 instruction
  4. Step 4 instruction
  1. Step 1 instruction
  2. Step 2 instruction
  3. Step 3 instruction
  4. Step 4 instruction


FAQ List

Use the following FAQ List to display Frequently Asked Questions (FAQ):

Frequently Asked Questions

  1. How do i use the commenting feature?

    LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiaaboris

  2. How do i use the commenting feature?

    LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nosa qui officialaboris

Frequently Asked Questions

  1. How do i use the commenting feature?

    LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiaaboris
  2. How do i use the commenting feature?

    LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nosa qui officialaboris


Terminologies Block

Use the following Terminologies Block to show important terms with their meanings, whenever you have a list of relevant terms to define:

  1. heuristic
    enabling a person to discover or learn something for themselves. “a “hands-on” or interactive heuristic approach to learning”
    heuristic
    enabling a person to discover or learn something for themselves. “a “hands-on” or interactive heuristic approach to learning”
  2. heuristic
    enabling a person to discover or learn something for themselves. “a “hands-on” or interactive heuristic approach to learning”
    heuristic
    enabling a person to discover or learn something for themselves. “a “hands-on” or interactive heuristic approach to learning”
  1. heuristic
    enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
    heuristic
    enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
  2. heuristic
    enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"
    heuristic
    enabling a person to discover or learn something for themselves. "a “hands-on” or interactive heuristic approach to learning"


Inline Quote

Use the inline quote when a blockquote is too much and you want to quote right in a sentence.

Sometimes you don’t want a chunky blockquote to quote a bit of text. You may simply want to quote right within a sentence or paragraph, like this This bit of text, in italics, is an inline quote. Notice the inline quote is right within the sentence. It isn’t set off like a new paragraph as seen in the blockquote below.
    
Sometimes you don't want a chunky blockquote to quote a bit of text. You may simply want to quote right within a sentence or paragraph, like this This bit of text, in italics, is an inline quote. Notice the inline quote is right within the sentence. It isn't set off like a new paragraph as seen in the blockquote below.


Before and After

If you ever want to show the before and after states of something, or of an example code, or of some text, use the Before and After labels below.

Before:
After:
    
Before: After:


Exercises

As you have likely read (or will read) in our Course Specification, at the end of each sub-section of a course you will give students exercises; at the end of each section, you will ask them questions and give them a project to build; and at the end of your course, you will show them how to build a real-world application. Write the exercises in the Exercises box shown below, which you can insert by clicking the exercises button on the text editor.

Exercises

  1. Example 1
  2. Example 2
  3. Example 3
January 1st, 1970

    

Exercises

  1. Example 1
  2. Example 2
  3. Example 3
January 1st, 1970


Project Assignment

Write projects (given at the end of each section) in the Projects box shown below, which you can insert by clicking the projectAssignment button on the text editor.

Project Assignment

Content here

    

Project Assignment

Content here


Questions

Write questions (given at the end of each section) in the Questions box shown below, which you can insert by clicking the questions button on the text editor.

Questions

  1. Question 1
  2. Question 2
  3. Question 3

  

Questions

  1. Question 1
  2. Question 2
  3. Question 3


Build an Application

Write the details for the end-of-course application in the Applications box shown below, which you can insert by clicking the buildApp button on the text editor.

Let’s Build an Application

Content here

  

Let’s Build an Application

Content here


JavaScript Code

To add the necessary markup to wrap example JavaScript code, click the Wrap_JavaScript button on the text editor (not the Visual Editor, the Text Editor). Add sufficient comments to elaborate on the lines of code that need explanation. To ensure the code is easy to read, format it in your IDE or text editor; then paste it into the text editor here, on Word Press.

// A single-line comment
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
}

/*
 Use block the comment when the comment is a full sentence or more, such as
 this one. Write short sentences to ensure each fits within the code block
 and does not require scrolling.
 */
$(".nav.nav-tabs a").click(function (e) {
    e.preventDefault();
    return;
});

  



// A single-line comment
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
}

/*
 Use block the comment when the comment is a full sentence or more, such as this one.
 Write short sentences to ensure each fits within the code block and does
 not require scrolling.
 */
$(".nav.nav-tabs a").click(function (e) {
    e.preventDefault();
    return;
});

HTML Example Markup

To add the necessary markup to wrap example HTML, click the Wrap_HTML button on the text editor (not the Visual Editor, the Text Editor).


Inline Code

Wrap any piece of code that appears within a sentence or paragraph with the code tag, to highlight that code as code. The code will display in a different style from the rest of words in the sentence or paragraph.

This sentence includes standard words and also this bit of code: console.log("hi");. You can carry on writing your sentence or paragraph after the inline code.

This sentence includes normal words and also this bit of code: console.log("hi");. We can carry on writing a normal sentence or paragraph after we included the inline code.
 


Embedded Image

(With Optional Caption)

Note the following recommendations for embedding images:

  • Remember to use the alt tag.
  • Image Dimensions: Max width is 1140px. Max height is 760px.
  • Images can be jpg or png, whichever format is ideal for the given image. Generally, use a jpg for photos and png for everything else.
  • Use images of the highest quality, yet not necessarily of the largest file size. Find the right balance, and give preference to the image quality over file size.
Just a Custom Image for Illustration

You can insert an optional caption like this one. (Sean Voisen, one of our authors, created this image.)

Just a Custom Image for Illustration
You can insert an optional caption like this one. (Sean Voisen, one of our authors, created this image.)


Embedded Video

Video Format and Quality
Videos must be mp4 and webm formats. We need both to ensure compatibility and optimization on various old and new browsers.

Use high quality videos.

Video Length and General Video Guidelines
Since we don't advocate full video lectures, use embedded videos mostly to illustrate concepts and actions that are best demonstrated with a video. When to use a video should be apparent and incontrovertible. Use your best judgement.

Video Dimensions
Max width is 1140px.
Max height is 660px.

We are using responsive video, which means you need to upload only one size. The responsive design markup will scale the video accordingly.



Block Quote

Use quotes only if you are indeed quoting text written by someone else. And when you do quote, be sure to cite the original source. See the Notes section above for how to add bibliography to the page.

This is a blockquote. Unlike the inline quote noted earlier, which shows up right in the sentence, the blockquote shows up as a separate paragraph on its own.

This is a blockquote. Unlike the inline quote noted earlier, which shows up right in the sentence, the blockquote shows up as a separate paragraph on its own.


The Headers

H2 Header

H3 Header

H4 Header

H5 Header

H2 Header

H3 Header

H4 Header

H5 Header


Ordered list and Unordered list

If any piece of content can be organized into an ordered or unordered list, put it in the list to aid readability.

Ordered list

  1. Ordered list1
  2. Ordered list1
  3. Ordered list3
    1. Sub Ordered list1
    2. Sub Ordered list2
  4. Ordered list3

Unordered list

  • Unordered list1
  • Unordered list3
    • Sub Unordered list1
    • Sub Unordered list2
  • Unordered list3

Ordered list

  1. Ordered list1
  2. Ordered list1
  3. Ordered list3
    1. Sub Ordered list1
    2. Sub Ordered list2
  4. Ordered list3
Unordered list
  • Unordered list1
  • Unordered list3
    • Sub Unordered list1
    • Sub Unordered list2
  • Unordered list3

Pro Tip: You can customize the list type by using and of the options below:
- disc (• • •)
- circle (○ ○ ○)
- square (▪ ▪ ▪)
- decimal (1 2 3)
- decimal-leading-zero (01, 02, 03)
- lower-roman (i ii iii)
- upper-roman (I II III)
- lower-greek (α β γ)
- lower-latin (a b c)
- upper-latin (A B C)
- armenian (Ա Բ Գ)
- georgian (ა ბ გ)
- lower-alpha (a b c)
- upper-alpha (A B C)








Horizontal Line

The ordinary but ubiquitous horizontal line follows; use it to separate sections of content vertically:


Table

Use a table only when you have tabular data to display. Tabular data generally refers to data requiring columns and rows.

Error Code Description
AUTHENTICATION_DISABLED The requested authentication provider is disabled for this Firebase application.
EMAIL_TAKEN The new user account cannot be created because the specified email address is already in use.
INVALID_ARGUMENTS The specified credentials are malformed or incomplete. Please refer to the error message, error details, and Firebase documentation for the required arguments for authenticating with this provider.
Property

Addition

Multiplication
Associative ( a + b ) + c = a + ( b + c ) ( ab ) c = a ( bc )
Commutative a + b = b + a ab = ba
Identity a + 0 = a = 0 + a a ∙ 1 = a = 1 ∙ a
Inverse a + ( −a ) = 0 = ( −a ) + a a ∙ 1 / a = 1 = 1 / a ∙ a, if a ≠ 0
Distributive a ( b + c ) = ab + ac and ab + ac = a ( b + c )

Math Symbols

If you are familiar with LaTex, you can use it to add math symbols to your course. In fact, you can write an entire post in just LaTex.

[latexpage]
At first, we sample $f(x)$ in the $N$ ($N$ is odd) equidistant points around $x^*$:

\begin{equation} f_k = f(x_k),: x_k = x^*+kh,: k=-\frac{N-1}{2},\dots,\frac{N-1}{2} \end{equation}
where $h$ is some step.
Then we interpolate points ${(x_k,f_k)}$ by polynomial
\begin{equation} \label{eq:poly}P_{N-1}(x)=\sum_{j=0}^{N-1}{a_jx^j}\end{equation}
Its coefficients ${a_j}$ are found as a solution of system of linear equations:
\begin{equation} \label{eq:sys}
\left{ P_{N-1}(x_k) = f_k\right},\quad k=-\frac{N-1}{2},\dots,\frac{N-1}{2}
\end{equation}
Here are references to existing equations: (\ref{eq:poly}) (\ref{eq:sys}).
Here is reference to non-existing equation (\ref{eq:unknown}).

\begin{equation}
\quicklatex{color="#00ff00" size=25}
\boxed{f(x)=\int_1^{\infty}\frac{1}{x^2}\,\mathrm{d}x=1}
\end{equation}

These are the basic example of Math plugin. Enjoy !!