Front End Design

FrontEnd Design

Using MathJax to display Math on your page

Adding MathJax to your web pages is easy to do. If you are using a Content Management System (like Wordpress, Moodle, or Drupal) to generate your web site, there may be a plugin to add MathJax to your site already, e.g., for Wordpress or Drupal. You may need to download or activate the plugin, if one is available.

If you write your own HTML (directly or via a template/theme engine), you can include MathJax by adding this snippet to your page:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

To use pugin you will have to use special notation. Library suggest usage of pre-defind commands to transfer common math notation into visual implementation. Command for the first example looks like this:
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
Commands should be enclosed into special tags:
$$...$$ or\[...\]

The Quadratic Formula

\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

Cauchy's Integral Formula

\[ f(a) = {1}\div{2\pi i} \oint{f(z)}\div{(z-a)}dz \]

Angle Sum Formula for Cosines

\[ \cos(\Theta+\phi)=\cos(\Theta)\cos(\phi)−\sin(\Theta)\sin(\phi) \]

Gauss' Divergence Theorem

\[ \int_D ({ abla\cdot} F)dV=\int_{\partial D} F\cdot ndS \]

Standard Deviation

\[\sigma = \sqrt{ {1}\div{N} \sum_{i=1}^N (x_i -\mu)^2} \]

Custom Code

  • Image Training Vocabulary
    Training new vocabulary online
  • Image Images carousel
    Carousel with parallax
  • Image Info Cards
    Profile and product cards
  • Image Rounded Corners
    Add rounded corners to layers
  • Image Compare Images
    Compare two images
  • Image Images slideshow
    Scalable Images slideshow
  • Image Clip-path
    Animation with clip-paths
  • Image Rotating Heading
    Heading moving in a circle
  • Image Simple Charts
    Simplest Charts Ever
  • Image Curved Divs
    Custom curved divs
  • Image Niper sticks
    Niper Sticks
  • Image Google Charts
    Using Google charts
  • Image Log In Form
    MySQL/PHP authenication
  • Image HTML Post
    Send HTML in you email
  • Image Google Sheets
    Embed Google sheets into web site
  • Image Flip Card
    Flip person or product card
  • Image Banner ads
    Clickable banner ads
  • Image Json+MySql
    Retrieve Data with Json and MySql
  • Image Calculate Route
    Calculate Route Length on Map
  • Image Online quest
    Online language quest
  • Image Scattered text
    Online language quest
  • Image Map with regions
    Interactive map with regions
  • Image Splitted SVG
    Splitted SVG heading
  • Image Translate Page
    Translate page into user language
  • Image Math on Page
    Display math in html