What is front-end development ?
2 likes889 views
The document provides an overview of front-end development, contrasting it with back-end development and detailing various roles and responsibilities of front-end developers. It emphasizes essential skills, design systems, and tools necessary for effective front-end engineering. Additionally, it includes resources for further learning about front-end technologies and practices.
![By: Mahmoud shaker twitter
@shakercs
https://en.wikipedia.org/wiki/Document_Object_Model
The Document Object Model (DOM) is a cross-
platform and language-independent application programming
interface that treats an XML or HTMLdocument as a tree
structure wherein each node is an object representing a part
of the document. The DOM represents a document with a
logical tree. Each branch of the tree ends in a node, and each
node contains objects. DOM methods allow programmatic
access to the tree; with them one can change the structure,
style or content of a document. Nodes can have event
handlers attached to them. Once an event is triggered, the
event handlers get executed.[2]
7. What should Front End developer know ?](https://image.slidesharecdn.com/whatisfrontenddevelopment-191109133256/85/What-is-front-end-development-14-320.jpg)
What is front-end development ?
- 1. By: Mahmoud shaker twitter @shakercs What is front end development ? By: Mahmoud shaker Front End engineer https://www.linkedin.com/in/shakercs/ @shakercs
- 2. By: Mahmoud shaker twitter @shakercs Agenda 1. Front end vs Backend 2. Front-End intersections ( designers - developers) 3. Design system 4. UI developer VS Front end developer 5. Front End Skills 6. Front-End roles and responsibilities 7. What should Front End developer know ?
- 3. By: Mahmoud shaker twitter @shakercs https://www.youtube.com/watch?time_continue=1 2&v=DcqWnMqmchs&feature=emb_title 1. Front end vs Backend
- 4. By: Mahmoud shaker twitter @shakercs 2. Front-End intersections ( designers - developers) Front End Back EndDesign - Design system - Interaction - UI framework - HTML /CSS - JavaScript - Front-end Architecture End user
- 5. By: Mahmoud shaker twitter @shakercs 3. Design system “collaboration tool bridging design and development teams” – former engineer at Lonely Planet Top Design systems samples : • Material – Google • Carbon – IBM • Atlassian Design System • AIRBNB DESIGN • FLUENT BY MICROSOFT • MAILCHIMP • LIGHTNING – SALESFORCE Image reference: https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
- 6. By: Mahmoud shaker twitter @shakercs 4. UI developer vs Front end developer
- 7. By: Mahmoud shaker twitter @shakercs 4. UI developer vs Front end developer
- 8. By: Mahmoud shaker twitter @shakercs 4. UI developer vs Front end developer
- 9. By: Mahmoud shaker twitter @shakercs 4. UI developer vs Front end developer
- 10. By: Mahmoud shaker twitter @shakercs 5. Roles and responsibilities • Determining the structure and design of web pages. • Developing features to enhance the user experience. • Striking a balance between functional and aesthetic design. • Ensuring web design is optimized for smartphones. • Building reusable code for future use. • Optimizing web pages for maximum speed and scalability. • Utilizing a variety of markup languages to write web pages. • Maintaining brand consistency throughout design. • Create and maintain automated tests to ensure quality and save time and money • Help set technical standards and best practices for the front end team • Cross browsers • Responsive • Multi direction
- 11. By: Mahmoud shaker twitter @shakercs 6. Skills • ProgressiveWebApps(PWA) • ContentManagementSystems(CMS) • Node.js • Cross-BrowserTesting • Cross-PlatformTesting • UnitTesting • Cross-DeviceTesting • Accessibility • SearchEngineOptimization(akaSEO) • InteractionorUserInterfaceDesign • UserExperience • Usability • E-commerceSystems • PortalSystems • Wire-framing • Prototyping • CSSLayout/Grids • DOMManipulation(e.g.,jQuery) • MobileWebPerformance • LoadTesting • PerformanceTesting • VersionControl(e.g.,GIT) • MVC/MVVM/MV* • DataFormats(e.g.,JSON,XML) • DataAPIs(e.gRestfulAPI) • WebFontEmbedding
- 12. By: Mahmoud shaker twitter @shakercs 6. Skills • ScalableVectorGraphics(akaSVG) • RegularExpressions • ContentStrategy • Microdata/Microformats • TaskRunners,BuildTools,ProcessAutomationTools • ResponsiveWebDesign • Object-OrientedProgramming • ApplicationArchitecture • Modules • PackageManagers • JavaScriptAnimation • CSSAnimation • Charts/Graphs • CodeQualityTesting • CommandLine/CLI • TemplatingEngines(Jade,handelbars,twig,..) • SinglePageApplications • XHRRequests(akaAJAX) • Web/BrowserSecurity • HTMLSemantics • BrowserDeveloperTools
- 13. By: Mahmoud shaker twitter @shakercs 7. What should Front End developer know ?
- 14. By: Mahmoud shaker twitter @shakercs https://en.wikipedia.org/wiki/Document_Object_Model The Document Object Model (DOM) is a cross- platform and language-independent application programming interface that treats an XML or HTMLdocument as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.[2] 7. What should Front End developer know ?
- 15. By: Mahmoud shaker twitter @shakercs https://medium.com/altcampus/introduction-to-box-model-e237de4f87a3 7. What should Front End developer know ?
- 16. By: Mahmoud shaker twitter @shakercs https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 7. What should Front End developer know ?
- 17. By: Mahmoud shaker twitter @shakercs https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 7. What should Front End developer know ?
- 18. By: Mahmoud shaker twitter @shakercs https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 7. What should Front End developer know ?
- 19. By: Mahmoud shaker twitter @shakercs https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 7. What should Front End developer know ?
- 20. By: Mahmoud shaker twitter @shakercs https://www.onlinedesignteacher.com/2015/01/css3-media-queries-for-responsive_81.html 7. What should Front End developer know ?
- 21. By: Mahmoud shaker twitter @shakercshttps://javascript.info/bubbling-and-capturing 7. What should Front End developer know ?
- 22. By: Mahmoud shaker twitter @shakercs Front End Development roadmap : https://hackernoon.com/the-2019-web-developer-roadmap-ab89ac3c380e Frontend Architecture for Design Systems (Book): https://drive.google.com/file/d/19_hgo8efZCHLbWUwitKTt7tuSwf3A2mt/view ?usp=sharing https://developer.mozilla.org/en-US/ Programming with Mosh https://www.youtube.com/user/programmingwithmosh freeCodeCamp.org https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ Google web development https://developers.google.com/web/ Elzero Web School https://www.youtube.com/user/OsamaElzero Medhat Dawoud https://www.youtube.com/user/Med7atDawoud Mobarmg https://www.youtube.com/user/mido330664 7. What should Front End developer know ?