basic guideline about UI/UX and front end web development. explore topics discussed to be expert.

1. UI & UX Basic
Developed by: Tahir Shahzad
1

2. Table of Contents
• Introduction
• Basic html structure
• Layout identification
• Application of style rules
• CSS prefixes
• Cross browser testing
• User interactivity and JS
• Question and answers
• References
2

3. Introduction
We will cover. . .
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behavior of web pages
• Magento theme and layout
3

4. Basic HTML Structures
• Paragraph
• Image
• Ordered and un-ordered list
• Anchor
• Break
• Heading
• Table
• Input
<p></p>
<img src=“test.jpg”/>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
<a href=“test.html”></a>
<br/>
<h1><h2><h3><h4><h5><h6>
<table><tr><td></td></tr></table>
4

5. Layout Identification
• A lot of HTML elements
• What we need?
• Which element to use?
<h1>My heading</h1>
<p> My first Paragraph</p>
<div> My first Division</div>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
5

6. Layout Identification (cont…)
Building Blocks
• Main menu
• Left navigation
• Content
• FAQs
• Product category (list, grid)
• Product landing (gallery, tabs)
• Calculators
6

7. Application of Style Rules
• CSS Selectors
• Html element
• Class
• Id
• Nth-child(n)
• ::after & ::before
• CSS Properties
• Color
• Border and background
• Font
• Float
• Display
• Height & width
• Position
• align
7

8. CSS Prefixes (cross browser compatibility)
• -moz- (Firefox)
• -o- (Opera)
• -ms- (Internet Explorer)
• -webkit- (Safari, Chrome)
.selector{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444,
#999999);
background-image: -moz-linear-gradient(top, #444444,
#999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444,
#999999);
}
8

9. Cross Browser Testing
• Manual testing
• test web page across multiple browsers.
9

10. User Interactivity with JS
• Programming language of web
and html
• Javsscript is not Java
• supported by all web browsers
• Function()
• Event
• validation
<script>
function myFunction() {
var x, text;
x = document.getElementById("numb").value;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML
= text;
}
</script>
10

11. Questions and Answers 11

12. Practice Session 12

13. References
• http://www.w3schools.com/tags/default.asp
• http://www.w3schools.com/cssref/default.asp
• http://www.w3schools.com/cssref/css_selectors.asp
• http://www.w3schools.com/js/default.asp
13