Front-end framework 1
Review the following LANGUAGE HTML PHP DATABASE XAMPP DESIGN ER-DIAGRAM: CATALOGUE
Things to Learn Web Design Trends Bootstrap ER-Diagram: Examples Database: 8 tables Create: three system (Member system, Catalogue online, Shopping card) Front-office Back-office
1. Web Design Trends Learning Objectives: 1. Identify current trends of the web
Web Design Trends 2014 - 2016
FLAT DESIGN 2.0 + USABILITY (Material Design by Google) Sample site -> http://creativeclashgame.com/
WEB TYPOGRAPHY Sample Site -> http://hawkandhen.com/
ONE PAGE/VERTICAL PATTERNS + LONG SCROLLING Sample site -> Samsung
CARD LAYOUTS Sample site -> http://thenextweb.com/
BIG IMAGES / VIDEOS in HEADER / BACKGROUND Sample site -> http://www.dunckelfeld.de/
BOLDER, BRIGHTER COLOR Sample site -> http://rightcolours.com/
Websites with Slides Sample site -> http://www.apple.com/iphone/why- theres-iphone/
What is the best design ? Do not follow Trend. Focus on “What’s users need”. Simplex not Complex. More Clean, More White Space. Good Sequence, Good Screen Flow. Front-End Design not for Back-End Design. Back-End Design not for Front-End Design.
Creating Responsive Web with Bootstrap
Today's Web Developer HTML5 Canvas / Semantics/ Storage / File Access / Audio / Video CSS / 3 LESS / Sass / @font-face / Border Radius / Box Shadow JavaScript jQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScript Server Side Languages ColdFusion / Java / Groovy / PHP / Python / .NET / Ruby DBMS Oracle / SQL Server / MySQL / PostgreSQL NOSQL Databases Cassandra / MongoDB / CouchDB / Amazon Simple DB
Creating Responsive Web
What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
2. Bootstrap Learning Objectives: 1. create web projects with ease
UI Frameworks
Twitter Bootstrap A freely available design framework for websites and web applications Based upon HTML5, CSS and JavaScript Supports all major browsers (even IE7!)
Why choose Bootstrap? It's a very popular, well designed, open source UI framework CSS wrappers for many Javascript components modal windows, typeahead, tooltips, etc. Mobile-first design Bootstrap 3.0 is in the vanguard of responsive, mobile-first UI design frameworks
What is "mobile first"? Twitter Bootstrap is "mobile first", which means that no special coding is required to reformat the UI for mobile screen sizes. If desired, you can alter Bootstrap's default approach to mobile display. This is unlike other frameworks, where mobile is a "special case" and requires lots of customization.
Using Bootstrap Text Editor (Notepad++) Download Bootstrap (http://getbootstrap.com/) Extract the Bootstrap files in to project folder Use Reference (http://www.w3schools.com/bootstrap/)
What is Bootstrap? Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs
Creating Responsive Web Let’s Start Bootstrap is the most popular front end framework in the recent time
Learn the Components of Bootstrap and Built Responsive Website
Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:
2. Bootstrap 3 is mobile-first Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element: The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
Creating Responsive Web <meta name="viewport" content="width=device-width, initial-scale=1">
3. Containers Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from: The .container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport Note: Containers are not nestable (you cannot put a container inside another container).
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-1.12.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
<div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div>
Bootstrap Grid System
Grid Classes The Bootstrap grid system has four classes: xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops) The classes above can be combined to create more dynamic and flexible layouts.
Basic Structure of a Bootstrap Grid
Three Equal Columns
Two Unequal Columns
Bootstrap Text/Typography <h1> - <h6> <small> Lighter, Secondary Text <mark> Highlight Text <abbr> Abbreviations <blockquote> The blockquote element is used to present content from another source <dl> Description Lists <code> Code Snippets <kbd> Keyboard Inputs <pre> Multiple Code Lines http://www.w3schools.com/bootstrap/bootstrap_typography.asp
Contextual Colors and Backgrounds
Bootstrap's Default Settings Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
Bootstrap vs. Browser Defaults
Bootstrap vs. Browser Defaults
Bootstrap vs. Browser Defaults
Bootstrap vs. Browser Defaults
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples and Applications
Bootstrap Examples Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use!
What are the challenges you? Learn various of components. Create an overview of the application from small things. User friendly Interface
2016's Best Selling Website Templates https://themeforest.net/popular_item/by_category? category=site-templates
http://designpixy.com/2015/free-bootstrap- templates-2015/
Reference อ.พงศ์ตะวัน แสงสว่าง Basic web base programming (part I) http://www.w3schools.com/bootstrap/ https://www.tutorialspoint.com/bootstrap/index.htm http://tutorialzine.com/2015/06/12-time-saving- bootstrap-examples/