Preface

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. The Internet is going mobile. Desktop-only websites just aren’t good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just "work," regardless of the devices used to access them.

This Learning Path course explains all the key approaches necessary to create and maintain a modern responsive design using HTML5 and CSS3.

What this learning path covers

Module 1, Responsive Web Design Beginner’s Guide, is a step-by-step beginner’s guide, where you will learn to build engaging responsive websites. With coverage of Responsive Grid System, Bootstrap, and Foundation, you will discover three of the most robust frameworks in responsive web design. Next, you’ll 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. The module teaches you how to build presentable, responsive websites through examples, tips, and best practices of code writing and project organization. Additionally, you will also learn how to use CSS preprocessors, LESS, and Sass, which allows you to compose leaner style rules.

Module 2, Responsive Web Design with HTML5 and CSS3, is packed with examples, and a thorough explanation of modern techniques and syntax, it provides a comprehensive resource for all things "responsive." You’ll explore the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won’t just be built "right" for today, but in the future too. The module covers every essential aspect of responsive web design. In addition, it extends the responsive design methodology by applying the latest and most useful techniques provided by HTML5 and CSS3, making designs leaner and more maintainable than ever before. It also explains common best practice methods of writing and delivering code, images, and files.

Module 3, HTML5 and CSS3 Responsive Web Design Cookbook, is your guide to obtaining full access to next generation devices and browser technology. Create responsive applications that make snappy connections for mobile browsers and give your website the latest design and development advantages to reach mobile devices. The topics in this module include responsive elements and media, responsive typography, responsive layouts, using media queries, utilizing modern responsive frameworks, developing mobile-first web applications, optimizing responsive content, and achieving unobtrusive interaction using JavaScript and jQuery. Each recipe features actual lines of code that you can apply.

At the end of this course you will learn to get and use all the tools you need to build and test your responsive web project performance and take your website to the next level.

What you need for this learning path

Module 1:

You need to have a basic understanding of HTML and CSS; at least, you should know what an HTML element is and how to style an HTML element with CSS in its fundamental form. Some degree of familiarity and experience with HTML5, CSS3, and command lines, though not essential, will be a great help to get the most out of this module. We will explain each step and all the techniques in full, along with some handy tips and references.

Furthermore, you will also need a computer running Windows, OS X, or Ubuntu; an Internet browser (preferably Google Chrome or Mozilla Firefox); and a code editor (in this module, we will use Sublime Text).

Module 2:

A text editor
An evergreen browser

Module 3:

You will need an IDE (Integrated Development Environment); NetBeans or Eclipse is recommended (there are instructions on how to get one inside), image editing software such as Photoshop or GIMP, a web host, and a local web server such as Apache or a local hosting application such as XAMPP or MAMPP.

Who this learning path is for

This course is for web developers who are familiar with HTML and CSS but want to understand the essentials of responsive web design. It is for those developers who are willing to seek innovative techniques that deliver fast, intuitive interfacing with the latest mobile Internet devices.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this course—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <feedback@packtpub.com>, and mention the course’s title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a course, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt course, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this course from your account at http://www.packtpub.com. If you purchased this course elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the course in the Search box.
Select the course for which you’re looking to download the code files.
Choose from the drop-down menu where you purchased this course from.
Click on Code Download.

You can also download the code files by clicking on the Code Files button on the course’s webpage at the Packt Publishing website. This page can be accessed by entering the course’s name in the Search box. Please note that you need to be logged in to your Packt account.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux

The code bundle for the course is also hosted on GitHub at https://github.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites. We also have other code bundles from our rich catalog of books, courses and videos available at https://github.com/PacktPublishing/. Check them out!

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our courses—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this course. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your course, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the course in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this course, you can contact us at <questions@packtpub.com>, and we will do our best to address the problem.