SlideShare uma empresa Scribd logo
1 de 25
Modern front end development   Standards & best practices Tricode Professional Services www.tricode.nl 23-07-2009 Sander van Beek
The front end ,[object Object],[object Object]
History ,[object Object],[object Object],[object Object],[object Object],[object Object]
Recent trends ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Considerations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Separation ,[object Object],[object Object],[object Object],[object Object]
(X)HTML Structure
(X)HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Semantics: know your tags! (1/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Semantics: know your tags! (2/2) ,[object Object],[object Object],[object Object],[object Object]
Common pitfalls (1/3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Common pitfalls (2/3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Common pitfalls (3/3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XHTML specific pitfalls ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Presentation
Basics: selectors
Basics: box model
Basics: positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS tips (1/4) ,[object Object],[object Object],[object Object],[object Object]
CSS tips (2/4) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS tips (3/4) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS tips (4/4) ,[object Object]
JavaScript Behavior
JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Further reading ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Semelhante a Modern front end development

HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
Html xhtml css
Html xhtml cssHtml xhtml css
Html xhtml css
L15338
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good Practices
Hernan Mammana
 

Semelhante a Modern front end development (20)

Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 
Css
CssCss
Css
 
New Css style
New Css styleNew Css style
New Css style
 
Html xhtml css
Html xhtml cssHtml xhtml css
Html xhtml css
 
CSS
CSSCSS
CSS
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good Practices
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdf
 
Lean And Clean! Building A Site With Web Standards
Lean And Clean! Building A Site With Web StandardsLean And Clean! Building A Site With Web Standards
Lean And Clean! Building A Site With Web Standards
 
Lean And Clean! Building A Site With
Lean And Clean! Building A Site WithLean And Clean! Building A Site With
Lean And Clean! Building A Site With
 

Mais de Tricode (part of Dept)

Mais de Tricode (part of Dept) (20)

The Top Benefits of Magnolia CMS’s Inspirational Open Suite Ideology
The Top Benefits of Magnolia CMS’s Inspirational Open Suite IdeologyThe Top Benefits of Magnolia CMS’s Inspirational Open Suite Ideology
The Top Benefits of Magnolia CMS’s Inspirational Open Suite Ideology
 
Agile QA 2017: A New Hope
Agile QA 2017: A New HopeAgile QA 2017: A New Hope
Agile QA 2017: A New Hope
 
Mobile Sensor Networks based on Smartphone devices and Web Services
Mobile Sensor Networks based on Smartphone devices and Web ServicesMobile Sensor Networks based on Smartphone devices and Web Services
Mobile Sensor Networks based on Smartphone devices and Web Services
 
Keeping Your Clients Happy and Your Management Even Happier
Keeping Your Clients Happy and Your Management Even Happier Keeping Your Clients Happy and Your Management Even Happier
Keeping Your Clients Happy and Your Management Even Happier
 
Intro to JHipster
Intro to JHipster Intro to JHipster
Intro to JHipster
 
Porn, the leading influencer of Technology
Porn, the leading influencer of Technology Porn, the leading influencer of Technology
Porn, the leading influencer of Technology
 
De 4 belangrijkste risicofactoren van het nearshoring proces
De 4 belangrijkste risicofactoren van het nearshoring procesDe 4 belangrijkste risicofactoren van het nearshoring proces
De 4 belangrijkste risicofactoren van het nearshoring proces
 
Internet Addiction (Social Media Edition)
Internet Addiction (Social Media Edition)Internet Addiction (Social Media Edition)
Internet Addiction (Social Media Edition)
 
Kids Can Code - an interactive IT workshop
Kids Can Code - an interactive IT workshopKids Can Code - an interactive IT workshop
Kids Can Code - an interactive IT workshop
 
RESTful API - Best Practices
RESTful API - Best PracticesRESTful API - Best Practices
RESTful API - Best Practices
 
Deep Learning - STM 6
Deep Learning - STM 6Deep Learning - STM 6
Deep Learning - STM 6
 
How Technology is Affecting Society - STM 6
How Technology is Affecting Society - STM 6How Technology is Affecting Society - STM 6
How Technology is Affecting Society - STM 6
 
Monolithic to Microservices Architecture - STM 6
Monolithic to Microservices Architecture - STM 6Monolithic to Microservices Architecture - STM 6
Monolithic to Microservices Architecture - STM 6
 
Customers speak on Magnolia CMS
Customers speak on Magnolia CMSCustomers speak on Magnolia CMS
Customers speak on Magnolia CMS
 
Quality Nearshoring met Tricode
Quality Nearshoring met TricodeQuality Nearshoring met Tricode
Quality Nearshoring met Tricode
 
AEM Digital Assets Management - What's new in 6.2?
AEM Digital Assets Management - What's new in 6.2?AEM Digital Assets Management - What's new in 6.2?
AEM Digital Assets Management - What's new in 6.2?
 
10 nearshoring it trends om in 2016 te volgen
10 nearshoring it trends om in 2016 te volgen 10 nearshoring it trends om in 2016 te volgen
10 nearshoring it trends om in 2016 te volgen
 
Tricode & Magnolia
Tricode & MagnoliaTricode & Magnolia
Tricode & Magnolia
 
Why you should use Adobe Experience Manager Mobile
Why you should use Adobe Experience Manager Mobile Why you should use Adobe Experience Manager Mobile
Why you should use Adobe Experience Manager Mobile
 
Introducing: Tricode's Software Factory
Introducing: Tricode's Software FactoryIntroducing: Tricode's Software Factory
Introducing: Tricode's Software Factory
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 

Modern front end development