Table of Contents for
Practical Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Practical Web Design by Philippe Hong Published by Packt Publishing, 2018
  1. Practical Web Design
  2. Title Page
  3. Copyright and Credits
  4. Practical Web Design
  5. PacktPub.com
  6. Why subscribe?
  7. PacktPub.com
  8. Contributers
  9. About the author
  10. About the reviewers
  11. Packt is searching for authors like you
  12. Table of Contents
  13. Preface
  14. Who this book is for
  15. What this book covers
  16. To get the most out of this book
  17. Download the example code files
  18. Download the color images
  19. Conventions used
  20. Get in touch
  21. Reviews
  22. Evolution of Web Design
  23. The first ever website
  24. Table-based layouts
  25. Introduction of Flash
  26. CSS – the savior
  27. Web 2.0
  28. The rise of the mobile
  29. Responsive web design
  30. Flat design
  31. What's next?
  32. Summary
  33. Web Design and its Components
  34. Grids
  35. The cons
  36. Call to Action
  37. Making it obvious
  38. Using contrasting color
  39. Compelling copy
  40. Placement
  41. Breadcrumb
  42. The search bar
  43. The submit button
  44. Making it noticeable
  45. Placing the search bar correctly
  46. Icons
  47. Describing in a nutshell  
  48. Drawing attention of the users
  49. Directional
  50. Modal
  51. Typography
  52. Choosing a font that connects your brand
  53. Serif fonts
  54. Sans-serif
  55. Casual scripts
  56. Don't use too much typeface
  57. Colors
  58. What colors mean
  59. Usability
  60. Simplicity
  61. Navigability
  62. Accessibility
  63. Consistency
  64. So, how can we be consistent?
  65. Design
  66. Content
  67. Interactions
  68. Summary
  69. Website-Designing Workflow
  70. Our situation
  71. Goal identification
  72. What is the purpose of the website?
  73. Who is the website for?
  74. Is this useful for our audience?
  75. What do they expect to find or do there?
  76. Does the website need to follow a brand or have its own brand identity?
  77. Are there any competitors? If there are, how is the website different than others?
  78. Defining the scope
  79. Creating wireframes
  80. Designing
  81. Get inspiration
  82. Improve
  83. Invent
  84. Implementing, testing, and launching
  85. Summary
  86. Responsive Versus Adaptive Design
  87. Responsive design
  88. Adaptive design
  89. So which one is the best?
  90. The takeaway
  91. Summary
  92. Learning HTML5
  93. Our main tool
  94. What is HTML?
  95. HTML tags
  96. HTML attributes
  97. HTML structure
  98. Creating our first page
  99. HTML elements
  100. Titles and paragraphs
  101. Links and images
  102. Summary
  103. Learning CSS3
  104. The different ways to use CSS
  105. CSS formatting
  106. Parent and child elements
  107. Classes and IDs
  108. CSS box model  
  109. The boxes
  110. Block and inline
  111. CSS layout and dividers
  112. The basic layout
  113. Formatting and indenting your HTML
  114. Styling our class
  115. Summary
  116. Building Your Own Website
  117. Our design
  118. Installing HTML Boilerplate
  119. Editing index.html
  120. Creating our web page
  121. Images folder
  122. Installing our font
  123. Importing Google Font
  124. Adding normalize.css
  125. The header
  126. Creating a menu
  127. Inserting links
  128. Adding a logo
  129. Right-hand side menu
  130. Adding a Facebook like button
  131. Styling our header
  132. Adding the hero section
  133. CSS flexbox
  134. Positioning in CSS
  135. Position static
  136. Position relative
  137. Position absolute
  138. Position fixed
  139. Position sticky
  140. Blog section
  141. Creating the ABOUT US section
  142. Adding the Partner section
  143. Adding the footer section
  144. Summary
  145. Making Our Website Responsive
  146. What are media queries? 
  147. Opening the inspector
  148. Desktop first
  149. Designing the menu
  150. What is jQuery? 
  151. jQuery syntax
  152. Making the hero section responsive
  153. Making the Blog section responsive
  154. Making the ABOUT US section responsive
  155. Making the footer section responsive
  156. Summary
  157. Adding Interaction and Dynamic Content
  158. CSS pseudo-classes
  159. Sticky navigation 
  160. JS Plugin: Waypoints
  161. CSS animation
  162. Adding a dynamic Instagram feed
  163. Installing Instafeed.js
  164. Getting images from your user account
  165. Finding our userID and TokenAccess
  166. Getting our access token
  167. Displaying the feed
  168. Summary
  169. Optimizing and Launching Our Website
  170. Creating a favicon
  171. Site performance optimization
  172. Optimizing images
  173. Optimizing our code
  174. Basic SEO improvement
  175. What is search engine optimization?
  176. Meta description
  177. Valid HTML
  178. Keywords
  179. Links
  180. Launching our website
  181. Buying a domain name
  182. Google analytics
  183. Google Search Console
  184. Summary
  185. What is Bootstrap?
  186. What is Bootstrap?
  187. Components
  188. Bootstrap Grid system
  189. Media queries
  190. Summary
  191. Building a Website with Bootstrap
  192. Installing Bootstrap 
  193. Setting up our project 
  194. Bootstrap navbar 
  195. Coding the Bootstrap navigation
  196. Styling our navigation bar 
  197. Styling the hero section
  198. Styling the Blog section
  199. Styling the about section 
  200. Styling the partner section
  201. Styling the footer
  202. Summary
  203. Introduction to Client-Side Rendering
  204. What is server-side rendering?
  205. What is client-side rendering?
  206. Pros and cons of server and client-side rendering
  207. Server-side rendering
  208. Client-side rendering
  209. Introducing to VueJS
  210. Setting up VueJS
  211. Creating a weather application in VueJS
  212. Vue Material
  213. Components
  214. OpenWeather API
  215. The API call
  216. Summary
  217. Tools to Help Your Workflow
  218. HTML Boilerplate
  219. Lorem Ipsum
  220. CSS preprocessor – LESS
  221. CSS preprocessor – SCSS
  222. ColorZilla
  223. Foundation
  224. Fontastic
  225. webflow
  226. Modernizr
  227. CSS3 Generator
  228. git
  229. CodeKit
  230. Animate.css
  231. TinyPNG
  232. Unsplash
  233. Summary
  234. Other Books You May Enjoy
  235. Leave a review - let other readers know what you think

