Web Design Primer Sample - HTML CSS JS
0 likes427 views
The document is a guide aimed at ensuring code consistency and adherence to best practices in web design, particularly using Bootstrap 4. It covers key topics such as URL definitions, naming conventions, project folder structures, code and image guidelines, and shares insights on effective practices for designers. The guide is intended for educational use and encourages organization and clarity in coding projects.
Web Design Primer Sample - HTML CSS JS
- 1. Sample A guide to help 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 Primer Project 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 Primer Code 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 Primer Images 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.