Front-end framework 1.

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

FLAT DESIGN 2.0 + USABILITY (Material Design by Google)
Sample site ->

WEB TYPOGRAPHY Sample Site ->

ONE PAGE/VERTICAL PATTERNS + LONG SCROLLING
Sample site -> Samsung

CARD LAYOUTS Sample site ->

BIG IMAGES / VIDEOS in HEADER / BACKGROUND
Sample site ->

BOLDER, BRIGHTER COLOR Sample site ->

Websites with Slides Sample site -> 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 / 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 ( Extract the Bootstrap files in to project folder Use Reference (

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

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.

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 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

Contextual Colors and Backgrounds

Bootstrap's Default Settings
Bootstrap's global default font-size is 14px, with a line-height of 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 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
category=site-templates

http://designpixy.com/2015/free-bootstrap- templates-2015/

Reference อ.พงศ์ตะวัน แสงสว่าง Basic web base programming (part I)
bootstrap-examples/

Front-end framework 1.

Similar presentations

Presentation on theme: "Front-end framework 1."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Front-end framework 1.

Similar presentations

Presentation on theme: "Front-end framework 1."— Presentation transcript:

Similar presentations

About project

Feedback