Hello and welcome to another new episode of learning simplified.
So it is a brief introduction to this mobile responsiveness and in this lesson we are going
to know about some basic needs of making your site
mobile responsive, why and how it used to be done in our previous cases and all before
this Bootstrap and foundation mobile responsive framework.
So this is the thing that we are going to learn in this tutorial and the last and obvious
thing is, how to download Bootstrap from its original or official website, and we are going
to learn about some basic syntax, tools required...
So let's hope into this tutorial.
Now in case of methods of making mobile friendly sites, you can say that making the site using
percentage analysis is the first method that we can use, we can adopt,
and in this particular case calculations are based on percentage and em unit unit of pixels
is not accounted for in this case.
That means so far we were considering a 1000px outwrapper and then we were putting
our contents inside into this outwrapper part, but in this case, the width of outwrapper
is taken as 100%, and in declaring the font size, and the margin and
the padding, or this kind of stuff, unit used here is em, not the unit of pixel, and we
have shown you how to use em as an unit in our previous tutorials.
So you may go through our previous tutorials to see them in action.
No it has a many shortcomings out there, the major of it is
orientation.
In case of larger previews such as 1920 X 1080 pixel dimension we have seen that the
stuffs that we put inside this wrapper,those are getting stretched
and in case of smaller devices, those are getting squeezed and the contents inside are
getting overlapped or overlaid on each other and it is totally a hotchpotch
thing to see and they are just getting disoriented in a disproportionate behavior.
So this calculations based on percentage and EM calculations only, that thing was
obsolete soon.
But in case of rejecting these calculations based on percentage, there must be an alternative
to that and that is why they have introduced a new kind
of framework, we are using now the grid system that means breaking this whole media width
is being divided into 12 grids as we have seen in case of bootstrap and
foundation, on the other hand they are involving percentage calculations in case of a certain
media width and beyond them they are using percentage calculation on
stacking contents one upon each other.
So this is the thing that we are going to learn here about.
But first let's concentrate on the tools we will be needing here
so far.
So tools required in this purpose.
Which tools should be used in case of mobile responsiveness?
Now the first and the obvious thing is, did text editor.
Any editor will do, atom, sublime, Dreamweaver.
you can use notepad.
Atom and sublime open and free sources.
So you may use them at anytime, the point is you may use any kind
of text editor.
The second thing is web browser to see the changes in web browser preview, the changes
you have made in your coding.
Any web browser, Firefox, chrome, safari, opera - any browser in latest
condition will go.
I would like to emphasize here on the term latest.
That means those things will be updated.
That is why I will be prescribing you to use any
kind of latest browser.
The third thing is, a code Inspector to inspect the coding or trace the class name out of
the bunch of a coding.
Let's say as an example, if you use Firefox then firebug is a good option.
In the same manner if you use Google Chrome and if you press F12 in
your keyboard or if you right click on the web page and then you just click on that view
element or inspect element then you may see that dialogue box is open out
there in the side of your web page, in the right side of your webpage practically, you
may trace any kind of coding or you may trace any kind of class name out of
a bunch of a coding whatever it is, easy to do after that.
Special Syntax required for coding.
The first thing that we can see over here is meta name viewport content width initial
scale that you are not acquainted with in previous cases because we haven't
used any such thing previously as we had no intention to turn off site into mobile responsive,
we were just practically viewing aspects of HTML and CSS and we never
thought of making our site mobile responsive.
So this is what we have to include into our HTML head tag that means the browser will
now render the width of the page as the width of its own screen.
So whatever you now use a small mobile phone, or a medium-sized iPhone or iPad or a standard
desktop application, whatever it is, it is just rendering the width of the page
as the width of its own screen, and all this is happening due to this particular syntax.
So this is the obvious thing that we are going to include it into our webpage,
into the HTML head tag...
The second thing is also very obvious.
It is known as the @ media query.
It is very useful thing on this thing actually is used in case
of .CSS files, when you will be customizing style sheet you will be seeing that this @ media
query comes into action in every cases, cause in each and every cases
where you are just shifting your device width, you are just assigning some particular device
width into your website, some particular instructions, some particular commands
you wish to have in there, some particular changes in font size or change in margin padding,
or line height, this sort of things - then in this particular cases
this Syntax is very useful, mentioning this @ media query.
The obvious thing another one is declaring your webpage as an HTML5 page, because mobile
responsiveness is compatible to hTML5 only.
Whatever you use, do not forget ever, to declare your HTML page as an HTML5
one, as mobile responsiveness is always compatible to hTML5 environment only.
And the last thing is the framework itself.
Now fortunately bootstrap is an open source code and it is why it is OK to use in your
project and that is what we are going to learn in this particular mobile responsiveness.
This thing can be downloaded from the site, the site link is provided here,
we will be providing this link into the description box below,you may go through it.
So let's do not waste anymore time over here, we got the primary ideas we are
about to learn over here, such that the tools needed, the commands needed, the types of
creating the mobile friendly website.
Now let's hope into our tutorial and see how to download bootstrap open source
code from its official site.
So all we need to do here is to get back to google.com, and here we will be typing as
Bootstrap...
Where we can find that Bootstrap is the first one...
We will be right clicking on it and open this link into
a new tab.
This is actually the official website of Bootstrap.
from here we can see that this is the download option -
download bootstrap and currently this is the version, version 3.3.7.
So all we need to do we need to download this bootstrap, just click on it.
So this is the download bootstrap option, this is the download
source option, and this is the download sass option.
All we need we need to click on this download bootstrap option.
So we have to click over here.
Now you can see that the bootstrap 3.3.7 is been downloaded into our machine.
Now we are opening it.
There goes the zip file, bootstrap 3.3.7, downloaded off the Internet.
So the code you have downloaded off the Internet is in a Zip format.
Then all we need to do we need to just extract it,
the contents, and place it into proper places.
So this is a matter of another tutorial I guess and we have completed up to this part
of the tutorial, how to download bootstrap from its official website.
In the next tutorial we are going to learn how to install bootstrap into your project.
I hope you have like this tutorial so far.
If you have liked tutorial then do not hesitate to hit that red subscribe button.
Hope to see you guys in the next tutorial.
Till then,bye.
For more infomation >> Щенячий патруль Игрушки Детский сад Щенячий патруль Видео для детей Развивающие мультики для детей - Duration: 6:28. 
For more infomation >> Hotel Akka Antedon 5* Кемер, Бельдиби лучший отель для детей в Турции. Мой короткий видеообзор ! - Duration: 6:54. 
Không có nhận xét nào:
Đăng nhận xét