- 258 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
Responsive Web Design by Example : Beginner's Guide - Second Edition
About this book
Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available.
By following our detailed step-by-step instructions in this reference guide, you will learn to build engaging responsive websites. With coverage of Responsive Grid System, Bootstrap, and Foundation, you will learn about three of the most powerful frameworks in responsive web design. You will learn to create a cool blog page, a beautiful portfolio site, and a crisp professional business site and make them all totally responsive. You'll also find out which framework works best for your project specifications.
Frequently asked questions
Yes, you can cancel anytime from the Subscription tab in your account settings on the Perlego website. Your subscription will stay active until the end of your current billing period. Learn how to cancel your subscription.
No, books cannot be downloaded as external files, such as PDFs, for use outside of Perlego. However, you can download books within the Perlego app for offline reading on mobile or tablet. Learn more here.
Perlego offers two plans: Essential and Complete
- Essential is ideal for learners and professionals who enjoy exploring a wide range of subjects. Access the Essential Library with 800,000+ trusted titles and best-sellers across business, personal growth, and the humanities. Includes unlimited reading time and Standard Read Aloud voice.
- Complete: Perfect for advanced learners and researchers needing full, unrestricted access. Unlock 1.4M+ books across hundreds of subjects, including academic and specialized titles. The Complete Plan also includes advanced features like Premium Read Aloud and Research Assistant.
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Yes! You can use the Perlego app on both iOS or Android devices to read anytime, anywhere — even offline. Perfect for commutes or when you’re on the go.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app.
Yes, you can access Responsive Web Design by Example : Beginner's Guide - Second Edition by Thoriq Firdaus in PDF and/or ePUB format, as well as other popular books in Computer Science & Web Development. We have over one million books available in our catalogue for you to explore.
Information
Responsive Web Design by Example Beginner's Guide Second Edition
Table of Contents
Responsive Web Design by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
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
Pop quiz – Bootstrap button classes
Summary
6. Polishing the Responsive Portfolio Website with LESS
Basic LESS syntax
Variables
Nesting style rules
Mixins
Parametric mixins
Specify a default value in a parametric mixin
Merging mixins with extend syntax
Generating value with mathematical operations
Generating color wit...
Table of contents
- Responsive Web Design by Example Beginner's Guide Second Edition