SlideShare una empresa de 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]

Más contenido relacionado

Similar a Modern front end development

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-workshopVero Rebagliatte
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Hatem Mahmoud
 
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 TodayTodd Anglin
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8RohanMistry15
 
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 Developernariyaravi
 
New Css style
New Css styleNew Css style
New Css styleBUDNET
 
Html xhtml css
Html xhtml cssHtml xhtml css
Html xhtml cssL15338
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxKADAMBARIPUROHIT
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxAliRaza899305
 
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 ...Patrick Lauke
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good PracticesHernan Mammana
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfDark179280
 
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 Standardsweb.designer.developer
 

Similar 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
 

Más de Tricode (part of Dept)

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 IdeologyTricode (part of Dept)
 
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 ServicesTricode (part of Dept)
 
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 Tricode (part of Dept)
 
Porn, the leading influencer of Technology
Porn, the leading influencer of Technology Porn, the leading influencer of Technology
Porn, the leading influencer of Technology Tricode (part of Dept)
 
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 procesTricode (part of Dept)
 
Internet Addiction (Social Media Edition)
Internet Addiction (Social Media Edition)Internet Addiction (Social Media Edition)
Internet Addiction (Social Media Edition)Tricode (part of Dept)
 
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 workshopTricode (part of Dept)
 
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 6Tricode (part of Dept)
 
Monolithic to Microservices Architecture - STM 6
Monolithic to Microservices Architecture - STM 6Monolithic to Microservices Architecture - STM 6
Monolithic to Microservices Architecture - STM 6Tricode (part of Dept)
 
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?Tricode (part of Dept)
 
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 (part of Dept)
 
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 Tricode (part of Dept)
 
Introducing: Tricode's Software Factory
Introducing: Tricode's Software FactoryIntroducing: Tricode's Software Factory
Introducing: Tricode's Software FactoryTricode (part of Dept)
 

Más 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

Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 

Último (20)

Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 

Modern front end development