Welcome to the Tutorial Page!

How to make a good looking website?

The very first thing that comes to your mind is how do websites even work?

The answer is not very hard, there are mainly three components to a basic website that does not have a server-side functionality they are HTML, CSS and JavaScript.

The second part is choosing a Front-End Framework.

But the question is what really is a framework? The framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.
There are dozens of frameworks out there namely Bootstrap, SemanticUI, Foundation, Materialize, VueJS, Material UI, React, Pure, Skeleton, Bulma and many more!
But we will choose Bootstrap and SemanticUI for the tutorial since they are one of the most popular Front-End frameworks in today's date and are used by most of the companies.
The next thing we need to choose is a JavaScipt framework for making our website functional. JavaScipt frameworks are nothing else but pre-defined JavaScipt code within functions which saves a lot of typing and helps to keep the code clean. jQuery is one of the most popular frameworks for JavaScipt and which is the main reason we are going to use jQuery for the tutorial.

The third part is choosing your text editor or IDE

What is an IDE? The full form for IDE is Integrated Development Environment, which plays a very important role in making a website because that is where you write all of your code that is HTML, CSS, etc. so it is important that you choose the right IDE for your projects. There are many text-editor/IDEs in the market namely ATOM, SublimeText, etc. but for this tutorial we are going to choose ATOM because of it's popularity and ease of use.

How to add images to your website?

Images play a very important role in building a website and it seems to be a really complex process to add them to your webpage but it really isn't that hard! W3Schools has a really good simulator online with which you can easily learn how to add images with just one line of code!

Try on W3Schools!

How to Style your images?

There are several ways you can style your images. For example: resizing them, re-shaping them, etc.
W3Schools has a really good simulator online with which you can easily learn how to manipulate images with just one line of code!

Try on W3Schools!

How to add buttons to your Website?

Buttons play a very important role on a website and one should know how to add a button to their website since it isn't that hard to add buttons and link them with a certain functionality.
W3Schools has a really good simulator online with which you can easily learn how to manipulate images with just one line of code!

Try on W3Schools!

But these HTML buttons are not very stylish and look boring then how can we make them stylish?
That's when the opensource frameworks come in handy! All you need to do is link the CDN(Content Delivery Network) Link to your HTML and you're set!
You can find these links either on the mainpages of frameworks or there are third party websites where you can also find them!

Bootstrap buttons

Bootstrap has huge collection of stylish buttons and how you can impmelent them on your webpage! Click on the button below to check them out!

Try on Bootstrap!

Bootstrap Jumbotron

Bootstrap Jumbotron is a predefined class in bootstrap library and can be really hepful in designing a cool looking website!
Jumbotron is a very simple and minimal looking style for a basic website. Be sure to check it out!

Try on Bootstrap!

How to add functionality to your website?

Javascript (JS) is a scripting language, primarily used on the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code. JavaScript is an interpreted language. Thus, it doesn't need to be compiled. JavaScript renders web pages in an interactive and dynamic fashion.

With the help of JavaScipt you can control different elements of your HTML page through the concept of DOM(Document Object Model) you can select elements or classes or IDs using JavaScipt selector method.

jQuery a JS framework which is written in JavaScript which specializes in selecting and modifying HTML elements with just a '$' or a word 'jQuery' instead of typing the traditional JavaScipt methods like 'getElementByID' or 'getElementByClass'

Heres a small code for comparison of what the actual difference is between js and jQuery

If you closely look inside the script tag you can clearly see how the function names are being replaced by '$' which would not be noticable for the small piece of code but what if you are writing 1000 functions for a certain website at that time this would make a huge difference and the code written with the help if jQuery would be much easier to write and understand.

Here are a few examples you can try for jQuery fadein() fadeOut() methods on W3Schools. Cick on the button to redirect to the website!

Try on W3Schools!

Backend Framework - Node.JS and Express.JS

We used Node.js with Express.js framework to create the backend for our project that allows us to call an api from OBMD according to our query string.
Here is the step-by-step tutorial on how to create the backend for this application.

Step 1: Installing the Dependencies

Using npm, install the dependencies express, ejs and request(for api calling)

  "dependencies": {
    "ejs": "^2.7.2",
    "express": "^4.17.1",
    "request": "^2.88.0"
  }

Step 2: Creating an App.js or index.js file

In you app.js file, add the express framework to your project. Also add the path to the public directory and set the view engine to ejs (optional)

  // var app = require("express")();
  var express = require('express');
  var app = express();
  var request = require("request");

  app.use(express.static(__dirname + '/public'));
  app.set("view engine", "ejs");

Step 3: Set the homepage route using GET method

Render the searchPage.ejs file for your homepage by using GET method as your route


        app.get("/",function (req,res) {
            res.render("searchPage");
        });

Step 4: Calling an API

Using the query from the searchPage.ejs, call an api and render it to the displayPage.ejs


  app.get("/results", function (req, response) {
      var searchData = req.query.name;
      request("http://www.omdbapi.com/?s="+searchData+"&apikey=thewdb", function (error,res,body) {
          if(!error && res.statusCode === 200) {
              var data = JSON.parse(body);
              if ('Error' in data){
                  response.render("errorPage")
              } else {
                  response.render("displayPage", {data: data})
              }
          }
      })
  });

Step 5: Setting up your local server

This app starts a server and listens on port 3000 for connections


    app.listen(3000); // Can add a callback function to check if the server started

CodeBase for the App

App.js File
// var app = require("express")(); var express = require('express'); var app = express(); var request = require("request"); app.set("view engine", "ejs"); app.use(express.static(__dirname + '/public')); app.get("/",function (req,res) { res.render("searchPage"); }); app.get("/results", function (req, response) { var searchData = req.query.name; request("http://www.omdbapi.com/?s="+searchData+"&apikey=thewdb", function (error,res,body) { if(!error && res.statusCode === 200) { var data = JSON.parse(body); if ('Error' in data){ response.render("errorPage") } else { response.render("displayPage", {data: data}) } } }) }); app.listen(3000);