Introduction
This chapter demonstrates about the W3CSS Case Study which is used to build responsive website from scratch and following are the concepts covered in this chapter.
- Building a Responsive Web Site.
- Container Elements
- Color Classes
- Multi coloumn responsive layout
- Navigation Bars
Description
In order to built a responsive web page from a scratch, initially user need to start with the simple HTML page with an initial view port then user need to link to the w3.CSS, liking with w3.css as shown in following code. The code below demonstrates building a responsive web site as shown below.
[html]
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<h1>First W3.CSS Website!</h1>
<p>site will grow as we add more ...</p>
<p>Which is a paragraph.</p>
<p>Which is another paragraph.</p>
<p>Which is a paragraph.</p>
<p>Which is another paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In order to build a website user need to add a common margin and padding to all elements, which can be possible by putting all HTML elements inside an container. The code below demonstrates to putting HTML elements into container as shown below.
[html]
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h1>First W3.CSS Website!</h1>
<p>site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>Which is a paragraph.</p>
<p>Which is another paragraph.</p>
<p>Which is a paragraph.</p>
<p>Which is another paragraph.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Color Classes which defines the color elements which add colors to the <div> element by using the w3-color class and by default container consist of light grey color and the code below demonstrates to add color to the element.
[html]
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-blue">
<h1>First W3.CSS Website!</h1>
<p>site will grow as we add more components...</p>
</div>
<div class="w3-container">
<p>Which is a paragraph.</p>
<p>Which is another paragraph.</p>
<p>Which is a paragraph.</p>
<p>Which is another paragraph.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS creating a Multi column responsive layout is an easy process in which the columns will rearrange themselves automatically when user viewed on different screen sizes and which have some rules are shown below.
Which starts with a row class <div class="w3-row-padding"> and which some predefined classes like w3-third to make grid columns and place the text content inside grid columns. The code below demonstrates the three equal columns width as shown below.
[html]
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<header class="w3-container w3-blue">
<h1 class="w3-jumbo">SPLESSONS!</h1>
<p class="w3-xxlarge">This site will grow as we add more ...</p>
</header>
<div class="w3-row-padding">
<div class="w3-third">
<p>www.splessons.com was established on Nov-01-2013. SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<div class="w3-third">
<p>www.splessons.com was established on Nov-01-2013. SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<div class="w3-third">
<p><strong>www.splessons.com was established on Nov-01-2013. SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</strong></p>
</div>
</div>
<footer class="w3-container w3-blue">
<p>This is my footer</p>
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS User can add different types of navigation bars the is known as navigation header and which can be placed at the top of the page and the code below demonstrates to adding navigation bars to the web page.
[html]
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<header class="w3-container w3-blue">
<h1 class="w3-jumbo">SPLESSONS!</h1>
<p class="w3-xlarge">This site will grow as we add more ...</p>
</header>
<div class="w3-topnav w3-purple w3-large">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="w3-row-padding">
<div class="w3-quarter">
<p>www.splessons.com was established on Nov-01-2013. SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<div class="w3-half">
<p><strong>www.splessons.com was established on Nov-01-2013. SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</strong></p>
</div>
<div class="w3-quarter">
<p>www.splessons.com was established on Nov-01-2013. SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
</div>
<footer class="w3-container w3-blue">
<p>This is my footer</p>
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User can built the responsive web site from scratch.
- Navigation bars placed at the top of home page.
- User can use multiple colors to build a website.