Only consider properties not the values as they are taken at random in all the technologies written here such as: html, css, js and many more.



Read this unique and amazing blog to know these useful things



80% results come from 20% things in full stack development too.

Flow of this blog:

Html Css Js Php Mysql database Boostrap Jquery

Important Things to know:

As boostrap is the most popular html, css, and js library in the world and used by almost all the developers, used in this blog also and very easy to implement and use.
Visit Official Site:
Boostrap.com

Mysql Database is so popular, easy and comfortable when it comes to running backend along with Php programming language, php has its inbuilt functions of mysqli (especially designed for working with mysql).
Examples:
  • mysqli_connect()
  • mysqli_close()
  • mysqli_query()
  • mysqli_fetch_assoc()
  • mysqli_num_rows()

and much more.

Visit official website of mysql:
mysql.com

These are the only things which used mostly, and in fact this is it, rest of all things are frameworks and libraries like: anguar, view, react, node (backend), and many css frameworks but not popular as like bootstrap (written here) are talwind css , materialize css (developed by google team), foundation css, skeleton css etc. and not so much popular.

The answer is jquery have so much plugins which anyone can use and some of functions which are worth learning.
Visit Official Site:
jquery.com



So, this blog is going to be big and worth reading and i hope and assume you have understood the flow and how it is going to be?

For More Detail go to About



So, the conclusion by using 80/20 principle:


HTML

20%

CSS

20%

JAVASCRIPT

20%

PHP

20%

MYSQL

20%

Boostrap

20%

Jquery

20%

Web Development:

80%

1. Html 20% things


Tags:

  • <pre> tag
  • <p> tag
  • <span> tag
  • <div> tag
  • <h1><h2><h3><h4><h5><h6> tags
  • <object> tag
  • <embed> tag
  • <video> tag
  • <iframe> tag
  • <img> tag
  • <figure> tag
  • <figcaption> tag
  • <a> tag
  • <form> tag
  • <address> tag
  • <input> tag
  • <select> tag
  • <input> tag
  • <optgroup> tag
  • <option> tag
  • <hr> tag
  • <nav> tag (just like <div>tag )
  • <main> tag (just like <div>tag )
  • <footer> tag (just like <div>tag )
  • <header> tag (just like <div>tag )
  • <marquee> tag
  • <br> tag
  • <audio> tag
  • <u> tag (for underlining)
  • <b> tag (for font-weight: bold;)
  • <code> tag
  • <i> tag (for making font-style: italic;)
  • <ul> tag
  • <ol> tag
  • <li> tag


    • These are just 20% tags which are used by developers 80%.



2. Css 20% things


Properties: (Read the caution carefully)

    General properties:

  • padding: 3px 5px 10px 3px;
  • margin: 3px 4px 5px 8px;
  • border: 3px solid blue; (border styles include: dotted, dashed, ridge, double,groove etc.)
  • border-radius: 15px;
  • width: 200px;
  • filter: brightness(2); (includes many function such as hue,blur, invert,url,opacity etc.)
  • height: 300px;
  • max-width: 100px;
  • min-width: 50px;
  • max-height: 150px;
  • min-height: 75px;
  • opacity: 0.5px;
  • box-shadow: 2px 3px 4px 5px #f4b627;
  • position: sticky;
  • display: flex;
  • visibility: visible;

    • font-related properties:

  • font-size: 1.3rem;
  • font-weight: 450;
  • font-style: bold;
  • font-variant: small-caps;

    • background properties

  • background-color: #f4b627;
  • background-image: url('img/coding.jpg');
  • background-repeat: no-repeat;
  • background-attachment: fixed;
  • background-position: cover;
  • background: color image repeat attachment position; (shorthand for all these properties and used widely)

    • text-related properties:

  • color: blue;
  • text-decoration: none;
  • text-transform: capitalize;
  • text-overflow: hidden;
  • line-height: 2;
  • word-spacing: 10px;
  • letter-spacing: 20px;

    • table-related properties:

  • border-collapse: collapse;
  • table-layout: fixed;

    • only useful pseudo-classes properties:

    Pseudo-class Examples
    :active a:active
    :checked input:checked
    :disabled input:disabled
    :root :root
    :target p:target
    :link a:link
    :visited a:visited
    :hover a:hover
    :in-range input:in-range
    :first-child p:first-child
    :last-child p:last-child
    :not(selector) :not(p)
    :nth-child(n) tr:nth-child(2)
    :only-child p:only-child
    :required input:required
    :out-of-range input:out-of-range

    only useful pseudo-elements properties:

    Pseudo-elements Examples
    ::after div::after
    ::before div::before
    ::first-letter p::first-letter (mostly used in newsappers)
    ::first-line p::first-line
    ::selection p::selection, textarea::selection

    transition properties:

  • transition-duration: 2s;
  • transition-property: all;
  • transition-delay: 0.8s;
  • transition-timing-function: linear;
  • transition: property duration timing-function delay; (shorthand for all these properties and used widely)

    • animation properties:

  • animation-name: animate;
  • animation-duration: 3s;
  • animation-iteration-count: infinite;
  • animation-timing-function: ease-in-out;
  • animation-direction: alternate;
  • animation-delay: 1s;
  • animation: name duration timing-function delay iteration-count diretion; (shorthand for all these properties and used widely)

    • grid properties (display: grid;):

  • display: grid;
  • grid-template-columns: repeat(5,minmax(200px, max-content));
  • grid-template-rows: repeat(6,minmax(200px, max-content));
  • grid-gap: 10px 20px; (row and col gap respectively)
  • grid-column: 1/3;
  • grid-row: 1/2;
  • grid-auto-rows: 20px;
  • grid-auto-flows: 30px;
  • justify-items: center (used in parent element and work horizontally)
  • justify-self: end; (used in child element and work horizontally)
  • align-items: center (used in parent element and work vertically)
  • align-self: end; (used in child element and work vertically)
  • justify-content: center; (used in parent element and do track alignment horizontally)
  • align-content: center; (used in parent element and do track alignment vertically)
  • order: center; (higher the order, later it shows up in the container)

    • flex properties (display: flex;):

  • display: flex;
  • flex-direction: column;
  • flex-wrap: nowrap;
  • flex-flow: flex-direction flex-wrap (shorthand for both the above properties)
  • justify-content: center; (horizontally align the items)
  • align-items: center; (vertically align the items)
    • flex-item or child properties (which are used in flex items only):
  • order: 3; (higher the order, later it shows up in the container)
  • flex-grow: 3;
  • flex-shrink: 3;
  • flex-basis: 200px;
  • flex: flex-grow flex-shrink flex-basis; (shorthand for all the above 3 properties)
  • align-self: center;

    • These are the properties which are used by 80% times.