Mastering Responsive Web Design with HTML5 and CSS3

• Build responsive designs with solid yet simple HTML5 and CSS3 best practices
• Use CSS preprocessors (Sass) to speed up the creation of CSS
• Each chapter covers a different feature of RWD with carefully chosen, interesting examples, including the latest developments in responsive design

• Install and use Sass with SCSS syntax to create your CSS
• Use HTML5 tags the right way for the right type of content
• Enhance the experience of users with assistive technology with ARIA roles
• Design with desktop-first approach but implement with mobile-first methodology
• For your layouts, either create and use your own scalable CSS grid, or use Flexbox
• Create three types of navigation for small screen devices
• Find the best way to serve the best type of image and how to make videos responsive
• Build custom responsive emails to ensure the message gets across regardless of the device

Responsive web design is getting more complex day by day and without the necessary design and development skill sets, it’s a matter of time before we’re left behind.

Building meaningful and accessible websites and apps using HTML5 and CSS3 is a must if we want to create memorable experiences for the users. In the ever-changing world of web designers and developers, being proficient in responsive web design is no longer an option, it is mandatory.

Whether you’re a web designer or web developer, or a seasoned expert web professional, this book will bolster your HTML and CSS skills to a master level.

The book is designed in a way that each chapter will take you one step closer to becoming an expert in RWD. The book begins with introducing you to the power of CSS preprocessors, Sass in this case, to increase the speed of writing repetitive CSS tasks, then use simple but meaningful HTML examples; and add ARIA roles to increase accessibility. You will also understand why a mobile-first approach is ideal.

Next, you will learn how to use an easily scalable CSS grid or if you prefer, use Flexbox instead. Create navigations for small screen devices using the “drawer navigation,” “off-canvas” or “toggle” navigation patterns, and also implement images and media in both responsive and responsible ways. Finally, you will build a solid and meaningful typographic scale and make sure your messages and communications display correctly with responsive emails.