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.

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 ?