In my
previous article, I covered the core part of web application development in depth. Here, I will discuss the complete frontend with the help of Bootstrap, Javascript, Document Object Model(DOM) and jQuery with proper examples. HTML, CSS is the core part of the website, whereas the attractive visuals are done with the help of JavaScript, Bootstrap, and jQuery.
Bootstrap
Bootstrap is a very common framework used for Front-End Development. Every framework contains some qualities like Inversion of Control, Default Behavior, Extensibility, and Non-modifiable Framework Code. Get started with the currently available version from the official link: https://getbootstrap.com/
A key feature of Bootstrap is its default classes. Bootstrap comes with many default classes for forms. Navbars are the Navigational bar that you will often see on the top of the website. The Grid system provides the core mechanism which allows websites to look good across multiple devices of multiple screen sizes. See this image below.
We split the entire screen into 12 available columns.
We can use any combination of numbers that will eventually add up to 12 columns. The grid system call will make use of the class="row".
Inside of a row class, we then have the following format: col-ScreenSize-NumberOfColumns
Inside of a row class, we then have the following format: col-md-6
So, we can define how the columns should be shown when the screen gets resized.
Let's check this Coffee Lover Project with resize and Navbars.
The file is attached to this article.
Outputs
Navbars
Sign In Page
Resizing of Columns with Bootstrap
In the smaller view,
The relevant files are: Bootstrap_project.html and newproject.html
My current live example is https://poshak.online/
JavaScript
JavaScript is a full programming language, meaning unlike HTML or CSS it supports things like arrays, loops, and general logic. We can run JavaScript directly into the browser console or as a full .js script connected t to an HTML file.
It is time to learn about Comparison and Logical Operators with Javascript. These operators allow us to begin to add logic to our Javascript Code.
Control Flow is a fundamental aspect of any full programming language. It allows us to execute code if a certain situation arises. We use it in combination with logical and comparison operators. Loops allow us to automatically repeat blocks of code.
The While Loop will continually execute code as long as a condition remains true.
For Loops allow you to continually execute code a specific number of times.
Javascript has three types of For Loops,
- For - loops through a number of times
- For/In - loops through a JS object
- For/of - used with arrays
Functions will be our main building blocks.
They will allow us to easily reuse code more than once and not constantly repeat ourselves.
Syntax
function name(parameter1, parameter2){
//Code to be executed
}
Arrays will allow us to store various basic data types in a sequence, so we can then later access them as needed.
JS Objects are hash-tables, they store information in a key-value pair. In other languages, this is sometimes also called a dictionary. Unlike an array, a JS Object does NOT retain any order.
The typical JS Object is in the form,
{ key1 : “value one”, key2 : “value two”,...}
You then access values through their corresponding key.
Object methods are essentially functions that are inside of an Object.
DOM
The DOM will allow us to interface our Javascript code to interact with HTML and CSS. Browsers will construct the DOM, which basically means storing all the HTML tags as Javascript objects. This DOM will allow us to use Javascript to interact with the web page. The DOM is enormous, most developers won’t use all the properties. We will cover the common objects used, but be prepared for the unknown!
Here are some important document attributes,
- document.URL
- document.body
- document.head
- document.links
There are many methods for grabbing elements from the DOM,
- document.getElementById()
- document.getElementByClassName()
- document.getElementsByTagName()
- document.querySelector()
- document.querySelectorAll()
DOM Events
We don’t always want to have to specify beforehand how to interact with the DOM. Many times we only want the interaction to occur on a particular event, such as a click or a hover. We achieve this by adding an Event Listener. The javascript will be “listening” for an event to occur and then execute a function when it happens.
Listening for an event looks like this,
- myvariable.addEventListener(event,func);
An example,
- var head = document.querySelector(‘h1’);
- head.addEventListener(“click”,changeColor);
There are many, many possible events,
- Clicks
- Hovers
- Double Clicks
- Drags
- Much More!
Reference Link: https://developer.mozilla.org/en-US/docs/Web/Events
jQuery
jQuery is JavaScript liabrary. It is just a large single .js file that has many pre-built methods and objects that simplify your workflow.
jQuery was created as a way to help simplify interactions with the DOM. One of its main features is the use of $.
So how do we get jQuery? We have two options,
- Link a CDN hosted file (like we did for bootstrap)
- Download the .js file from jQuery’s official website.
That's all about the frontend where I personally created a game project: Connect Four. Just have a glance here.
Result
Summary
These are the basics on front end development for an elegant and stylish website with the Django framework in Python. Check the file attachments and the official websites for Bootstrap and jQuery for better options and useful links. Next we will jump to the Python Backend from scratch with relevant frontend topics.