Book Image

Instant Responsive Web Design

By : Cory Simmons
Book Image

Instant Responsive Web Design

By: Cory Simmons

Overview of this book

Making your sites responsive is an easy enough skill to learn, and really pays dividends when you're selling your product to potential clients or just trying to impress your boss for that promotion you want, but understanding all your options will help you develop a workflow that really works for you. Instant Responsive Web Design makes learning mobile-friendly web design a piece of cake with site-builds imploring various approaches using a very easy-to-follow format where you'll actually be creating sites using each approach. Expand your web repertoire in a few, easy hours. Instant Responsive Web Design takes the guesswork out of responsive web design, by teaching readers the most relevant approaches and leaves it up to them to develop a workflow that works best for their style of coding. We'll help you to develop several websites from scratch using different philosophies such as the Goldilocks Approach, make your websites Fluid, understand desktop and mobile-first approaches, and master some of the tricky stuff such as making your images and video responsive. In this step-by-step guide, you'll learn everything you could ever need to become an above-average responsive web designer in a matter of hours.
Table of Contents (7 chapters)

Getting started


To follow along with this book, it's assumed you have a basic knowledge of how to make websites using HTML and CSS. If you don't know HTML/CSS, you might want to acquire some more Packt Publishing's books and/or look into the online series by Jeffrey Way, Web Development from Scratch and free video course 30 Days to Learn HTML & CSS. All of these resources are fantastic. As with anything, getting good with HTML/CSS just takes a lot of practice and actually creating things, so don't be afraid to break things.

If you know basic web development, you probably already have all the tools necessary to get into RWD, but I'm going to point out my two favorites: Sublime Text and Chrome.

Sublime Text is a great little text editor, and Chrome is a lightning fast browser with amazing W3C specification support and a great/built-in set of Developer Tools that will help you realize what is going on with your website. You can purchase Sublime Text if you have the money, but if you don't, you can use it as a free trial forever. Of course, Chrome is free.

Once you have Sublime Text, I highly recommend you to search for Sublime Text Package Control and follow the installation instructions. Once you have it installed, press Ctrl + Shift + P (or cmd + Shift + P on a Mac) and type in Package Control: Install Package, then install Emmet. You can learn more about Emmet at http://emmet.io, but suffice to say, it will save you an enormous amount of typing and time.

If these aren't your cup of tea, also check out JetStorm's WebStorm (free trial) and Mozilla Firefox with the Firebug add-on.

Tip

Downloading the color graphics PDF

For downloading the colored graphics of this book visit: http://www.packtpub.com/sites/default/files/downloads/9259OT_ColoredImages.pdf

Sublime Text on the left, Chrome with Developer Tools opened on the right. The perfect combination!