Coding up a Basic web Template Beginners with HTML, CSS, Flexbox and Bootstrap

Hello and welcome to another new episode of Learning Simplified.Now in the preceding tutorial, we can see that so far we have built our template with the aid of pure HTML only. There is no CSS, No CSS style attributes are been imposed with, so we haven't need any kind of customization to build up our code we have just used some table elements and we can see that this is the result; rest of the things are quite ok, but while we are about to build up our display section into the header, we can see that this is the result; the background image is not working properly; the actual intention was to build up something like this as you can see that this is an image, which we will be immediately covering up the whole display section; but instead, while we look into our browser we can see that the image itself is not covering up the display banner section, else, it is practically repeating itself again and again; this is not what exactly we want, we want a single image to cover up the whole device-width; in that particular case it is practically impossible to build it up without adding some style properties to it; there is the limitation of using pure HTML only without using any kind of CSS and from this is where actually the necessity of using CSS emerges out; we need to add some styling property in an order to make it proper, to make it appear proper into our webpage in that essence, the first thing before we make any kind of changes into the code into our root directory, we need to create a folder where it will be known as CSS folder.and into this folder, we will be creating a file, we will be naming it as 'style.css' so, we had practically created a 'style.css'file inside a folder which is known as CSS, we have created this css folder separately, we had kept this 'images' folder separately, so the purpose of css folder is to hold up all the css related files into and the objective of this 'images'folder is to hold all the images inside it.and we have kept all the html files right outside both the folders that we had created inside our root directory or root folder. Now we are ready to go along with it; so in the first case we need to head back to this 'style.css' first of all, we will be mentioning this is a css comment as been known to us; and we will be mentioning here as 'CSS Document' Next, we are now going to create our very first rule here, we are practically customizing the HTML document and we are mentioning that the background color of this html document should be something like this one; so this is just a test background image, we won't be keeping it up all day long, we are just testing whether this CSS document style is been connected with this main html page or not; now, in this case, we will be keeping things separated; so instead of project with HTML code .html; now we will be creating a new file right outside both the directories that we had created on purpose, we will be now creating another HTML file which should be known as html with css.html; so this isanother file which is right now created and this is exactly where we are about to connect our style.css so here, in the very first case, we will be now creating the html structure regarding this matter, and in the first case, we will be mentioning the doctypehtml part; so, why this doctype html?this is how we practically declare an HTML file page and in order to create a responsive page, it works, it goes better with the HTML5, instead of with HTML..so that is why we have practically created this doctype html the declaration, in the first case, next we need to mention the html language whichhere we mentioned as- 'en'.next comes the head section so within this head section, in the first case, we want to declare the meta charset this practically defines so this is the meta charset and we will be using this utf-8 right over here; now what is the purpose of this meta charset? it is practically the type of encoding, with which the machine reads the type input from a user; so all it is going to do it is going to use this utf-8 character encoding into our web page; this is the first thing.next we wish to keep our website mobile responsive, right? so that is why we need to declare it right over here in the first case we will be now mentioning meta name as viewport; next we will be using this content content; so here within this content, we will be now mentioning width equals to device-width and the initial scale of this web pageinitial scale it should be zooming in to 1.0 .sorry so all it is going to do, it is going to scale our web page into the browser 1.0, that means there won't be any magnified zooming in of our web page; everything will be normal in proper proportion in proper dimension into our browser; and, it will be immediately scaled down to a device-width width of the device-width which is been used to display that browser; so that is why we had mentioned it right over here; now in the last case we will be mentioning so you may make usage of something else, like this meta name description meta name content, where we may use the key words, we may make it SEO friendly, but right now these are the very two basic rudimentary things to declare our webpage responsive first, and to code the character; in the next case we will be using a title; so here we may write it as html with css now in the last case we wish to link the style.css that we had created right over here; so this 'style.css', it practically resides within the css folder; so in the first case, whenever we are referring to this href, we are mentioning it as in the first case as the containing holder here, container folder that we had created regarding this respect; and it is css folder, name of the folder is css, and the name of the file is 'style', along with the extension name.css; so this is the complete path of this file which should be mentioned right over here; in the next case we need to mentionthe relevance which is stylesheet and the type is text / cssso everything is right now in order; we have created this web page along with this doctype html declaration here created this head section in the similar way, we need to mention the body part; right now we won't be creating anything into our body part; first of all, we would like to check that the linking between the html file and the style sheet.css file is done.and in that order let's press ctrl s and let's so here it goes, this is the file that we had created right now; we will be opening it up along with the firefox document and we can see that everything is in order, the css file is right now linked with the html file that we have created; the next thing that stands before is to code up each and everything inside that right now we can see right over here; so here goes the header section, next comes the body layout section, next comes the grouped layout section and at the end, we have a footer section; this is what we need to build up into our web page, so this is what we will be doing in our next tutorial where we will be coding our html file along with the css file that we had created