Packt+ | Advance your knowledge in tech

You're reading from Responsive Web Design by Example Embrace responsive design with HTML5, CSS3, JavaScript, jQuery and Bootstrap 4

Product type Paperback

Published in Dec 2017

Publisher Packt

ISBN-13 9781787287068

Length 292 pages

Edition 1st Edition

Languages

JavaScript

Tools

Bootstrap

Concepts

Design

Author (1):

Frahaan Hussain

View More author details

Table of Contents (22) Chapters

Title Page

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Preface

1. What is Responsive Web Design?

2. What is Bootstrap, Why Do We Use It? FREE CHAPTER

3. Reusable Project Template

4. Creating the Introduction Section

5. Creating a Generic Reusable Single Page Section

6. Creating a Contact Us Section

7. Creating the Blog Posts Home Page

8. Creating the Blog Posts Page

9. Adding a Sidebar to the Social Network

10. Creating the Home page in Our Social Network

11. Creating the User's Profile Page

12. Displaying Thumbnails of Our Photos

13. Opening Images Using a Light Box

1. Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Implementing the Contact Us section

We will now create a Contact Us section that can easily be modified and reused for our Single Page Portfolio website.

What will the Contact Us section contain?

The Contact Us section will be very similar to the previous Richman and Bueno examples, but it can easily be adapted to the other website styles.

The Contact Us section will consist of the following elements:

Name input using a single line input field
Email address input using a single line input field
Message/description input using a multiline input field

We will incorporate many of the techniques covered in previous chapters, including the awesome grid system, courtesy of Bootstrap. Before moving on with this chapter, I would recommend checking out all the examples we discussed previously and resizing the web browser to see how they react to responsive design.