1. Front End Design By Sylvester Ndung’u
Co-Founder – Slypix Media | Lead Designer – DataScience LTD

2. Welcome
Introduction
Expectations

3. Definition
Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. UI UX IA
UxD

4. Why don’t Web users look for the best choice?
We’re usually in a hurry. And as Klein points out, “Optimizing is hard, and it takes a long time. Satisficing is more efficient.”
There’s not much of a penalty for guessing wrong. Unlike firefighting, the penalty for guessing wrong on a Web site is usually only a click or two of the Back button, making satisficing an effective strategy. (The Back button is the most-used feature of Web browsers.) Of course, this assumes that pages load quickly; when they don’t, we have to make our choices more carefully—just one of the many reasons why most Web users don’t like slow-loading pages.
Weighing options may not improve our chances. On poorly designed sites, putting effort into making the best choice doesn’t really help. You’re usually better off going with your first guess and using the Back button if it doesn’t work out.
Guessing is more fun. It’s less work than weighing options, and if you guess right, it’s faster. And it introduces an element of chance—the pleasant possibility of running into something surprising and good.

5. Best Practices Code concistency Indentation Readability
Third party libraries
Character encoding (UTF-8)
IDs vs Classes
Image optimization

6. CSS best practices
Use a new line for every selector and every declaration.
Use a single space before the opening brace in a set of rules.
Use lowercase for elements and shorthand hex values, e.g., #aaa.
Hyphenate class selector names; avoid underscores and camelCase
Quote attribute values in selectors
Use one level of indentation for each declaration.
The closing brace of declaration goes in the same column as the first character of the set of rules.
Use a single blank line between sets of rules.

7. Cleaner CSS

8. Front end Frameworks
A package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.
Bootstrap
Foundation
Material Design Lite
Skeleton

9. Tools Photo editor Photoshop Fireworks Sketch Illustrator Code editor
Dreamweaver
Sublime text
Notepad ++

10. Resources More resources www.css-tricks.com www.awwwards.com
More resources