Web Design Reference – Web Design Tutorial And Reference

Published on: September 9, 2014   Last Updated on : October 22, 2017   Posted By : WebDesignReference

Web Design Reference Learn Web Design with demo code and examples.

Web Design Reference – Web Design Tutorial And Web Design Reference Guide:-

Web Designing is a good career opportunity in IT field, So if you want to be a good Web Designer or Developer, you need a good knowledge of Web Design skills. To become a professional web designer and web developer you have an excellent knowledge of common Web Design skills like Html5, CSS, CSS3, jQuery, JavaScript, Angular, PHP, Photoshop, WordPress, MySQL etc.

Web Design Reference – Web Design Tutorial And Reference

Html Tutorial And Reference:- HTML is a markup language designed for developing web pages. Html stands for Hyper Text Markup Language is used for creating a web page. Read More

Example : Minimal Html5 Document

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title> A minimal Html5 Document Example. </title>
</head>
<body>
<p> The first paragraph of the page. </p>
</body>
</html>

CSS Tutorial And Reference:- CSS is used for styling or formatting a web page, CSS stands for Cascading Style Sheet which describe overall look and formatting of a web page. Read More

Example : use of CSS Selectors and Attributes

body {
background-color: #bbb; text-align: left;
}

h1 {
color: #eee; text-align: left;
}

p {
font-family: ÔÇťArial”; font-size: 20px;
}

body, h1 and p are element selectors.

CSS3 Tutorial And Reference:- CSS3 comes with a new version of CSS. It has new styling properties and attributes which is used for styling or formatting a web page. Read More

Example : Use of CSS3 Selectors and Attributes

a {
box-shadow:1px 1px 5px 5px #ccc;
}

h1 {
text-shadow:1px 1px 1px #eee;
}

jQuery Tutorial And Reference:-jQuery is a easy to use javaScript library which is easy to learn and easy to understand. jQuery simply handles “DOM Manipulation”, “Event Handling”, “Ajax Support” and many others with easy to understandable code.Read More

How to use or include jQuery library in a document. 1.Download jQuery file from jQuery.com and include your HTML document

Example : jQuery in a html Document

< !DOCTYPE html >
< html >
< head >
< title >
How to include jQuery in a Document
< /title >
< script src=”jquery folder/jquery.min.js” > < /script >
< script >
$(document).ready(function(){
$(".div-box").click(function(){
 $(this).hide();
 });
});
< /script >
< /head >
< body >
< div class=”div-box” > Click to hide me. < /div >
< /body >
< /html >

Responsive Web Design Tutorial And Reference To create a mobile friendly or device independent website you need to learn the Responsive Web Design concept. Responsive web design is easy to learn, a responsive web page can be design using Media Queries and Bootstrap. Read More

Example : Use of Media Queries for different media devices.

@media all and (min-width:320px) and (max-width:768px)
{
header {
    width:auto ;
    display:block ;
    }

article {
    width:auto ;
    display:block ;
      }
}

@media screen and (min-width:320px) and (max-width:768px)
{
header {
    width:auto ;
    display:block ;
    }

article {
    width:auto ;
    display:block ;
      }
}

@media print and (min-width:320px) and (max-width:768px)
{
header {
    width:auto ;
    display:block ;
    }

article {
    width:auto ;
    display:block ;
      }
}

Browser Compatibility Tutorial And Reference:- browser compatibility issues are major issues which are facing by most web designers or web developer, these issues come because of different browser, different screens, different platforms available in the market, So a web page does not look same in all available browsers. If your web page looks different in available browsers then you are facing Browser Compatibility issues.Read More

 

Leave a Reply