Search

HTML's Tags

How to Create Animation Effects using pure CSS
Creating animation nowadays is becoming a lot easier than ever. There are many readymade library available to create animation effect. In this article, we will discuss about one of these library. Animate.css is simple one css file library which provides cross-browser animations for any web application. The animate.css useful in home pages, sliders for attention-guiding hints. Animate.css. Installation Install animate.css using npm command. npm install animate.css --save Or simply add the CDN file directly in <head> tag of HTML code. <head>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> Usage After you add the library, just add animate__animated class along with along with any animation name with prefix animate__ to elements which you want to add animation. Example: <h1 class="heading animate__animated animate__bounce">An animated element</h1> You can change animation duration by adding animate__delay-3s class where 3s is 3 seconds time of animation. You can also add the effect to specific class using @keyframes directly to any class. You don't need to add animate__ prefix while adding it to animation. You also need to add animation-duration with it. .heading {     animation: bounce;     animation-duration: 2s; } You can use Javascript code to add sugar with Animate.css library. This will create effect whenever you want any event occurs. const elem = document.querySelector('.header'); elem.classList.add('animate__animated', 'animate__bounce'); Full Example: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Animate.css</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <body>     <div class="text-center mt-5">         <h1 class="header animate__animated">I am dancing!</h1>         <button class="btn btn-primary">Animate</button>     </div>     <script type="text/javascript">         document.querySelector('.btn-primary').addEventListener('click', function() {             const elem = document.querySelector('.header');             elem.classList.add('animate__bounce');             setTimeout(function() {                 const elem = document.querySelector('.header');                 elem.classList.remove('animate__bounce');             }, 1000);         });     </script> </body> </html> This way you can add animation to make your web application more attractive. You can get all animation effect name at here. I hope you liked this article.
Block and Inline elements
Every element in HTML has display level. There are two types of display level which decide how it will display in browser. Block-level elements Inline elements Block-level Elements Block-level elements always occupy full width in the browser. So new elements always starts with new line in browser. Example: <!DOCTYPE html> <html> <head>     <style type="text/css">         p {             background-color: pink;         }     </style> </head> <body>     <p>This is block level element and occupy full width.</p>     <p>This is also block level element and will start on new line.</p> </body> </html> The below is a list of few block-level elements. All headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Paragraph <p> <nav>, <form>, <table> <ul>, <ol>, <li>, <div> etc. Inline elements Inline element doesn't starts from new line. It always start with left side of the document and only takes space as it require. Below in example, span and a elements are inline elements. <!DOCTYPE html> <html> <head>     <style type="text/css">         span {             background-color: pink;         }     </style> </head> <body>     <div>This is block level element and <span>this is inline element.</span> The inline element <a href="#">starts from the left</a> side of element.</div> </body> </html> The below is a list of few inline elements. <span> <a>, <button>, <img>, <input>, <select>, <textarea>, <b>, <i>, <em>, <code>, <strong>  
HTML Country Select Dropdown List
You might need an select drop-down list country with different type of value. Here is all list of countries list. If you need two digit country code list: <select>     <option value="AF">Afghanistan</option>     <option value="AX">Åland Islands</option>     <option value="AL">Albania</option>     <option value="DZ">Algeria</option>     <option value="AS">American Samoa</option>     <option value="AD">Andorra</option>     <option value="AO">Angola</option>     <option value="AI">Anguilla</option>     <option value="AQ">Antarctica</option>     <option value="AG">Antigua and Barbuda</option>     <option value="AR">Argentina</option>     <option value="AM">Armenia</option>     <option value="AW">Aruba</option>     <option value="AU">Australia</option>     <option value="AT">Austria</option>     <option value="AZ">Azerbaijan</option>     <option value="BS">Bahamas</option>     <option value="BH">Bahrain</option>     <option value="BD">Bangladesh</option>     <option value="BB">Barbados</option>     <option value="BY">Belarus</option>     <option value="BE">Belgium</option>     <option value="BZ">Belize</option>     <option value="BJ">Benin</option>     <option value="BM">Bermuda</option>     <option value="BT">Bhutan</option>     <option value="BO">Bolivia, Plurinational State of</option>     <option value="BQ">Bonaire, Sint Eustatius and Saba</option>     <option value="BA">Bosnia and Herzegovina</option>     <option value="BW">Botswana</option>     <option value="BV">Bouvet Island</option>     <option value="BR">Brazil</option>     <option value="IO">British Indian Ocean Territory</option>     <option value="BN">Brunei Darussalam</option>     <option value="BG">Bulgaria</option>     <option value="BF">Burkina Faso</option>     <option value="BI">Burundi</option>     <option value="KH">Cambodia</option>     <option value="CM">Cameroon</option>     <option value="CA">Canada</option>     <option value="CV">Cape Verde</option>     <option value="KY">Cayman Islands</option>     <option value="CF">Central African Republic</option>     <option value="TD">Chad</option>     <option value="CL">Chile</option>     <option value="CN">China</option>     <option value="CX">Christmas Island</option>     <option value="CC">Cocos (Keeling) Islands</option>     <option value="CO">Colombia</option>     <option value="KM">Comoros</option>     <option value="CG">Congo</option>     <option value="CD">Congo, the Democratic Republic of the</option>     <option value="CK">Cook Islands</option>     <option value="CR">Costa Rica</option>     <option value="CI">Côte d'Ivoire</option>     <option value="HR">Croatia</option>     <option value="CU">Cuba</option>     <option value="CW">Curaçao</option>     <option value="CY">Cyprus</option>     <option value="CZ">Czech Republic</option>     <option value="DK">Denmark</option>     <option value="DJ">Djibouti</option>     <option value="DM">Dominica</option>     <option value="DO">Dominican Republic</option>     <option value="EC">Ecuador</option>     <option value="EG">Egypt</option>     <option value="SV">El Salvador</option>     <option value="GQ">Equatorial Guinea</option>     <option value="ER">Eritrea</option>     <option value="EE">Estonia</option>     <option value="ET">Ethiopia</option>     <option value="FK">Falkland Islands (Malvinas)</option>     <option value="FO">Faroe Islands</option>     <option value="FJ">Fiji</option>     <option value="FI">Finland</option>     <option value="FR">France</option>     <option value="GF">French Guiana</option>     <option value="PF">French Polynesia</option>     <option value="TF">French Southern Territories</option>     <option value="GA">Gabon</option>     <option value="GM">Gambia</option>     <option value="GE">Georgia</option>     <option value="DE">Germany</option>     <option value="GH">Ghana</option>     <option value="GI">Gibraltar</option>     <option value="GR">Greece</option>     <option value="GL">Greenland</option>     <option value="GD">Grenada</option>     <option value="GP">Guadeloupe</option>     <option value="GU">Guam</option>     <option value="GT">Guatemala</option>     <option value="GG">Guernsey</option>     <option value="GN">Guinea</option>     <option value="GW">Guinea-Bissau</option>     <option value="GY">Guyana</option>     <option value="HT">Haiti</option>     <option value="HM">Heard Island and McDonald Islands</option>     <option value="VA">Holy See (Vatican City State)</option>     <option value="HN">Honduras</option>     <option value="HK">Hong Kong</option>     <option value="HU">Hungary</option>     <option value="IS">Iceland</option>     <option value="IN">India</option>     <option value="ID">Indonesia</option>     <option value="IR">Iran, Islamic Republic of</option>     <option value="IQ">Iraq</option>     <option value="IE">Ireland</option>     <option value="IM">Isle of Man</option>     <option value="IL">Israel</option>     <option value="IT">Italy</option>     <option value="JM">Jamaica</option>     <option value="JP">Japan</option>     <option value="JE">Jersey</option>     <option value="JO">Jordan</option>     <option value="KZ">Kazakhstan</option>     <option value="KE">Kenya</option>     <option value="KI">Kiribati</option>     <option value="KP">Korea, Democratic People's Republic of</option>     <option value="KR">Korea, Republic of</option>     <option value="KW">Kuwait</option>     <option value="KG">Kyrgyzstan</option>     <option value="LA">Lao People's Democratic Republic</option>     <option value="LV">Latvia</option>     <option value="LB">Lebanon</option>     <option value="LS">Lesotho</option>     <option value="LR">Liberia</option>     <option value="LY">Libya</option>     <option value="LI">Liechtenstein</option>     <option value="LT">Lithuania</option>     <option value="LU">Luxembourg</option>     <option value="MO">Macao</option>     <option value="MK">Macedonia, the former Yugoslav Republic of</option>     <option value="MG">Madagascar</option>     <option value="MW">Malawi</option>     <option value="MY">Malaysia</option>     <option value="MV">Maldives</option>     <option value="ML">Mali</option>     <option value="MT">Malta</option>     <option value="MH">Marshall Islands</option>     <option value="MQ">Martinique</option>     <option value="MR">Mauritania</option>     <option value="MU">Mauritius</option>     <option value="YT">Mayotte</option>     <option value="MX">Mexico</option>     <option value="FM">Micronesia, Federated States of</option>     <option value="MD">Moldova, Republic of</option>     <option value="MC">Monaco</option>     <option value="MN">Mongolia</option>     <option value="ME">Montenegro</option>     <option value="MS">Montserrat</option>     <option value="MA">Morocco</option>     <option value="MZ">Mozambique</option>     <option value="MM">Myanmar</option>     <option value="NA">Namibia</option>     <option value="NR">Nauru</option>     <option value="NP">Nepal</option>     <option value="NL">Netherlands</option>     <option value="NC">New Caledonia</option>     <option value="NZ">New Zealand</option>     <option value="NI">Nicaragua</option>     <option value="NE">Niger</option>     <option value="NG">Nigeria</option>     <option value="NU">Niue</option>     <option value="NF">Norfolk Island</option>     <option value="MP">Northern Mariana Islands</option>     <option value="NO">Norway</option>     <option value="OM">Oman</option>     <option value="PK">Pakistan</option>     <option value="PW">Palau</option>     <option value="PS">Palestinian Territory, Occupied</option>     <option value="PA">Panama</option>     <option value="PG">Papua New Guinea</option>     <option value="PY">Paraguay</option>     <option value="PE">Peru</option>     <option value="PH">Philippines</option>     <option value="PN">Pitcairn</option>     <option value="PL">Poland</option>     <option value="PT">Portugal</option>     <option value="PR">Puerto Rico</option>     <option value="QA">Qatar</option>     <option value="RE">Réunion</option>     <option value="RO">Romania</option>     <option value="RU">Russian Federation</option>     <option value="RW">Rwanda</option>     <option value="BL">Saint Barthélemy</option>     <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>     <option value="KN">Saint Kitts and Nevis</option>     <option value="LC">Saint Lucia</option>     <option value="MF">Saint Martin (French part)</option>     <option value="PM">Saint Pierre and Miquelon</option>     <option value="VC">Saint Vincent and the Grenadines</option>     <option value="WS">Samoa</option>     <option value="SM">San Marino</option>     <option value="ST">Sao Tome and Principe</option>     <option value="SA">Saudi Arabia</option>     <option value="SN">Senegal</option>     <option value="RS">Serbia</option>     <option value="SC">Seychelles</option>     <option value="SL">Sierra Leone</option>     <option value="SG">Singapore</option>     <option value="SX">Sint Maarten (Dutch part)</option>     <option value="SK">Slovakia</option>     <option value="SI">Slovenia</option>     <option value="SB">Solomon Islands</option>     <option value="SO">Somalia</option>     <option value="ZA">South Africa</option>     <option value="GS">South Georgia and the South Sandwich Islands</option>     <option value="SS">South Sudan</option>     <option value="ES">Spain</option>     <option value="LK">Sri Lanka</option>     <option value="SD">Sudan</option>     <option value="SR">Suriname</option>     <option value="SJ">Svalbard and Jan Mayen</option>     <option value="SZ">Swaziland</option>     <option value="SE">Sweden</option>     <option value="CH">Switzerland</option>     <option value="SY">Syrian Arab Republic</option>     <option value="TW">Taiwan, Province of China</option>     <option value="TJ">Tajikistan</option>     <option value="TZ">Tanzania, United Republic of</option>     <option value="TH">Thailand</option>     <option value="TL">Timor-Leste</option>     <option value="TG">Togo</option>     <option value="TK">Tokelau</option>     <option value="TO">Tonga</option>     <option value="TT">Trinidad and Tobago</option>     <option value="TN">Tunisia</option>     <option value="TR">Turkey</option>     <option value="TM">Turkmenistan</option>     <option value="TC">Turks and Caicos Islands</option>     <option value="TV">Tuvalu</option>     <option value="UG">Uganda</option>     <option value="UA">Ukraine</option>     <option value="AE">United Arab Emirates</option>     <option value="GB">United Kingdom</option>     <option value="US">United States</option>     <option value="UM">United States Minor Outlying Islands</option>     <option value="UY">Uruguay</option>     <option value="UZ">Uzbekistan</option>     <option value="VU">Vanuatu</option>     <option value="VE">Venezuela, Bolivarian Republic of</option>     <option value="VN">Viet Nam</option>     <option value="VG">Virgin Islands, British</option>     <option value="VI">Virgin Islands, U.S.</option>     <option value="WF">Wallis and Futuna</option>     <option value="EH">Western Sahara</option>     <option value="YE">Yemen</option>     <option value="ZM">Zambia</option>     <option value="ZW">Zimbabwe</option> </select> Same way, if you want 3 digit country code instead of two digit, here is the list. <select>     <option value="AFG">Afghanistan</option>     <option value="ALA">Åland Islands</option>     <option value="ALB">Albania</option>     <option value="DZA">Algeria</option>     <option value="ASM">American Samoa</option>     <option value="AND">Andorra</option>     <option value="AGO">Angola</option>     <option value="AIA">Anguilla</option>     <option value="ATA">Antarctica</option>     <option value="ATG">Antigua and Barbuda</option>     <option value="ARG">Argentina</option>     <option value="ARM">Armenia</option>     <option value="ABW">Aruba</option>     <option value="AUS">Australia</option>     <option value="AUT">Austria</option>     <option value="AZE">Azerbaijan</option>     <option value="BHS">Bahamas</option>     <option value="BHR">Bahrain</option>     <option value="BGD">Bangladesh</option>     <option value="BRB">Barbados</option>     <option value="BLR">Belarus</option>     <option value="BEL">Belgium</option>     <option value="BLZ">Belize</option>     <option value="BEN">Benin</option>     <option value="BMU">Bermuda</option>     <option value="BTN">Bhutan</option>     <option value="BOL">Bolivia, Plurinational State of</option>     <option value="BES">Bonaire, Sint Eustatius and Saba</option>     <option value="BIH">Bosnia and Herzegovina</option>     <option value="BWA">Botswana</option>     <option value="BVT">Bouvet Island</option>     <option value="BRA">Brazil</option>     <option value="IOT">British Indian Ocean Territory</option>     <option value="BRN">Brunei Darussalam</option>     <option value="BGR">Bulgaria</option>     <option value="BFA">Burkina Faso</option>     <option value="BDI">Burundi</option>     <option value="KHM">Cambodia</option>     <option value="CMR">Cameroon</option>     <option value="CAN">Canada</option>     <option value="CPV">Cape Verde</option>     <option value="CYM">Cayman Islands</option>     <option value="CAF">Central African Republic</option>     <option value="TCD">Chad</option>     <option value="CHL">Chile</option>     <option value="CHN">China</option>     <option value="CXR">Christmas Island</option>     <option value="CCK">Cocos (Keeling) Islands</option>     <option value="COL">Colombia</option>     <option value="COM">Comoros</option>     <option value="COG">Congo</option>     <option value="COD">Congo, the Democratic Republic of the</option>     <option value="COK">Cook Islands</option>     <option value="CRI">Costa Rica</option>     <option value="CIV">Côte d'Ivoire</option>     <option value="HRV">Croatia</option>     <option value="CUB">Cuba</option>     <option value="CUW">Curaçao</option>     <option value="CYP">Cyprus</option>     <option value="CZE">Czech Republic</option>     <option value="DNK">Denmark</option>     <option value="DJI">Djibouti</option>     <option value="DMA">Dominica</option>     <option value="DOM">Dominican Republic</option>     <option value="ECU">Ecuador</option>     <option value="EGY">Egypt</option>     <option value="SLV">El Salvador</option>     <option value="GNQ">Equatorial Guinea</option>     <option value="ERI">Eritrea</option>     <option value="EST">Estonia</option>     <option value="ETH">Ethiopia</option>     <option value="FLK">Falkland Islands (Malvinas)</option>     <option value="FRO">Faroe Islands</option>     <option value="FJI">Fiji</option>     <option value="FIN">Finland</option>     <option value="FRA">France</option>     <option value="GUF">French Guiana</option>     <option value="PYF">French Polynesia</option>     <option value="ATF">French Southern Territories</option>     <option value="GAB">Gabon</option>     <option value="GMB">Gambia</option>     <option value="GEO">Georgia</option>     <option value="DEU">Germany</option>     <option value="GHA">Ghana</option>     <option value="GIB">Gibraltar</option>     <option value="GRC">Greece</option>     <option value="GRL">Greenland</option>     <option value="GRD">Grenada</option>     <option value="GLP">Guadeloupe</option>     <option value="GUM">Guam</option>     <option value="GTM">Guatemala</option>     <option value="GGY">Guernsey</option>     <option value="GIN">Guinea</option>     <option value="GNB">Guinea-Bissau</option>     <option value="GUY">Guyana</option>     <option value="HTI">Haiti</option>     <option value="HMD">Heard Island and McDonald Islands</option>     <option value="VAT">Holy See (Vatican City State)</option>     <option value="HND">Honduras</option>     <option value="HKG">Hong Kong</option>     <option value="HUN">Hungary</option>     <option value="ISL">Iceland</option>     <option value="IND">India</option>     <option value="IDN">Indonesia</option>     <option value="IRN">Iran, Islamic Republic of</option>     <option value="IRQ">Iraq</option>     <option value="IRL">Ireland</option>     <option value="IMN">Isle of Man</option>     <option value="ISR">Israel</option>     <option value="ITA">Italy</option>     <option value="JAM">Jamaica</option>     <option value="JPN">Japan</option>     <option value="JEY">Jersey</option>     <option value="JOR">Jordan</option>     <option value="KAZ">Kazakhstan</option>     <option value="KEN">Kenya</option>     <option value="KIR">Kiribati</option>     <option value="PRK">Korea, Democratic People's Republic of</option>     <option value="KOR">Korea, Republic of</option>     <option value="KWT">Kuwait</option>     <option value="KGZ">Kyrgyzstan</option>     <option value="LAO">Lao People's Democratic Republic</option>     <option value="LVA">Latvia</option>     <option value="LBN">Lebanon</option>     <option value="LSO">Lesotho</option>     <option value="LBR">Liberia</option>     <option value="LBY">Libya</option>     <option value="LIE">Liechtenstein</option>     <option value="LTU">Lithuania</option>     <option value="LUX">Luxembourg</option>     <option value="MAC">Macao</option>     <option value="MKD">Macedonia, the former Yugoslav Republic of</option>     <option value="MDG">Madagascar</option>     <option value="MWI">Malawi</option>     <option value="MYS">Malaysia</option>     <option value="MDV">Maldives</option>     <option value="MLI">Mali</option>     <option value="MLT">Malta</option>     <option value="MHL">Marshall Islands</option>     <option value="MTQ">Martinique</option>     <option value="MRT">Mauritania</option>     <option value="MUS">Mauritius</option>     <option value="MYT">Mayotte</option>     <option value="MEX">Mexico</option>     <option value="FSM">Micronesia, Federated States of</option>     <option value="MDA">Moldova, Republic of</option>     <option value="MCO">Monaco</option>     <option value="MNG">Mongolia</option>     <option value="MNE">Montenegro</option>     <option value="MSR">Montserrat</option>     <option value="MAR">Morocco</option>     <option value="MOZ">Mozambique</option>     <option value="MMR">Myanmar</option>     <option value="NAM">Namibia</option>     <option value="NRU">Nauru</option>     <option value="NPL">Nepal</option>     <option value="NLD">Netherlands</option>     <option value="NCL">New Caledonia</option>     <option value="NZL">New Zealand</option>     <option value="NIC">Nicaragua</option>     <option value="NER">Niger</option>     <option value="NGA">Nigeria</option>     <option value="NIU">Niue</option>     <option value="NFK">Norfolk Island</option>     <option value="MNP">Northern Mariana Islands</option>     <option value="NOR">Norway</option>     <option value="OMN">Oman</option>     <option value="PAK">Pakistan</option>     <option value="PLW">Palau</option>     <option value="PSE">Palestinian Territory, Occupied</option>     <option value="PAN">Panama</option>     <option value="PNG">Papua New Guinea</option>     <option value="PRY">Paraguay</option>     <option value="PER">Peru</option>     <option value="PHL">Philippines</option>     <option value="PCN">Pitcairn</option>     <option value="POL">Poland</option>     <option value="PRT">Portugal</option>     <option value="PRI">Puerto Rico</option>     <option value="QAT">Qatar</option>     <option value="REU">Réunion</option>     <option value="ROU">Romania</option>     <option value="RUS">Russian Federation</option>     <option value="RWA">Rwanda</option>     <option value="BLM">Saint Barthélemy</option>     <option value="SHN">Saint Helena, Ascension and Tristan da Cunha</option>     <option value="KNA">Saint Kitts and Nevis</option>     <option value="LCA">Saint Lucia</option>     <option value="MAF">Saint Martin (French part)</option>     <option value="SPM">Saint Pierre and Miquelon</option>     <option value="VCT">Saint Vincent and the Grenadines</option>     <option value="WSM">Samoa</option>     <option value="SMR">San Marino</option>     <option value="STP">Sao Tome and Principe</option>     <option value="SAU">Saudi Arabia</option>     <option value="SEN">Senegal</option>     <option value="SRB">Serbia</option>     <option value="SYC">Seychelles</option>     <option value="SLE">Sierra Leone</option>     <option value="SGP">Singapore</option>     <option value="SXM">Sint Maarten (Dutch part)</option>     <option value="SVK">Slovakia</option>     <option value="SVN">Slovenia</option>     <option value="SLB">Solomon Islands</option>     <option value="SOM">Somalia</option>     <option value="ZAF">South Africa</option>     <option value="SGS">South Georgia and the South Sandwich Islands</option>     <option value="SSD">South Sudan</option>     <option value="ESP">Spain</option>     <option value="LKA">Sri Lanka</option>     <option value="SDN">Sudan</option>     <option value="SUR">Suriname</option>     <option value="SJM">Svalbard and Jan Mayen</option>     <option value="SWZ">Swaziland</option>     <option value="SWE">Sweden</option>     <option value="CHE">Switzerland</option>     <option value="SYR">Syrian Arab Republic</option>     <option value="TWN">Taiwan, Province of China</option>     <option value="TJK">Tajikistan</option>     <option value="TZA">Tanzania, United Republic of</option>     <option value="THA">Thailand</option>     <option value="TLS">Timor-Leste</option>     <option value="TGO">Togo</option>     <option value="TKL">Tokelau</option>     <option value="TON">Tonga</option>     <option value="TTO">Trinidad and Tobago</option>     <option value="TUN">Tunisia</option>     <option value="TUR">Turkey</option>     <option value="TKM">Turkmenistan</option>     <option value="TCA">Turks and Caicos Islands</option>     <option value="TUV">Tuvalu</option>     <option value="UGA">Uganda</option>     <option value="UKR">Ukraine</option>     <option value="ARE">United Arab Emirates</option>     <option value="GBR">United Kingdom</option>     <option value="USA">United States</option>     <option value="UMI">United States Minor Outlying Islands</option>     <option value="URY">Uruguay</option>     <option value="UZB">Uzbekistan</option>     <option value="VUT">Vanuatu</option>     <option value="VEN">Venezuela, Bolivarian Republic of</option>     <option value="VNM">Viet Nam</option>     <option value="VGB">Virgin Islands, British</option>     <option value="VIR">Virgin Islands, U.S.</option>     <option value="WLF">Wallis and Futuna</option>     <option value="ESH">Western Sahara</option>     <option value="YEM">Yemen</option>     <option value="ZMB">Zambia</option>     <option value="ZWE">Zimbabwe</option> </select> And in case if you want international phone code, here is the list. <select>     <option value="213">Algeria (+213)</option>     <option value="376">Andorra (+376)</option>     <option value="244">Angola (+244)</option>     <option value="1264">Anguilla (+1264)</option>     <option value="1268">Antigua & Barbuda (+1268)</option>     <option value="54">Argentina (+54)</option>     <option value="374">Armenia (+374)</option>     <option value="297">Aruba (+297)</option>     <option value="61">Australia (+61)</option>     <option value="43">Austria (+43)</option>     <option value="994">Azerbaijan (+994)</option>     <option value="1242">Bahamas (+1242)</option>     <option value="973">Bahrain (+973)</option>     <option value="880">Bangladesh (+880)</option>     <option value="1246">Barbados (+1246)</option>     <option value="375">Belarus (+375)</option>     <option value="32">Belgium (+32)</option>     <option value="501">Belize (+501)</option>     <option value="229">Benin (+229)</option>     <option value="1441">Bermuda (+1441)</option>     <option value="975">Bhutan (+975)</option>     <option value="591">Bolivia (+591)</option>     <option value="387">Bosnia Herzegovina (+387)</option>     <option value="267">Botswana (+267)</option>     <option value="55">Brazil (+55)</option>     <option value="673">Brunei (+673)</option>     <option value="359">Bulgaria (+359)</option>     <option value="226">Burkina Faso (+226)</option>     <option value="257">Burundi (+257)</option>     <option value="855">Cambodia (+855)</option>     <option value="237">Cameroon (+237)</option>     <option value="1">Canada (+1)</option>     <option value="238">Cape Verde Islands (+238)</option>     <option value="1345">Cayman Islands (+1345)</option>     <option value="236">Central African Republic (+236)</option>     <option value="56">Chile (+56)</option>     <option value="86">China (+86)</option>     <option value="57">Colombia (+57)</option>     <option value="269">Comoros (+269)</option>     <option value="242">Congo (+242)</option>     <option value="682">Cook Islands (+682)</option>     <option value="506">Costa Rica (+506)</option>     <option value="385">Croatia (+385)</option>     <option value="53">Cuba (+53)</option>     <option value="90">Cyprus - North (+90)</option>     <option value="357">Cyprus - South (+357)</option>     <option value="420">Czech Republic (+420)</option>     <option value="45">Denmark (+45)</option>     <option value="253">Djibouti (+253)</option>     <option value="1809">Dominica (+1809)</option>     <option value="1809">Dominican Republic (+1809)</option>     <option value="593">Ecuador (+593)</option>     <option value="20">Egypt (+20)</option>     <option value="503">El Salvador (+503)</option>     <option value="240">Equatorial Guinea (+240)</option>     <option value="291">Eritrea (+291)</option>     <option value="372">Estonia (+372)</option>     <option value="251">Ethiopia (+251)</option>     <option value="500">Falkland Islands (+500)</option>     <option value="298">Faroe Islands (+298)</option>     <option value="679">Fiji (+679)</option>     <option value="358">Finland (+358)</option>     <option value="33">France (+33)</option>     <option value="594">French Guiana (+594)</option>     <option value="689">French Polynesia (+689)</option>     <option value="241">Gabon (+241)</option>     <option value="220">Gambia (+220)</option>     <option value="7880">Georgia (+7880)</option>     <option value="49">Germany (+49)</option>     <option value="233">Ghana (+233)</option>     <option value="350">Gibraltar (+350)</option>     <option value="30">Greece (+30)</option>     <option value="299">Greenland (+299)</option>     <option value="1473">Grenada (+1473)</option>     <option value="590">Guadeloupe (+590)</option>     <option value="671">Guam (+671)</option>     <option value="502">Guatemala (+502)</option>     <option value="224">Guinea (+224)</option>     <option value="245">Guinea - Bissau (+245)</option>     <option value="592">Guyana (+592)</option>     <option value="509">Haiti (+509)</option>     <option value="504">Honduras (+504)</option>     <option value="852">Hong Kong (+852)</option>     <option value="36">Hungary (+36)</option>     <option value="354">Iceland (+354)</option>     <option value="91">India (+91)</option>     <option value="62">Indonesia (+62)</option>     <option value="964">Iraq (+964)</option>     <option value="98">Iran (+98)</option>     <option value="353">Ireland (+353)</option>     <option value="972">Israel (+972)</option>     <option value="39">Italy (+39)</option>     <option value="1876">Jamaica (+1876)</option>     <option value="81">Japan (+81)</option>     <option value="962">Jordan (+962)</option>     <option value="7">Kazakhstan (+7)</option>     <option value="254">Kenya (+254)</option>     <option value="686">Kiribati (+686)</option>     <option value="850">Korea - North (+850)</option>     <option value="82">Korea - South (+82)</option>     <option value="965">Kuwait (+965)</option>     <option value="996">Kyrgyzstan (+996)</option>     <option value="856">Laos (+856)</option>     <option value="371">Latvia (+371)</option>     <option value="961">Lebanon (+961)</option>     <option value="266">Lesotho (+266)</option>     <option value="231">Liberia (+231)</option>     <option value="218">Libya (+218)</option>     <option value="417">Liechtenstein (+417)</option>     <option value="370">Lithuania (+370)</option>     <option value="352">Luxembourg (+352)</option>     <option value="853">Macao (+853)</option>     <option value="389">Macedonia (+389)</option>     <option value="261">Madagascar (+261)</option>     <option value="265">Malawi (+265)</option>     <option value="60">Malaysia (+60)</option>     <option value="960">Maldives (+960)</option>     <option value="223">Mali (+223)</option>     <option value="356">Malta (+356)</option>     <option value="692">Marshall Islands (+692)</option>     <option value="596">Martinique (+596)</option>     <option value="222">Mauritania (+222)</option>     <option value="269">Mayotte (+269)</option>     <option value="52">Mexico (+52)</option>     <option value="691">Micronesia (+691)</option>     <option value="373">Moldova (+373)</option>     <option value="377">Monaco (+377)</option>     <option value="976">Mongolia (+976)</option>     <option value="1664">Montserrat (+1664)</option>     <option value="212">Morocco (+212)</option>     <option value="258">Mozambique (+258)</option>     <option value="95">Myanmar (+95)</option>     <option value="264">Namibia (+264)</option>     <option value="674">Nauru (+674)</option>     <option value="977">Nepal (+977)</option>     <option value="31">Netherlands (+31)</option>     <option value="687">New Caledonia (+687)</option>     <option value="64">New Zealand (+64)</option>     <option value="505">Nicaragua (+505)</option>     <option value="227">Niger (+227)</option>     <option value="234">Nigeria (+234)</option>     <option value="683">Niue (+683)</option>     <option value="672">Norfolk Islands (+672)</option>     <option value="670">Northern Marianas (+670)</option>     <option value="47">Norway (+47)</option>     <option value="968">Oman (+968)</option>     <option value="92">Pakistan (+92)</option>     <option value="680">Palau (+680)</option>     <option value="507">Panama (+507)</option>     <option value="675">Papua New Guinea (+675)</option>     <option value="595">Paraguay (+595)</option>     <option value="51">Peru (+51)</option>     <option value="63">Philippines (+63)</option>     <option value="48">Poland (+48)</option>     <option value="351">Portugal (+351)</option>     <option value="1787">Puerto Rico (+1787)</option>     <option value="974">Qatar (+974)</option>     <option value="262">Reunion (+262)</option>     <option value="40">Romania (+40)</option>     <option value="7">Russia (+7)</option>     <option value="250">Rwanda (+250)</option>     <option value="378">San Marino (+378)</option>     <option value="239">Sao Tome & Principe (+239)</option>     <option value="966">Saudi Arabia (+966)</option>     <option value="221">Senegal (+221)</option>     <option value="381">Serbia (+381)</option>     <option value="248">Seychelles (+248)</option>     <option value="232">Sierra Leone (+232)</option>     <option value="65">Singapore (+65)</option>     <option value="421">Slovak Republic (+421)</option>     <option value="386">Slovenia (+386)</option>     <option value="677">Solomon Islands (+677)</option>     <option value="252">Somalia (+252)</option>     <option value="27">South Africa (+27)</option>     <option value="34">Spain (+34)</option>     <option value="94">Sri Lanka (+94)</option>     <option value="290">St. Helena (+290)</option>     <option value="1869">St. Kitts (+1869)</option>     <option value="1758">St. Lucia (+1758)</option>     <option value="597">Suriname (+597)</option>     <option value="249">Sudan (+249)</option>     <option value="268">Swaziland (+268)</option>     <option value="46">Sweden (+46)</option>     <option value="41">Switzerland (+41)</option>     <option value="963">Syria (+963)</option>     <option value="886">Taiwan (+886)</option>     <option value="992">Tajikistan (+992)</option>     <option value="66">Thailand (+66)</option>     <option value="228">Togo (+228)</option>     <option value="676">Tonga (+676)</option>     <option value="1868">Trinidad & Tobago (+1868)</option>     <option value="216">Tunisia (+216)</option>     <option value="90">Turkey (+90)</option>     <option value="993">Turkmenistan (+993)</option>     <option value="1649">Turks & Caicos Islands (+1649)</option>     <option value="688">Tuvalu (+688)</option>     <option value="256">Uganda (+256)</option>     <option value="380">Ukraine (+380)</option>     <option value="971">United Arab Emirates (+971)</option>     <option value="44">United Kingdom (+44)</option>     <option value="1">United States (+1)</option>     <option value="598">Uruguay (+598)</option>     <option value="998">Uzbekistan (+998)</option>     <option value="678">Vanuatu (+678)</option>     <option value="379">Vatican City (+379)</option>     <option value="58">Venezuela (+58)</option>     <option value="84">Vietnam (+84)</option>     <option value="1">Virgin Islands - British (+1)</option>     <option value="1">Virgin Islands - US (+1)</option>     <option value="681">Wallis & Futuna (+681)</option>     <option value="969">Yemen (North)(+969)</option>     <option value="967">Yemen (South)(+967)</option>     <option value="260">Zambia (+260)</option>     <option value="263">Zimbabwe (+263)</option> </select> I hope it will help you.          
What is manifest.json file and how it is useful
The manifest.json is a simple JSON file in your website that tells the browser about your website on user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt. When user installs or bookmark your web application to the homescreen or adds it to an application launcher, manifest.json provides to the browser so that it can treat your website the name, icons, etc. There are then more advanced features that you would need, like being able to indicate the preferred orientation and if you want your app to be fullscreen. The manifest.json file contains details of your website app name, icons it should use, the start_url it should start at when launched, and many other details. Note: W3C mentions manifest.webmanifest file instead of manifest.json but that the actual name are totally irrelevant, as long as you serve it with application/json. However, manifest.json is far more likely to be served with a correct MIME type. To add manifest.json file in your website, first tell the browser about path of the manifest.json file. For that add <link> tag in the <head> tag. href is the location of the manifest.json. <link rel="manifest" href="/manifest.json"> You can add bellow code if your Manifest file is manifest.webmanifest. <link rel="manifest" href="manifest.webmanifest"> Then create manifest.json in the location of the href of the <link> tag. Bellow is the simple example of the manifest.json. {     "short_name": "Laravelcode",     "name": "Laravelcode blogging platform",     "icons": [         {             "src": "/images/icons-128.png",             "type": "image/png",             "sizes": "128x128"         },         {             "src": "/images/icons-192.png",             "type": "image/png",             "sizes": "192x192"         },         {             "src": "/images/icons-512.png",             "type": "image/png",             "sizes": "512x512"         }     ],     "start_url": "/index.html",     "background_color": "#3367D6",     "display": "standalone",     "scope": "/app/",     "theme_color": "#3367D6" } First check if manifest.json is applied in the browser. For that open developer window by pressing shortcut F12. In Application tab, click Manifest option and see if it displays information that you have set. Explanation Let's discuss some of most used options in the manifest.json file. "short_name": "Laravelcode", "name": "Laravelcode blogging platform", "short_name" is the very short name of your web application that is displayed in homescreen or in the menu. "name" is bigger name and alias of your web application that is useful when user search in phone or desktop searchbar. "icons": [     {         "src": "/images/icons-128.png",         "type": "image/png",         "sizes": "128x128"     } ], "icons" option is the logo of your application that will display in the homescreen or the menu. It is a json array of icons object. Every object contains src, sizes and type property You can add different size of your logo and add them in manifest.json file in nested object. It will automatically adds responsive size of icon in different size of the displays. "start_url": "/index.html", "start_url" is the root URL of your web application that will always open first. "display": "standalone", "display" will tell how to display website in the browser. Options are fullscreen, minimul-ui, standalone, or browser. "standalone" will display as normal with statusbar and "fullscreen" will display in fullscreen. "orientation": "landscape" "orientation" will set your application default orientation, when open. "background_color": "#3367D6", "theme_color": "#3367D6" In Android system, Google Chrome and other browsers, "background_color" and "theme_color" will set on splash screen that show while your site is loading. "scope": "/app/", "scope" controls the URLs that navigates all the entry and exit points in your web application. If the user opens that is outside the scope, then it opens in  normal web page inside a browser tab/window. Conclusion The manifest.json file has overcome to add different meta tag for different browsers and helps to sets unique to display in different browsers. There are many other options that you can add in the manifest.json. For full reference, see documents at Google or MDN web docs.