0

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Responsive Web Design by Example

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 (15) Chapters

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

14. Other Books You May Enjoy

Leave a review - let other readers know what you think

Creating the Introduction Section

In this chapter, we will create the first section of our single-page portfolio website, which will be an introduction section. This section will act as the first point of call for the user as they load up the website.

The topics covered in this chapter are as follows:

Anchoring this section to the overall single-page website design flow
Responsive full-width image
Bootstrap jumbotron
Bootstrap/HTML headers
Bootstrap/HTML subheaders
Debugging and testing responsive design

The rest of the chapter is locked

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $19.99/month. Cancel anytime

Authors (1)

Frahaan Hussain

Frahaan Hussain

Frahaan Hussain is the CEO and lead developer at Sonar Systems, the world leader in educational material for the game engine Cocos2d-x, one of the best and most popular game engines in the world. With years of experience programming and running an online education platform (Sonar Learning), he can help and support new programmers like you. He is also a University Lecturer teaching a variety of topics in games programming from games design to OpenGL shader programming. He is also a published author of games design and, soon to be released, responsive web design.

See other products by Frahaan Hussain

Other recommended products

Related to this chapter

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Mastering Bootstrap 4

Mastering Bootstrap 4

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces. This book will help you adapt and customize Bootstrap to produce enticing websites that fit your needs.

Feb 2018 11h 48m

Learning Bootstrap 4 by Building Projects

Learning Bootstrap 4 by Building Projects

Bootstrap is the world's most popular frontend framework to build web applications. You will be using a template that will help you in building different kinds of real world websites such as a social media website, a company landing page, a media hosting website, and a profile page with ease.

Aug 2018 7h 16m

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m