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.

• List group item2
• List group item3
• List group item4


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.



Title goes here

Paragraph content goes here.

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

#### 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


Step 1 instruction

Step 2 instruction

Step 3 instruction

Step 4 instruction



## FAQ List

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

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

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

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”


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"

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

Example 1
Example 2
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

Question 1
Question 2
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).

 This is an a (link) tag.


 This is an a (link) tag.



## 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.

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


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.



Your browser does not support the video tag.



## 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.







## 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

Ordered list1

Ordered list1

Ordered list3

Sub Ordered list1

Sub Ordered list2

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)
- 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:

## Articles in This Series

In case you have to show links to related articles or a series of articles you may use this component. Use class="all-trappings-articles-in-series" at the parent div level.

You may also demarcate the current article in the series by using class="current".

# Articles in this Series

1. Why Is Software Engineer One of the Best Career Choices and Why Now Is Best Time Ever to Become a Programmer
2. Your Purpose for Learning Programming will Determine Which Programming Career Path to Pursue and Whether You will Succeed?
3. Few Students Survive the Programming Training, So Know All the Facts Before You Begin
4. Should You Learn to Code and Do You Have the Capacity to Become a Programmer?
5. The Crucial Factors for Success in Programming
6. Why You Likely Need Your Family Support While You Train to Become an Employable Programmer
7. What Can You Do With Your Programming Skills?
8. Where and How Can You Train to Become a Programmer?
9. What Are the Different Programming Jobs, What Does Each Job Entail, and What is The Average Starting Salary for Each?
10. How To Choose a Programming Academy or Bootcamp?
11. Programming Boot Camps Vs. Accelerated Programming Academies Vs. MOOCs Vs. Computer Science Degree at a University Vs For-Profit Technical Institutes
12. What Are the Secrets to Becoming a Great—Proficient and Confident—Programmer?
13. The Single Biggest Factor That May Derail Your Chances of Becoming a Programmer
14. What Are Some Major Downsides to Working as a Programmer
15. Are You Too Old to Become a Programmer and What Programming Jobs Are Best for People Over 40?
16. Alternative to Programming: High-Paying Non-Programming Technical Careers That Don’t Require a University Degree
17. Overcoming Ageism, Racism, and Sexism, All Rampant in the Tech Industry
18. Planning for a Long-Term Career Beyond Two Years
19. Parents: A Roadmap for Helping Your Kid(s) Pursue a Career in Programming
20. How to Prepare for Programming Job Interviews and Get a High-Paying Programming Job

## Standout Text

In case you need to make some text standout from the rest.

#### You Be the Difference

Humanity needs at least one exceptional—that is, clear, grammatical, comprehensive, engaging, and refined—article on every topic known to humankind. Let your article be the one.

## 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

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^*$:

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