A unique platform to get tutorials on basic and advance computer skills like blogging, wed development, Programming and Get latest technology updates, tutorials, tips and much more
Articles by "web_development"
Showing posts with label web_development. Show all posts
A unique platform to get tutorials on basic and advance computer skills like programming, blogging. Get latest technology updates,news, tutorials
In our previous article we talk briefly on the course introduction. Today we will be show you the list of tools needed. Take a look at the list of tools you need to build a web page
Tools needed for writing web pages
To start writing web pages, we'll use a simple text editor. That way, you'll
be able to focus on the code, without getting distracted by the menus and buttons
of a complex piece of Web Design software. If you use Windows, then Notepad is an excellent text editor to use. To launch
it, click on your Start menu in the bottom left of your screen. Click on All
Programs, then Accessories. From the Accessories folder, select Notepad:
The software should look like this, when it launches:
Another good piece of software is the free Notepad++. You can get a copy here:
Mac and Linux users have a number of text editors available, but finding a
free one that is as good as Notepad++ is quite difficult. Bluefish is OK, but
looks a bit dated, especially for HTML. You can check it out here:
For a basic text editor like Notepad, Macs come with TextEdit, which you can
find in your Applications folder. You might want to play around with the Preferences,
though, or you'll end up with Rich Text rather than Plain Text.
Another good free editor for the Mac is TextWrangler. You can get a copy here:
In the next lesson, we'll take a look at just what is HTML and HTML 5. Hope you like this lesson(Tools need for writing web pages - learn web design lesson 2). Answer question and make the lesson interactive.
A unique platform to get tutorials on basic and advance computer skills like programming, blogging. Get latest technology updates,news, tutorials
Introduction
Hello guys, Today, i will be starting a very interesting series on Web
Design. The software you need is set out below.
We assume that you have absolutely
no knowledge of designing web pages. Throughout the course of this book you
will learn the fundamentals of Web Design. And, of course, you will start creating
your own pages. By the end of the book, you will have acquired a good understanding
of what web design is all about, and have the ability to take it further, if
you so wish.
Learn Web Design In 24 hours
What you will learn
The aim of this course is to get you started designing web pages. It is assumed
that you have little or no experience of the subject. During our time together,
you'll learn some new concepts and ideas, most of which will not be difficult.
After all, there are billions of pages on the internet, designed by the whole
spectrum of humanity: children, adults, pensioners, people from all walks of
life have sites out there. And if they can do it, so can you. In fact, follow
the lessons carefully and you WILL do it. Before long, you'll have your own
pages designed and ready to be uploaded, there for all the world to see.
The technologies you will learn are HTML, HTML5, and Cascading Style Sheets(CSS).
(HTML5 is the newest version of the of the language.)
At the heart of every web page is something called HTML. You will learn what
this is, and how to code it. You will also learn the newest version of HTML,
which is called HTML5. Both versions are included in this course. As well as
HTML, you will learn about Cascading Style Sheets, and will be able to improve
the look of your web pages by adding CSS to enhance them.
At the end of most chapters in this book you will see a summary table of what
you have learnt. The summary tables are also included in a separate document,
called quick_reference.pdf. This is one of the files that come with this book.
All the files you should have are detailed below.
What you need to do the course
The only thing you really need to do the course is a simple text editor. We
explain all about this in the first chapter, Anatomy of a Web Page, in the section
Software for Writing Web Pages. But the operating system you have is not important.
So you can do this course on a PC or an Apple Mac.
Web Design Course Files
There are a number of files that you will need in order to complete certain
sections. Whenever you need a file for a section of your course, it will be
explained in the relevant section. The download location is here, under the
heading Web Design - New Course (you don't need the downloads for the
old course.):
Once you have all the necessary files, you can begin. The first part is all
about the software you need for this course. Don't worry - you'll already have
all you need, so there's nothing to buy. Click the link below for the first
section.
Hope you are enjoying this series(Learn Web Design In 24 hours). share with your friends and ask questions below
A unique platform to get tutorials on basic and advance computer skills like programming, blogging. Get latest technology updates,news, tutorials
Bootstrap framework offers grid system with extensive use of div element which is dynamically compatible with all devices and screens. The main advantage of grid systems you get rid of the traditional HTML Tables as far as possible and use fluid div elements.
The basic architecture of the grid system is that the screen is horizontally divided into maximum 12 columns (logically).It means grid system allows up to 12 columns across the page .If you don’t want to use all 12 column individually, you can group the columns together to create wider columns.
Bootstrap Grid Classes
The Bootstrap grid system has four classes, they are xs, sm, md and lg. These provided classes are used to create each combination of columns –for each device size. Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.
The following matrix illustrates this:
Class Names
Description
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
Classes to use to consume one column in the corresponding device size.
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2
Classes to use to consume two columns in the corresponding device size.
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3
Classes to use to consume three columns in the corresponding device size.
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4
Classes to use to consume four columns in the corresponding device size.
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5
Classes to use to consume five columns in the corresponding device size.
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6
Classes to use to consume six columns in the corresponding device size.
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7
Classes to use to consume seven columns in the corresponding device size.
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8
Classes to use to consume eight columns in the corresponding device size.
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9
Classes to use to consume nine columns in the corresponding device size.
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10
Classes to use to consume ten columns in the corresponding device size.
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11
Classes to use to consume eleven columns in the corresponding device size.
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
Classes to use to consume twelve columns in the corresponding device size.
Grid System Rules
Some Boot strap grid system rules,
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use Rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Structure of a Bootstrap Grid
The following is the basic structure of the Bootstrap grid,
class="container">
class="row">
class="col-*-*">
class="row">
class="col-*-*">
class="col-*-*">
class="col-*-*">
class="row">
...
Let’s see with more Examples,
Scenario: 1
Suppose we want to create three equal columns – irrespective of all device sizes. The code for this is as follows:
Note: Make sure that the sum always adds up to 12. Scenario: 2
In the below code we are displaying only first two column in smaller screen and the third column will not be displayed. This is why we mentioned col-xs-6 in two columns, which is sum as 12.
Scenario 3:
In smaller screens we need all the columns to be vertical. In medium screens first two columns should consume more space while in large screens they should be equal. Here is the code,
class="row">
class="col-xs-12 col-sm-5 col-md-5 col-lg-4"style="background-color:#F0B2D1;">
Column 1: vertical display-xs,column 1: large area display-sm,column 1: large area display-md,display-lg
class="col-xs-12 col-sm-5 col-md-5 col-lg-4"style="background-color:#E066A3;">
Column 2: Vertical display-xs,column 2: large area display-sm,column 2: large area display-md,display-lg
class="col-xs-12 col-sm-2 col-md-2 col-lg-4"style="background-color:#D11975;">
Column 3: Vertical display-xs,column 3: small area display-sm,column31: small areadisplay-md,display-lg
class="col-xs-12 col-sm-5 col-md-5 col-lg-4"style="min-height:200px;background-color:#F0B2D1;">
Column 1: vertical display-xs,column 1: large area display-sm,column 1: large area display-md,display-lg
class="col-xs-12 col-sm-5 col-md-5 col-lg-4"style="min-height:200px;background-color:#E066A3;">
Column 2: Vertical display-xs,column 2: large area display-sm,column 2: large area display-md,display-lg
class="col-xs-12 col-sm-2 col-md-2 col-lg-4"style="min-height:200px;background-color:#D11975;">
Column 3: Vertical display-xs,column 3: small area display-sm,column31: small areadisplay-md,display-lg
One of the most important points here is that the total size of the columns must always be 12 – if it is less than 12, some space will be left unused, if it is more than 12, the last placeholder will be wrapped in the next line.
As you can see in the above examples, the width (and visibility) of the three columns are being automatically controlled by the classes as per the target device and screen size. Hence, Bootstrap’s grid system enables you to create tabular layouts for all the device sizes quite effortlessly, and without any extra complex CSS/ JavaScript coding.
