Here's what we will cover in this guide:
• The browser and device landscape
• Define responsive web design
• Browser Support
• Text Editors
Are you sitting comfortably? Then we will begin!
The browser and device landscape
The indisputable fact is that the number of
people using smaller-screen devices to view the internet is growing at an
ever-increasing rate, whilst at the other end of the scale, 27- and 30-inch
displays are now also commonplace (along with various tablet and console
devices). There is now more of a difference between the smallest screens
browsing the web and the largest than ever before.
Thankfully, there is a solution to this
ever-expanding browser and device landscape. A responsive web design, built
with HTML and CSS allows a website to "just work" across multiple
devices and screens. It enables the layout and capabilities of a website to
respond to their environment (screen size, input type, and device/ browser
capabilities)
Defining responsive web design
• The term "responsive web design" was coined by Ethan Marcotte in 2010.
• It consolidated three existing techniques (flexible grid layout, flexible images/media, and media queries) into one unified approach and named it responsive web design
In nutshell, it's the presentation of web content in the most relevant
format for the viewport and device accessing it.
Browser support
With so many browser and device variants it's not always
pragmatic to support every single browser permutation fully. Typically, the
older the browser, the greater the amount of work and code required to get
feature or aesthetic parity with modern browsers.
So, we are going to practice progressive enhancement. In
essence, starting with a functional and accessible website for the most basic
browsers, which will be progressively enhanced with features for more capable
browsers. It should be a very rare occasion indeed that you are forced to
create a website that isn't at least functional on an old browser/device.
There
are a number of browsers available e.g. Google chrome, Microsoft edge, Opera
Browser, Mozilla Firefox etc., so you can choose anyone of them. For this
tutorial I will be using Microsoft Edge.
Text editors
It makes no difference what tool
you use to write your code. If the simplest of text editors allows you to write
your HTML, CSS, and JavaScript efficiently, that's absolutely fine. Whether
your preference is Sublime Text, Vim, Emacs, Nova, Visual Studio Code, Apache NetBeans or
Notepad, it matters little. Just use what works best for you.
But for this tutorial I will use Microsoft’s Visual Studio Code.
And that will be enough for giving a great start. This alone will provide
enough tools and environment to start your learning.
To download MS Visual studio, click
HERE.
Once Done then we will continue
with our basics of web designing.
