This document provides an introduction to UI & UX basics, covering HTML for content, CSS for layout, and JavaScript for behavior. It discusses basic HTML structures like paragraphs, images, lists, links, and tables. It then covers identifying layout elements, applying CSS style rules using selectors and properties, prefixes for cross-browser compatibility, and testing across browsers. The document concludes with a section on using JavaScript for user interactivity and validation, questions and answers, and references.

What's hot

Viewers also liked

Similar to Front End Web Development Basics

Recently uploaded

Front End Web Development Basics

• 1.
  UI & UXBasicDeveloped by: Tahir Shahzad1
• 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• References2
• 3.
  IntroductionWe 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 layout3
• 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• Alot 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…)BuildingBlocks• Main menu• Left navigation• Content• FAQs• Product category (list, grid)• Product landing (gallery, tabs)• Calculators6
• 7.
  Application of StyleRules• CSS Selectors• Html element• Class• Id• Nth-child(n)• ::after & ::before• CSS Properties• Color• Border and background• Font• Float• Display• Height & width• Position• align7
• 8.
  CSS Prefixes (crossbrowser 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 withJS• Programming language of weband 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 Answers11
• 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.asp13