Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byRosanna Richard 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 III

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

3 Frameworks Selected Name Bootstrap W3C.CSS Nancy X Jean Heather Bonnie
Yuxing Lucia 12/30/2018 Copyright © Carl M. Burnett

4 Layout Templates 12/30/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 12/30/2018 Copyright © Carl M. Burnett

5 Themes 12/30/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 12/30/2018 Copyright © Carl M. Burnett

6 Containers 12/30/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 12/30/2018 Copyright © Carl M. Burnett

7 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 12/30/2018 Copyright © Carl M. Burnett

8 Tables 12/30/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 12/30/2018 Copyright © Carl M. Burnett

9 Lists 12/30/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 12/30/2018 Copyright © Carl M. Burnett

10 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 12/30/2018 Copyright © Carl M. Burnett

11 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 12/30/2018 Copyright © Carl M. Burnett

12 Colors 12/30/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 12/30/2018 Copyright © Carl M. Burnett

13 Student Exercise 1 Incorporate elements into your website.
Synchronized developmental site with live site. 12/30/2018 Copyright © Carl M. Burnett

14 Review Layout Templates Containers Navigation Tables Lists Forms
Images Icons Colors 12/30/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.
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?
Adapting a Site Template Using Drupal Themes and SASS/LESS.

Adapting a Site Template Using Drupal Themes and SASS/LESS.
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.
HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,
Session I Outline Chapter 1 – Getting Started Session I – Exercise 1 & 2 Chapter 3 – Grid System Chapter 7 – Multi-Column.

Session I Outline Chapter 1 – Getting Started Session I – Exercise 1 & 2 Chapter 3 – Grid System Chapter 7 – Multi-Column.
Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.

Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.
Things we’ve covered so far  Basic HTML  Some advanced tags i.e.  Styling using CSS  Background-color  Text  Changing the font on your site  Inserting.

Things we’ve covered so far  Basic HTML  Some advanced tags i.e.  Styling using CSS  Background-color  Text  Changing the font on your site  Inserting.
WEB DEVELOPMENT IMMERSIVE ADVANCED LAYOUT, FORMS, & MEDIA.

WEB DEVELOPMENT IMMERSIVE ADVANCED LAYOUT, FORMS, & MEDIA.
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.
Introduction to Bootstrap

Introduction to Bootstrap
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.
Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.

Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.
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