Creating a favicon

Favicons are those little icons you see on browser tabs and on your bookmarks bar. They are part of the identity of any website and make users recognize your website:

Favicon of the Dribbble website

Don't skip this step. There is a very easy online tool to do this. We just need an image to serve as our icon, so let's do that for now. Let's go to https://realfavicongenerator.net/, which is the favicon generator. With this, we can create icons for browsers or even design them according to the different operating systems that it will run on. We just need to pick our image. In this case, we're going to use the logo provided in the assets folder, and find the image Logo_Square.png. Click Select your Favicon picture on the website and upload the logo. 

Here's what we have: 

It provides us with a bunch of icons for iOS, Android, and Windows phones with some customization, but this is not really what matters. What really matters is what's at the bottom of the page:

We will now click on the second option because we want to choose a path where we are going to put our icons since we don't want them in the root, in the main project folder. The website recommends that we put the favicon in the root, but we'll specify a different path, since there will be a lot of images and we want to keep it organized. Let's create a folder inside our img folder, and call it icons. Then, we'll edit the value in the input on the website and put /img/icons as the folder we just created. Now, let's generate the favicon! First, we need to click on Generate your Favicons and HTML code, which will take us to another page, and then we can click on the Favicon package to download it. There is also a code snippet provided, which we can copy and paste. 

This code will be inserted into the <head> tag of our website, just after <!-- Place favicon.ico in the root directory -->. 

You can remove the three lines of code provided by Boilerplate now: 

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

Our head section should look like this now: 

<head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
        <link rel="manifest" href="/img/icons/site.webmanifest">
        <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="/img/icons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-config" content="/img/icons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">

        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <link rel="stylesheet" href="fonts/font.css"> <!-- Font face CSS link -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>

The last step is to copy the files which we downloaded to our icons folder. Well done! Let's jump to the next section, where we will see how to optimize the performance of our website.