Responsive Web Design by Example by Hussain, Frahaan -- Read -- Imperial Library of Trantor

Index

Title Page Copyright

Responsive Web Design by Example

Credits About the Author About the Reviewer www.PacktPub.com

Why subscribe?

Customer Feedback Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Conventions used

Reader feedback Customer support

Errata Piracy Questions

What is Responsive Web Design?

Responsive design philosophy Responsive design principles

Responsive versus adaptive Breakpoints Relative units Maximum and minimum values Nested objects Mobile or desktop first Bitmaps versus vectors

Responsive grids and columns Summary

What is Bootstrap, Why Do We Use It?

Brief history of Bootstrap Why use Bootstrap?

Why Bootstrap?

Bootstrap's grid system

Basics Usage and examples

Equal width columns example Multi-row, equal-width columns example Multi-row, equal-width columns without multiple rows example Differently sized columns Differently sized columns with screen size restrictions Mixing and matching Vertical alignment Horizontal alignment Column offsetting

Grid wrap up

Bootstrap components Summary

Reusable Project Template

What is a reusable project template? Development environment prerequisites Creating our reusable project template

Simple Bootstrap example Abstraction Extending the header Extending the footer Extending the main body

Troubleshooting

PHP errors CSS not applying

Summary

Creating the Introduction Section

What is a single-page website?

Single-page examples

Android KitKat promotional homepage GoldSquare Anthony Designer Richman

Implementing our introduction section

What is a jumbotron?

Implementing a basic jumbotron Adding an image to the jumbotron Combining text and images in a jumbotron

Anchoring a section to the navigation bar Animating our navigation bar anchor

Fixing footer visibility and the location problem

Placing the header on top Changing the current button selected

Common pitfalls

Navigation bar height variance on mobile devices Navigation bar button anchoring

Summary

Creating a Generic Reusable Single Page Section

Different sections in single page websites

Single page section examples

Contact form About us Projects/work Opening times

Implementing our generic reusable single page section

What will the Our Team section contain? Creating the Our Team section container Anchoring the Team section to the navigation bar Adding the team's pictures Team member info text Team member social links

Summary

Creating a Contact Us Section

Richman Bueno This also Design museum Choice screening

Implementing the Contact Us section

What will the Contact Us section contain? Creating the Contact Us section container Anchoring the Contact Us section to the navigation bar Adding the contact form

Summary

Creating the Blog Posts Home Page

Blog examples

TechCrunch Gawker Microsoft News Johnny Cupcakes TESCO Living

Setting up the base project

Removing all unnecessary files Refactoring the index.css file Refactoring the index.php file Refactoring the HEADER.php snippet file Refactoring the index.js file

What will our blog home page look like? Implementing the blog home page section

Implementing the image slider

Simple image slider Adding back and forward buttons to the slider

Carousel indicators

Captioning our carousel

Implementing the blog posts

Adding cards

Summary

Creating the Blog Posts Page

Blog post page examples

TechCrunch Gawker Microsoft News Johnny Cupcakes Tesco Living

What will our blog post page consist of?

What does the post content consist of? What does the popular and recommended sidebar consists of? Implementing the blog post page Implementing the post's main content

Adding the blog post title and banner image Adding the snapshot paragraph Adding the body More useful links

Implementing the sidebar Further extending the blog Summary

Adding a Sidebar to the Social Network

Social network sidebar examples

Facebook Google+ YouTube Minds Myspace

What will our social network sidebar consist of?

Implementing the sidebar

Implementing the burger button Implementing the sidebar HTML side Implementing the sidebar CSS side

Summary

Creating the Home page in Our Social Network

Social network timeline examples

Facebook Google+ YouTube Twitter Medium

What will our social network timeline consist of? Implementing the timeline

Implementing the input section Implementing the timeline feed section

Adding the user's thumbnail image Adding the user's name/username Adding the post's timestamp

Adding the post's main body Going forward and extending the timeline

Summary

Creating the User's Profile Page

Social network profile examples What will our social network user page consist of? Implementing the jumbotron

Creating a basic jumbotron with a banner image Adding the overlay text Implementing the small cards Implementing the large cards Summary

Displaying Thumbnails of Our Photos

Photo gallery home page examples

Pinterest 9GAG Google Photos GIPHY Vent

What will our photo gallery home page consist of? Implementing the thumbnails

Adding the home page title Adding the picture thumbnails Adding pagination Summary

Opening Images Using a Light Box

Light box examples

Pinterest Google Photos Dan Kennedy Salter Arild Danielsen Photographer

What will our light box consist of? Implementing the light box

Adding a simple modal Adding an image to the modal Making the modal content appear dynamically

Summary

← Prev
Back
Next →

← Prev
Back
Next →