Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks

Published byふじきみ かたいわ Modified over 6 years ago

Similar presentations

Presentation on theme: "HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks"— Presentation transcript:

1 HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Session II

2 Outline Layout Templates Containers Navigation Tables Lists Forms
Images Icons Colors 9/20/2018 Copyright © Carl M. Burnett

3 Layout Templates 9/20/2018 Copyright © Carl M. Burnett Framework
Bootstrap 1 W3C.CSS 15 HTML KickStart Foundation 8 Semantic UI 9 UIKit 6 960 Grid Col Grid YAML 4 GroundworkCSS 2 Ink 10 Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

4 Themes 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap
W3C.CSS HTML KickStart Foundation Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

5 Containers 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap
Grid system, Jumbotron, Panels, Wells, Modal, Carousel, W3C.CSS HTML KickStart Foundation Grid, Modal, Panels, Accordion, Tabs Semantic UI UIKit Panel Block Article Comment Utility Flex Cover 960 Grid HTML5 Semantic Elements – With Responsive Grid YAML GroundworkCSS 2 Responsive Text - Placeholder Text Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

6 Overlay Navigation Menu Menu, Appbar, Fluent menu, Sidebar
Framework Bootstrap Navs, Navbar W3C.CSS HTML KickStart Foundation Overlay Navigation Menu Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 Menu, Appbar, Fluent menu, Sidebar 9/20/2018 Copyright © Carl M. Burnett

7 Tables 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap
W3C.CSS HTML KickStart Foundation Pattern Tap Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

8 Lists 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap
W3C.CSS HTML KickStart Foundation Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

9 zurb.com/building-blocks/signup-form
Forms Framework Bootstrap W3C.CSS HTML KickStart Foundation zurb.com/building-blocks/signup-form Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

10 http://www.99lime.com/elements/ (Use Font Awesome)
Icons Framework Bootstrap W3C.CSS HTML KickStart (Use Font Awesome) Foundation Semantic UI UIKit Icon, Badge 960 Grid (Use Font Awesome) YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

11 Colors 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap
Contextual colors W3C.CSS HTML KickStart Foundation Global Styles Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

12 Student Exercise 1. Continue designing your website.
  •  Develop Site Navigation   •  Develop Page Layout   •  Create or Find Textual Content for Web Pages   •  Create or Find Graphical Content for Web Pages   •  Create or Find Other Media Content for Web Pages   •  Determine Information to be Collected from Site Users   •  Design Form to Collect Information from Site Users 2. Review frameworks available that Meet Your Site Requirements. 3. Begin narrowing down Framework to be Selected. 9/20/2018 Copyright © Carl M. Burnett

13 Review Layout Templates Containers Navigation Tables Lists Forms
Images Icons Colors 9/20/2018 Copyright © Carl M. Burnett

Download ppt "HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks"

Similar presentations

Twitter Bootstrap. Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive.

Twitter Bootstrap. Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive.
Bootstrap & CSS James Kahng. Intro Websites require a lot of upfront setup to look passably good (HTML base, CSS style, etc.) Because of this, people.

Bootstrap & CSS James Kahng. Intro Websites require a lot of upfront setup to look passably good (HTML base, CSS style, etc.) Because of this, people.
Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.

Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?

Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Session I - Introduction

Session I - Introduction
Session II Outline Typography Session II – Exercise 1 Chapter 8 – Navigation Chapter 4 – Jumbotron Session II – Exercise 2.

Session II Outline Typography Session II – Exercise 1 Chapter 8 – Navigation Chapter 4 – Jumbotron Session II – Exercise 2.
Session IV Outline JavaScript Part I Chapter 10 - Modal Exercise 1 - Modal Chapter 13 – Carousel Exercise 2 - Carousel Chapter.

Session IV Outline JavaScript Part I Chapter 10 - Modal Exercise 1 - Modal Chapter 13 – Carousel Exercise 2 - Carousel Chapter.
Planning Your Website What information do you want to present? –Collect your resources –Create a narrative Who are you presenting it to? –Education level.

Planning Your Website What information do you want to present? –Collect your resources –Create a narrative Who are you presenting it to? –Education level.
Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.

Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.
SE-2840 Dr. Mark L. Hornick1 Bootstrap A framework for CSS.

SE-2840 Dr. Mark L. Hornick1 Bootstrap A framework for CSS.
WEB DEVELOPMENT IMMERSIVE ADVANCED LAYOUT, FORMS, & MEDIA.

WEB DEVELOPMENT IMMERSIVE ADVANCED LAYOUT, FORMS, & MEDIA.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
1.Click on “Start” menu 2.Click on “ 1. Choose a different layout for your slide.

1.Click on “Start” menu 2.Click on “ 1. Choose a different layout for your slide.
WWW.NYLS.EDU Content Administration 08/19/13 & 08/20/13.

Content Administration 08/19/13 & 08/20/13.
Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.

Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.
Www.redpilldevelopment.com learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.

learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.
Bootstrap Front-End Framework for Responsive Web Sites Svetlin Nakov Technical Trainer Software University

Bootstrap Front-End Framework for Responsive Web Sites Svetlin Nakov Technical Trainer Software University
10-9-15 - Art for New Media 1 - Sketchbook: Look through past examples of the Dreamweaver Practice Gallery on the class website. Pick one that you think.

Art for New Media 1 - Sketchbook: Look through past examples of the Dreamweaver Practice Gallery on the class website. Pick one that you think.
HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

Similar presentations

Ads by Google