This document provides a summary of best practices for front-end development. It discusses semantic HTML, CSS organization and specificity, responsive images, JavaScript performance, and other optimization techniques. Key recommendations include writing semantic HTML first before styling, avoiding inline styles, properly structuring CSS with comments and organization, reducing requests by combining files and using sprites, and placing JavaScript before the closing body tag.
This presentation was given to the desingers team at MercadoLibre. The outline is working different between HTML4 & HTML5. Understanding the different ways of giving semantics to the content is the goal.
This presentation was given to the desingers team at MercadoLibre. The outline is working different between HTML4 & HTML5. Understanding the different ways of giving semantics to the content is the goal.
Esoft Metro Campus - Diploma in Web Engineering - (Module III) Coding HTML for Basic Web Designing
(Template - Virtusa Corporate)
Contents:
Introduction to HTML
HTML Versions
HTML Standards
Creating a Simple HTML Document
Document Type Declaration
Comments in HTML
HTML Attributes
Paragraphs
Line Break
Headings
Text Formatting
Font Formatting
Images
Hyperlinks
Page Body
Lists
Tables
Cell Merging in a Table
Table Attributes
Horizontal Rule
Iframes
HTML Blocks
Division
Span
Audio
Video
Youtube Videos
Forms and Input
Introduction to CSS
Advantages of Using CSS
CSS Syntax
CSS Comments
How to Insert CSS?
CSS Tag, ID and Class Selectors
Grouping and Nesting Selectors
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables
CSS Box Model
CSS Dimension
CSS Display - Block and Inline
CSS Positioning
CSS Float
CSS Alignment
Navigation Menu in CSS
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
Introduction to Paul Irish and Divya Manian's HTML5 Boilerplate project. HTML5 Boilerplate helps you to quickly get up and running with front-end web project.
This presentation given for developers at Truelogic Software Solutions is about CSS and layouting. It is explained all the ways to re-position an element in the screen.
MercadoLibre is every day less requested with the IE7 browser. So in a few months we are going to leave giving support for that specific browser. Now, with a little previous analysis we are able to use the html5shiv tool. I used this slides to explain, share and reflect about how is and works the new HTML5 outline.
This was based on http://www.slideshare.net/hmammana/semantic-markup-creating-outline.
Esoft Metro Campus - Diploma in Web Engineering - (Module III) Coding HTML for Basic Web Designing
(Template - Virtusa Corporate)
Contents:
Introduction to HTML
HTML Versions
HTML Standards
Creating a Simple HTML Document
Document Type Declaration
Comments in HTML
HTML Attributes
Paragraphs
Line Break
Headings
Text Formatting
Font Formatting
Images
Hyperlinks
Page Body
Lists
Tables
Cell Merging in a Table
Table Attributes
Horizontal Rule
Iframes
HTML Blocks
Division
Span
Audio
Video
Youtube Videos
Forms and Input
Introduction to CSS
Advantages of Using CSS
CSS Syntax
CSS Comments
How to Insert CSS?
CSS Tag, ID and Class Selectors
Grouping and Nesting Selectors
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables
CSS Box Model
CSS Dimension
CSS Display - Block and Inline
CSS Positioning
CSS Float
CSS Alignment
Navigation Menu in CSS
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
Introduction to Paul Irish and Divya Manian's HTML5 Boilerplate project. HTML5 Boilerplate helps you to quickly get up and running with front-end web project.
This presentation given for developers at Truelogic Software Solutions is about CSS and layouting. It is explained all the ways to re-position an element in the screen.
MercadoLibre is every day less requested with the IE7 browser. So in a few months we are going to leave giving support for that specific browser. Now, with a little previous analysis we are able to use the html5shiv tool. I used this slides to explain, share and reflect about how is and works the new HTML5 outline.
This was based on http://www.slideshare.net/hmammana/semantic-markup-creating-outline.
Presentation used to give an introduction to Regular Expression in JavaScript at MercadoLibre Inc. Spanish: https://www.youtube.com/watch?v=skG03rdOhpo
Steve will show how and why to use Solr’s new Schemaless Mode, under which document indexing can be performed with no up-front schema configuration. Solr uses content clues to choose among a predefined set of field types and then automatically add previously unseen fields to the schema.
My presentation at BarCamp Ghent 2 (nov 29, 2008), providing a quick overview of HTML 5. Includes two detailed cases, one about local storage APIs and one about the new video element. Check http://lensco.be for more.
Css Founder is Website Designing Company working with the mission of Website For Everyone Website Start From 999/-* More Packages are available. we are best company in website designing company in Delhi, as we are also working in Website Designing company in Mumbai.
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Site Manager rocks! This presentation goes up to 11.
Presentation I gave at the T44U conference in Dublin (12-13 November 2009).about our tops tips for using the Site Manager Web content management system (http://www.terminalfour.com/)
Released under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland Licence.
http://creativecommons.org/licenses/by-sa/2.5/scotland/
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
1. Angular Components:
Component Configuration, Building a Template, Using Constructors, Using External Templates, Angular Routing to Single Page Application (SPA)
2. Data Binding:
Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding, Style Binding, Event Binding, Two-way Binding.
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
This presentation covers HTML basics for website and web development by iFour Technolab Pvt. Ltd.
Presentation covers following broad topics.
- Introduction To HTML
- Creating HTML Pages
- HTML Structure
- HTML Code Formatting
- HTML Structure
- HTML Code Formatting
- First HTML Page
- First HTML Page: Tags
- Tags Attributes
- Headings and Paragraphs
- Text Formatting
- Block and Inline Elements
- HTML Tables
- Form Fields
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
2. • The Web Browser
• The User Experience
• The Content Layer
• The Visual Layer
• The Behavior Layer
FrontEnd
Its parts.
http://en.wikipedia.org/wiki/Progressive_enhancement
10. Web Browser’s parts
retrieves resources from the server and visually presents them.
http://www.vineetgupta.com/2010/11/how-browsers-work-part-1-architecture/
13. But, there are
many Web Browsers with many versions.
• Internet Explorer
• Chrome
• Firefox
• Safari
• Opera
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
14. Rendering engine
by browser.
Engine used by
Gecko
Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-
gecko ... etc
Presto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet Channel
Trident Internet Explorer, Windows Phone 7
WebKit
Safari, Chrome, Adobe Air, Android Browser, Palm webOS, Symbian
S60, OWB, Stream, Flock, RockMelt
15. Reset CSS
is used to fit your layout better in those browsers.
http://www.cssreset.com/
22. Wurfl
is a feature detection technique for regressive enhancement.
http://wurfl.sourceforge.net/
23. Conditional Comments
was introduced by IE5.
<!doctype html>
<html>
<head>
<!--[if IE]>
Match with any version of IE
<![endif]-->
<title>MercadoLibre</title>
</head>
<body>
<p>The basic content</p>
<!-- Comment -->
</body>
</html>
http://librosweb.es/css_avanzado/capitulo6/comentarios_condicionales_filtros_y_hacks.html
24. Polyfills
is a feature detection technique for regressive enhancement.
http://modernizr.com/
http://yepnopejs.com/
30. HTML first
Be centered at the content and create semantic HTML.
http://adactio.com/journal/4523/
http://www.lukew.com/ff/entry.asp?1430
31. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org
The doctype
is required to do cross browser.
34. • < can be mixed with tags
• > can be mixed with tags
• “ the quotes start an attribute
• & the ampersand is also reserved
Entities
are used to implement reserved characters.
http://www.alanwood.net/demos/ansi.html
35. Attribute
values should be between quotes.
<p id=”paragraph”>It’s the content</p>
Open tag & close tag. Element with content.
<img src=”/icon.png” width=”48” alt=”Cut”>
Unique tag. Element without content.
51. Selectors
are patterns that match against elements in a tree.
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
1. header {}
2. footer p {}
3. .featured-box {}
4. a:hover {}
5. input[type=”submit”] {}
52. ID
#featured-news {
color: red;
}
Selector Category
is used to filter from the relevant rules from the irrelevant.
Class
.photo-product {
color: red;
}
Tag
div {
color: red;
}
53. Classes & IDs
Name considerations.
• Do not start with numbers
• Do not refer the design “redTitle”
• Must be a semantic name
54. html body div h1 span {
color: #ff0;
}
Key Selector
is the part that matches the element, rather than its ancestors.
Key Selector
59. Multiple Classes
may make the selector more specific or give it additional weight.
http://www.maxdesign.com.au/articles/multiple-classes/
http://paulirish.com/2008/the-two-css-selector-bugs-in-ie6/
http://www.ryanbrill.com/archives/multiple-classes-in-ie/
61. Specificity
is a mechanism that aids conflict resolution.
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://reference.sitepoint.com/css/specificity
1. style attribute
2. ID selectors
3. Class selectors
4. Tag selectors
5. at same specificity the latter defined rule take precedence
81. Requests
Do less request as possible and compress it.
• Minifies the CSS and JS files
• Join all the CSS and JS files in one file
• Cache the files
• Do Async request if you can
82. Sprites
allows you to do less request by adding many images at one.
http://css-tricks.com/css-sprites/
83. Web font
icon library allow you don’t use sprites for icons.
http://fortawesome.github.com/Font-Awesome/
85. JavaScript engine
by browser.
Engine used by
SpiderMonkey Mozilla Firefox
Rhino Mozilla
Carakan Opera
Chakra Internet Explorer > 9
JScript Internet Explorer < 8
V8 Chrome
Nitro Safari