Downloading the resources

Hello everyone. Welcome.

In this lecture, we are going to download the necessary resources to start our project. These are the essentials to start. And later on, we will be adding new resources when needed.

At first, I am going to create some folders in Rochex folder. And in this folder there will be 3 folders for now. One is CSS which will contain all the CSS files used in this template. One is js which will contain all the javascript files of this project. And the final one for resources which will contain the images and logo. And at last, let’s create an index.html file which will be the main HTML file of the template.

We will create this template based on bootstrap 4. Because it a very popular framework for front end. And it will help us reduce the amount of coding. It will also help us to make the template completely responsive. Although there are some disadvantages of bootstrap also. It’s kind of heavy. So, it makes the webpage a little bit slow. We can use the SCSS version for better performance. But it is not an SCSS course. Maybe at the next course, I will be creating a template with SCSS. But for now we need to add the bootstrap in our project.

Let’s go to the official site of bootstrap.

One quick note here: If you want to submit your template to premium marketplaces, most of them for example Theme forest doesn’t allow CDN or linking to any other online resources. You will need to add them in your project folder.

But in the case of google font, you can add it via CDN or online link. They allow that.

Let’s download the compiled bootstrap.

It has been downloaded. I am going to copy this on the project folder and extract this here.

We need the bootstrap.css and bootstrap.js only. We will choose the minified version because that will make our template faster.

Now I am going to add the css file to our css folder and js file to our js folder.

Next, we need the jquery. Not only because the bootstrap needs jquery to work, but also we will use some jquery functionality in our template.

I am now at the official jquery website to grab the codes from here. We will get the minified version. I will copy it from here and in our project folder inside the js folder, lets open a file and name it jquery.js and open it by notepad. And just paste the copied code and save it.

The last thing we will need is font awesome. Because we are going to use it for icons.

Google for font awesome download and you will get this one at first. And we don’t have a premium subscription so I’m going to download the free for web version. Let’s extract it on the css folder.

We only need the css and webfont. We can delete all the rest.

Leave a Reply

Your email address will not be published. Required fields are marked *