Book Image

Responsive Web Design by Example

By : Frahaan Hussain
Book Image

Responsive Web Design by Example

By: Frahaan Hussain

Overview of this book

Desktop-only websites just aren't good enough anymore. As you enter a future of increasingly diverse browsing methods, you need to know how to build websites that are presentable and will work perfectly with the huge volume of different device sizes and resolutions that are now commercially available. Responsive web design is an answer to the problem of modern web development. By following the detailed step-by-step instructions, previews, and examples mentioned in this book, you will learn how to build engaging responsive websites and upgrade your skills as a web designer. With coverage of Responsive Grid System and Bootstrap, you will learn about the most powerful frameworks in responsive web design. In this book, you will learn how to create a crisp blog page, a beautiful portfolio site, a cool social networking page, and a fun photo gallery. Through each of these projects, you'll learn how to build various elements of a modern responsive website, and also find out which framework works best for your project specifications. By the end of the book, you will have gained practical skills you need to build real-world websites that are professional, creative and truly responsive.

Related Content you might be interested in

Current Title:

Small book image
Responsive Web Design by Example
Frahaan Hussain
Dec, 2017 | 292 pages
Small book image
Mastering Bootstrap 4.
Benjamin Jakobus
Feb, 2018 | 354 pages
Small book image
Practical Web Design
Philippe Hong
Apr, 2018 | 368 pages
Small book image
Webflow by Example.
Ali Rushdan Tariq
Dec, 2021 | 356 pages
Table of Contents (15 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Reader feedback
Customer support
Free Chapter
1
What is Responsive Web Design?
What is Responsive Web Design?
Responsive design philosophy
Responsive design principles
Responsive grids and columns
Summary
2
What is Bootstrap, Why Do We Use It?
What is Bootstrap, Why Do We Use It?
Brief history of Bootstrap
Why use Bootstrap?
Bootstrap's grid system
Bootstrap components
Summary
3
Reusable Project Template
Reusable Project Template
What is a reusable project template?
Development environment prerequisites
Creating our reusable project template
Troubleshooting
Summary
4
Creating the Introduction Section
Creating the Introduction Section
What is a single-page website?
Implementing our introduction section
Common pitfalls
Summary
5
Creating a Generic Reusable Single Page Section
Creating a Generic Reusable Single Page Section
Different sections in single page websites
Implementing our generic reusable single page section
Summary
6
Creating a Contact Us Section
Creating a Contact Us Section
Contact Us examples for single page websites
Implementing the Contact Us section
Summary
7
Creating the Blog Posts Home Page
Creating the Blog Posts Home Page
Blog examples
Setting up the base project
What will our blog home page look like?
Implementing the blog home page section
Implementing the blog posts
Summary
8
Creating the Blog Posts Page
Creating the Blog Posts Page
Blog post page examples
What will our blog post page consist of?
Implementing the sidebar
Further extending the blog
Summary
9
Adding a Sidebar to the Social Network
Adding a Sidebar to the Social Network
Social network sidebar examples
What will our social network sidebar consist of?
10
Creating the Home page in Our Social Network
Creating the Home page in Our Social Network
Social network timeline examples
What will our social network timeline consist of?
Implementing the timeline
Summary
11
Creating the User's Profile Page
Creating the User's Profile Page
Social network profile examples
What will our social network user page consist of?
Implementing the jumbotron
12
Displaying Thumbnails of Our Photos
Displaying Thumbnails of Our Photos
Photo gallery home page examples
What will our photo gallery home page consist of?
Implementing the thumbnails
13
Opening Images Using a Light Box
Opening Images Using a Light Box
Light box examples
What will our light box consist of?
Implementing the light box
Summary
14
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Preface

Responsive Web Design by Example is your quick and easy guide to learning how to incorporate responsiveness into your website's design and creation. This book uses the concept of creating a varied array of websites to teach you the essentials and fundamentals of responsive web design. While also teaching about good practices for web design and development in general. This book will teach you this using the common web technologies HTML, CSS, and JavaScript, while also leveraging the immensely popular responsive framework Bootstrap.

This book aims to be your one stop for all things responsive and Bootstrap in web design and development. I have also created a popular YouTube channel which provides free educational videos, including on web development, to further assist you on your development journey:

https://www.youtube.com/user/sonarsystemslimited

Previous Section
Next Section