Download Front End Design

yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

Front End Design
By Sylvester Ndung’u
Co-Founder – Slypix Media | Lead Designer – DataScience LTD | @ndungusly
• Introduction
• Expectations
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.
Why don’t Web users look for the best
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.
Best Practices
Code concistency
Third party libraries
Character encoding (UTF-8)
IDs vs Classes
Image optimization
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.
Cleaner CSS
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.
Material Design Lite
Photo editor
 Code editor
 Dreamweaver
 Sublime text
 Notepad ++
More resources