Web Design Primer Sample - HTML CSS JS

Web Design Primer Sample - HTML CSS JS

• 1.
  Sample A guide tohelp you achieve code consistency that adheres to best practices. Web Design Primer Get Your Copy View Packages
• 2.
  Web Design Primer  Bootstrap 4 Quick Start v.1.0.0 - bootstrapcreative.com : 2 © 2017 Jacob Lett. All Rights Reserved. Please do not distribute or share without permission. You have permission to print pages but please do not try and sell it. If you have questions email me at jacoblett@bootstrapcreative.com. CONTENTS 1. What is a URL? 2. Naming Conventions 3. Project Folder Structure 4. Code Guide 5. Images Guide 6. Things I wish I Knew Upfront
• 3.
  Web Design PrimerProject Folder Structure  Bootstrap 4 Quick Start v.1.0.0 - bootstrapcreative.com : 9  contact 1  index.php 2  css 4  main.css 32  partials 8  aside.php 9  js 15  vendor 16  plugin.js 17  main.js 18  static 19  fonts 20  img 21  pdf 22  .gitignore 23  .htaccess 24  README.md 26  humans.txt 28  index.php 29  robots.txt 31 Figure 2: Project Folder - PHP Common Project Folder Structures You have a lot of freedom when it comes to naming files and folders for your project. However there are some common naming conventions that can help keep your projects organized and minimize any confusion when working with another designer. Figure 1 shows a site using PHP and node.js to compile Sass. The project is hosted on GitHub pages. Figure 2 shows a static HTML site. The project is hosted on GitHub pages. Below are descriptions for each file and folder in these different types of projects. 1. A subdirectory of your main site. The URL for this would be www.yourdomain. contact/
• 4.
  Web Design PrimerCode Guide  Bootstrap 4 Quick Start v.1.0.0 - bootstrapcreative.com : 15 CSS Rule Set A rule set is a single section of CSS including the selector, the curly braces, and the different lines with properties and values. The code in the example below comprises one rule set: .btn { display: inline-block; padding: .5rem 1rem; border-radius: .25rem; border: 1px solid; } Selector Value Curly Braces Declaration Block Property
• 5.
  Web Design PrimerImages Guide  Bootstrap 4 Quick Start v.1.0.0 - bootstrapcreative.com : 24 JPG GIF PNG8 PNG32 SVG Characteristics • Raster • Lossy 1 When to Use • Photographs with a lot of colors, shapes, and forms. • Good with gradients to lessen banding Characteristics • Raster • Some Transparency 2 When to Use • Animations • Solid colors, symbols, and line artwork • Web banners Characteristics • Raster • Some Transparency 2 • Lossless When to Use • Solid colors, symbols, and line artwork Characteristics • Raster • Full Transparency • Lossless When to Use • When you want a jpeg with transparency Characteristics • Vector • Transparency When to Use • Icons, logos, text that you want to be high quality on retina displays 1. Lossless and lossy compression are terms that describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed. 2. 1-bit transparency. Pixels are either solid or completely transparent, but never partially see-through.