Building simple responsive web page using Bootstrap on Azure

AsSalam and hi all,

Here is the #3 tutorial relates to Azure. In this tutorial, we will build a simple responsive web page using Bootstrap on our Azure hosting. For today’s activity, I do while listening to one of my fav songs, Turun Awan.

  • Make sure you select the correct account and enter the correct password.
  • Once login in, click on the Portal link.

  • Notice you might already have an App Service ready from our #2 tutorial activity.
  • Click on your App Service.

  • Next, click on Deployment Center. We are going to use FTP to upload some files.

  • Select FTP and click on a Dashboard button.

  • You may copy detail FTP link, username and password.

  • Open your FTP application, for example, FileZilla and enter the Host, username, and password, then click the Quickconnect button.

  • Then, we need to get our HTML code ready.
  • Open your text editor, for example, Notepad or Notepad++ and write code below.
  • Save as index.html

  • Once saved, upload the index.html into the root folder.
  • You can simply drag and drop the file to upload.

  • Open your web page and refresh it.
  • You should get something like this.

  • Now that you already have a webpage online. Next, we will use Bootstrap to give some layout design and make it responsive.
  • Visit Bootstrap webpage ( https://getbootstrap.com/ )

  • Scroll down a bit and you will see BootstrapCDN code for CSS and JS.
  • Copy both section code.

  • In this tutorial, we plan to design a layout as below.

  • Paste the CSS and JS code in the header section as below.
  • Then, write the rest of the code as shown.
  • Notice that we use the class from Bootstrap.
    • Line 4: link to Bootstrap CCS
    • Line 6 – 8: link to Bootstrap JS
    • Line 12: for section A
    • Line 16: for section B
    • Line 20: for section C, D and E
    • Line 25: for section F

  • Save the code and upload it. Replace the existing file online.
  • Then, refresh your webpage.
  • Tadaaaaa….easy rite?

  • It is responsive, you may resize your browser windows or open via your mobile devices.

 

Alright, that simple and basic. Just to demonstrate how easy to use Bootstrap for your webpage layout design. You should try and explore more layout classes available and try to design a much beautiful webpage design as you can. In the next tutorial, we will try to pull out data from SQL databases.

I hope this simple tutorial motivate you guys to try. Good luck and thank you.