HTML5 and CSS3 Building Responsive Websites.pdf

(18557 KB) Pobierz
HTML5 and CSS3: Building Responsive
Websites
Table of Contents
HTML5 and CSS3: Building Responsive Websites
HTML5 and CSS3: Building Responsive Websites
Credits
Preface
What this learning path covers
What you need for this learning path
Who this learning path is for
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Module 1
1. Responsive Web Design
Responsive web design in a nutshell
Viewport meta tag
A word on screen size and viewport
Media queries
A look into responsive frameworks
The Responsive.gs framework
A word on CSS box model
CSS3 box sizing
The Bootstrap framework
The Foundation framework
A brief introduction to CSS preprocessors
Have a Go Hero — delve into responsive web design
Pop Quiz — responsive web design main components
Responsive web design inspiration sources
Summary
2. Web Development Tools
Choosing a code editor
Sublime Text Package Control
Time for action – installing Sublime Text Package Control
What just happened?
Have a go hero – install the LESS and Sass syntax-highlighting package
Setting up a local server
Time for action – installing XAMPP
What just happened?
Choosing a CSS preprocessor compiler
Browser for development
Source maps
Mobile emulator
Managing project dependency with Bower
Time for action – installing Node.js
What just happened?
Have a go hero – get yourself familiar with command lines
Time for action – installing Bower
What just happened?
Bower commands
Pop quiz – web development tools and command lines
Summary
3. Constructing a Simple Responsive Blog with Responsive.gs
Responsive.gs components
The classes
Using HTML5 elements for semantic markups
HTML5 search input types
HTML5 placeholder attribute
HTML5 in Internet Explorer
A look into polyfills in the Responsive.gs package
Box sizing polyfills
CSS3 media queries polyfill
Examining the blog's wireframe
Organizing project directories and files
Time for action – creating and organizing project directories and assets
What just happened?
Have a go hero – making the directory structure more organized
Pop quiz – using polyfill
The blog HTML structures
Time for action – constructing the blog
What just happened?
Have a go hero – creating more blog pages
Pop quiz – HTML5 elements
Summary
4. Enhancing the Blog Appearance
Using CSS3
Creating rounded corners with CSS3
Creating drop shadow
CSS3 browser supports and the use of vendor prefix
Customizing to placeholder text styles
Using CSS libraries
Working with Koala
Time for action – integrating project directory into Koala and combining the style
sheets
What just happened?
Have a go hero – renaming the output
Pop quiz – website performance rules
Thinking mobile first
Composing the blog styles
Time for action – composing the base style rules
What just happened?
Have a go hero – customizing the link color
Time for action – enhancing the header and the navigation appearance with CSS
What just happened?
Have a go hero – customizing the header
Time for action – enhancing the content section appearance with CSS
What just happened?
Have a go hero – improving the content section
Time for action – enhancing the footer section appearance with CSS
What just happened?
Optimize the blog for desktop
Time for action – composing style rules for desktop
What just happened?
Making Internet Explorer more capable with polyfills
Time for action – patch Internet Explorer with polyfills
What just happened?
Have a go hero – polish the blog for Internet Explorer
Summary
5. Developing a Portfolio Website with Bootstrap
The Bootstrap components
The Bootstrap responsive grid
Bootstrap buttons and forms
Bootstrap Jumbotron
Bootstrap third-party extensions
Jasny Bootstrap off-canvas
Digging into Bootstrap
Using font icons
Examining the portfolio website layout
Project directories, assets, and dependencies
Time for action – organizing project directories, assets, and installing project
dependencies with Bower
What just happened?
Have a go hero – specifying Bower custom directory
Pop quiz – test your understanding on Bower commands
Updating Bower components
The portfolio website HTML structure
Time for action – building the website HTML structure
What just happened?
Have a go hero – extending the portfolio website

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin