In this tutorial, we will build from scratch responsive website template using Bootstrap 4. There are 8 sections for this website template:

Part 1: Setup Website Structure
Part 2: Create Preloader for CocaAgency website
Part 3: Create Home section
Part 4: Create About Us Section
Part 5: Create Team Section
Part 6: Create Our Service Section
Part 7: Create Price Section
Part 8: Create Contact Section

Let’s start

Part 1: Setup Website Structure

Go to Desktop or any folder in your computer, create project folder name “Agency

Now, we will use Text Editor to open these folders and files, you can use Bracket Text Editor (Free), or Sublime (Trial), or Atom  (Free), or Visual Studio (Free), … but in this tutorial I use Bracket Text Editor.

Open Bracket, go to File -> Open Folder -> select Agency and hit Select Folder. After that you will see Agency on the left panel

  1. Right click on left panel select New Folder, and name it “css“, open css and right click select New File and name it “style.css
  2. Right click again in Agency folder, create second folder “js“, open js and right click select New File and name it “script.js
  3. Right click in Agency, create third folder called “img“, this folder will store all images for our website.
  4. Under Agency, right click and select New File, name it “index.html

At the end, on the left panel you will see all the folders and files as this:

Agency

  • css
    • style.css
  • js
    • script.js
  • img
  • index.html

Now, click on index.html and typing the following code

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Campatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Agency Website</title>
<!– Favicon –>
<link rel=”shortcut icon” href=”img/favicon/favicon.ico”>
</head>
<body>
<h1>Welcome to Agency Website<h1>
</body>
</html>

Then save it, and click on the Live Server icon (as shown in the picture) to view the website that we have so far

live server
Add jquery into our website

Go to jquery.com and hit Download button, then click on Download the uncompressed, development jQuery 3.3.1

Extract the Zip file, name it as jquery.js, copy jquery.js file and paste into js folder

Next, we need to add call jquery in index.html file, and remember jquery library have to add above of all custom jquery code

Our index.html will have all the code as the following

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Campatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Agency Website</title>
<!– Favicon –>
<link rel=”shortcut icon” href=”img/favicon/favicon.ico”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<h1>Welcome to Agency website</h1>

<!– Jquery Library –>
<script scr=”js/jquery.js”></script>
<!– Custom js –>
<script src=”js/script.js”></script>
</body>
</html>

Let continue to add fonts to our website, using this address https://fonts.google.com

Then search for font Roboto, select it, and click on SELECT THIS FONT on the right hand side and click on Family Selected -> Customize

Check on thin 100, light 300, regular 400, medium 500, bold 700

Then click on Embed tab, copy the embed link and paste below favicon link

<link href=”https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700” rel=”stylesheet”>

Then, search for Open Sans and do the same process, and select light 300, regular 400, semi-bold 600, bold 700 and copy embed link and paste under the Roboto font link

<link href=”https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:100,300,400,500,700” rel=”stylesheet”>

Leave a Reply