Preface

I'm still amazed when I see how the web has evolved since I started working in this field. I have always liked the fact that the internet is a fast-moving technology—technology, design, process, and everything changes so quickly. 

Practical Web Design is a complete hands-on book of Web designer. Every chapter has been thoroughly revised to deliver information, tips, and approaches that are easy to understand and simple to use. 

The first part of this book is about the fundamentals of web design. It focuses on its history, evolution, and also the principal components. We will finish this book with a step-by-step design workflow and a comparison between Responsive design and Adaptive design.

The second part of this book will teach you how to build and implement your website from scratch, with an introduction to Bootstrap framework, client-side rendering, and the best tools for your design workflow. 

Who this book is for

Practical web design teaches readers the fundamentals of web design and how to build a Responsive website with interaction and dynamic content from scratch. It's the perfect book for anyone who wants to learn web design and frontend development. It's suitable for people with no experience but also great for anyone with some experience and are willing to improve it. 

What this book covers

Chapter 1, Evolution of Web Design, is about the history of web design, from the beginning of the web with Sir Tim Berners-Lee, how the World Wide Web started, to its evolution now. 

Chapter 2, Web Design and its Components, is about components in web design. This book will help you understand each component, their usage, and why it's useful in your design.

Chapter 3,  Website Designing Workflow, is about web design workflow. This book will go through all the processes from start to launch, from concept to launch, step by step. 

Chapter 4, Responsive Versus Adaptive Design, compares the Responsive design and Adaptive design. It will show you which process will suit your project best. 

Chapter 5,  Learning HTML5, teaches you the basic of HTML5, how to build and structure an HTML page.

Chapter 6, Learning CSS3, helps you to understand the fundamentals of CSS, how to stylize your HTML page with CSS. 

Chapter 7, Building Your Own Website, goes through all the processes of building a website and introduces the HTML Boilerplate and help you step your project correctly. 

Chapter 8, Making Our Website Responsive, shows you step by step how to make your website Responsive with an introduction to jQuery.

Chapter 9, Adding Interaction and Dynamic Content, add interaction and dynamic content to your website and teaches you how to call an API and show information on your website. 

Chapter 10, Optimizing and Launching Our Website, teaches you how to optimize your website using different tools and analytics. 

Chapter 11, What is Bootstrap?, explores all the possibilities with Bootstrap Framework, including Bootstrap Grid System, buttons, and forms. 

Chapter 12, Building a Website with Bootstrap, builds a website with Bootstrap Framework and helps you understand the difference and the advantage of it. 

Chapter 13, Introduction to Client-Side Rendering, introduces you the world of client-side rendering, with a quick example of a Weather Project. 

Chapter 14, Tools to Help Your Workflow, lists the best tools to enhance your design workflow. 

To get the most out of this book

To get the most out of this book, it's best to have a bit of design experience, but it's not necessary. You can go through this course without any knowledge whatsoever.

Furthermore, you'll need a computer running on Windows, or OS X; the latest version of your favorite internet browser (Chrome, Firefox, or Safari); and a code editor, in this book, we'll use Atom.

Download the example code files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

1. Log in or register at www.packtpub.com.
2. Select the SUPPORT tab.
3. Click on Code Downloads & Errata.
4. Enter the name of the book in the Search box and follow the onscreen instructions.

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 book is also hosted on GitHub at https://github.com/PacktPublishing/Practical-Web-Design. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/PracticalWebDesign_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Let's create this folder and call it Racing Club Website."

A block of code is set as follows:

<html> <!--This is our HTML main tag-->
 <head> <!--This is our head tag where we put our title and script and all infos relative to our page.-->
  <title>My Page Title</title>
 </head>
 <body> <!--This is where all our content will go-->
  <h1>John Doe</h1>

 </body>
</html>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

.content {
  background-color: red;
width: 75%;
}
.sidebar {
  background-color: green;
 width: 25%;
}

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "then click on the three dots at the right-hand corner and click on Show device frame."

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.