Web Design Reference – Learn Web Design Free

Published on: September 9, 2014   Last Updated on : May 28, 2018   Posted By : WebDesignReference

Web Design Reference Learn Web Design Free with Examples.

Web Design Reference- Web Design Tutorial, Web Design Reference Guide

Web Designing is a good career opportunity, So if you want to be a good Web Designer or Developer, you need a sound 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 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 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 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 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…

Example : jQuery in a html Document

<!DOCTYPEhtml>
<html>
<head>
<title>
How to include jQuery in a Document
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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 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 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