Web Design
How to add Google Map in your Website ?
- Open Google Chrome Browser.
- Types : embed google map in Address Bar.
- Click on First Link. Or Type URL:
- https://www.googlemapsiframegenerator.com/?gclid=CjwKCAjwkY2qBhBDEiwAoQXK5Qsq7MVxyUcn-WDUnKzcxk2vGa7hBcD2-xuTv0MeKZCADNbviKHg0hoCsWkQAvD_BwE
- Search Your Location . Eg :IT Computer Institute Tikapur.
- Click on GET HTML-CODE.
- Click on Copy.
- Click on ok.
- Pate the link on your Webpage Code.
How to create a Facebook Page ?
- Log In your Facebook ID using Username & Passwords . Eg : unitysanjay358@gmail.com (Sanjayncellnum)
- Go to facebook.com/pages/create.
- Enter a Page name and Category. You can also add a Page bio.
- Click Create Page.
- If you want to customize your Page, you can add your bio, a profile picture, and a cover photo.
- Click Done.
How to add Facebook Page on Website ?
- Open your Facebook Account.
- Open your Facebook Page.
- Click on New Tab.
- Type embed Facebook page on browser.
- Click on First Link.
- Go to your Facebook Page.
- Copy the URL of your Facebook page from address bar.
- Paste url on Facebook Page URL.
- Click on Get Code.
- Copy the Step 1 Code & Paste it in just after body tag .
- Copy the Step 2 Code & Paste where you want to show page.
How to add favicons in your webpage ?
- Open MSPaint Program.
- Click on Resize.
- Click on Pixels.
- Remove tick mark from Maintain aspect ratio.
- Type Value . Horizontal: 176 px & Vertical: 176 px.
- Click on ok.
- Click on Save. (note : you can save file format Jpg or Png)
- Choose your Location where you want to save.
- Type the code on Webpage <link rel="icon" type="image/jpg" href="image/favicon.png">
How to Use Font Awesome Icon on HTML Website using CDN ?
- Open Google Chrome Browser.
- Types: font awesome cdn in Address Bar.
- Click on the Second Link.
-Copy the first tag.
- Paste this in the head section of your.
- Type URL: https://cdnjs.com/libraries/font-awesome.
- Type: font on Search box.
- Click on font font-awesome.
- Copy the code and paste the code of the Head Section of the HTML file.
Note: For font-awesome, you have to install Bootstrap on Sublime.
- Go to the Preference menu.
- Click on Package Control:
- Type Install [ Package Control: Install Package]
- After that type Bootstrap 4 Autocomplete.
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
- For icon type fontawesome.com.
- Copy the code & paste the icon code.
How to Use Offline Font Awesome Icon on HTML?
- Open Google Chrome Browser.
- Type URL: https://fontawesome.com in the Address Bar.
- Click on Start for Free.
- Click on Download.
- Click on Free for Web.
- Open Download Folder.
- Extract fontawesome-free-6.4.2-web Rar File.
- Open the css Folder and Copy all.min & fontawesome.min file .
- Create on css Folder & paste : all.min & fontawesome.min file .
- And Copy webfonts Folder & Paste In Your Folder .
- Open Sublime Text Editer :
- Type the Code :
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
- Now you can type icon tag Eg: <i class="fa-solid fa-bars"></i>
How to Use Offline Google Fonts on HTML?
- Open Google Chrome Browser.
- Type URL: https://fonts.google.com/ in the Address Bar.
- Click on any Font.
- Click on Select Thin.
- Copy the Link Code. Eg: https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap
- Copy the Code and create one fonts.css file on sublime.
- Paste it.
- Type the Code: on the Head Section of the HTML
- <link rel="stylesheet" type="text/css" href="css/fonts.css">
How to Make a Responsive Website?
- Open your Code.
- Copy the given Code and paste this code on the Sublime of CSS File.
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
How to Disable CSS Style for any Website?
- Open Google Chrome Browser.
- Type: web developer extension (Chrome Extension)
- Click on the First Link. (Web Developer)
- Click on All to Chrome.
- Click on Add Extension.
- Open Any Website. Eg: https://www.nepaltojapan.com
- Click on the Web Developer Icon.
- Click on CSS Tab.
- Click on Disable All Styles .
How to Copy Code for any Website ?
- Open Google Chrome Browser.
- Type: save all resources (Chrome Extension)
- Click on the First Link. (Save All Resources)
- Click on All to Chrome.
- Click on Add Extension.
- Open Any Website . Eg: https://www.nepaltojapan.com
- Right-click on it and click on Inspect.
- Click on the More Tab.
- Click on ResourceSaver .
- Tick mark on All and click on Save All Resource.
- Finally, the Code is downloaded in Rar File.
- We can exptact rar file & we can edit.
How to protect Website Content from Copy Paste ?
- Open your Code in Sublime Text Editor .
- Type the code in Open html tag : <html lang="en-US" oncontextmenu="return false">
How to disable selection of the text on webpage using HTML & CSS ?
- Give the id="text" to the tag you want to disable selection of text.
id="text" Eg: <p id="text"> Here <p/>
- Type the code is CSS
Eg:
#text {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
}