SlideShare a Scribd company logo
1 of 10
WE B DEV L OPM ENT
SRI CHARAN SIDDHARTH
2451-21-735- 178
ECE- C
•
•
-
-
--
-
•
TOPICS
• What is Front-End Development?
• The Role of a Front-End Developer
• Essential Skills
• Tools and Technologies
• HTML Fundamentals
• CSS Styling
• JavaScript Interactivity
• Responsive Design
•
WHAT IS FRONT-END
DEVELOPMENT?
Front-end development focuses on the user interface and user experience of a
website or web application.
Responsibilities: Designing and implementing the visual and interactive
elements that users interact with.
mscsid.me
_ o x
TH E ROLE OF A
FRONT-END DEVELOPER
• Translates des gns into code
• Ensures responsiveness and cross-browser compatibility
• Collaborates with Ul/UX designers
• Enhances user interactivity
ESSENTIAL
SKILLS
•Proficiency in HTML,,css,and JavaScript
•Understanding of responsive design
•Version control (e.g.,Git)
•Basic design principles
•Problem-solving and debugging skills
5
JS
A
TOOLS AN D TE CH NO LOGIES
TEXT EDITORS (E.G.,
VISUAL STUDIO CODE)
/
.
git
BROWSER DEVELOPER
TOOLS
CODE VERSION
CONTROL SYSTEMS
(E.G.,GIT)
FRAMEWORKS AND
LIBRARIES (E.G.,
REACT, ANGULAR)
•
HTM L FUNDAMENTALS
HT ML (H YPERTEXT MARKUP LANGUAGE):
( STRUCTURE OF W EB PAGES)
( STRUCTURE OF W EB PAGES)
c- S_E_M_A_N_T_C H_T_M_L
-)
CSS STYLING
CSS (CASCADING STYLE SHEETS):
(SELECTORS AND PROPERTIES) (
STYLING WEB CONTENT )
(css PREPROCESSORS (E.G.,SASSV
• JAVASCRI PT
INTERACTIVITY
ADDING INTERACTIVITY TO WEBSITES
c EVENT HANDLING
)
c DOM MAN PULATI
ION )
RESPONSIVE DESIGN
HTML
css 1
1
1
1
• Responsive Web Design:
• Creating layouts that adapt to different device
• Media queries
• Mobile-first approach
{}
THANK YOU
F O R Y O U R A T T E N T I O N

More Related Content

Similar to 1 (10 files merged).ppt

A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)Oursky
 
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptxRaihanUddin57
 
Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsLow Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsJohnMcGuigan10
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentQurinom Solutions
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptxEleenaJha
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developerHsuan Fu Lien
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentQurinom Solutions
 
What is Web Development - All About It
What is Web Development - All About ItWhat is Web Development - All About It
What is Web Development - All About ItKuljeet Babbar
 
Basics for front end developer
Basics for front end developerBasics for front end developer
Basics for front end developernamrataa0108
 
what web devlopers do.pptx
what web devlopers do.pptxwhat web devlopers do.pptx
what web devlopers do.pptxsneharathod39
 
Web Development training courses in Lahore.pptx
Web Development training courses in Lahore.pptxWeb Development training courses in Lahore.pptx
Web Development training courses in Lahore.pptxirfanakram32
 
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...Code Mastery
 
Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2ICS
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxRajnirani18
 

Similar to 1 (10 files merged).ppt (20)

A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
 
experience-cv
experience-cvexperience-cv
experience-cv
 
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
 
Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design PlatformsLow Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design Platforms
 
Full Stack Developers Hire
Full Stack Developers HireFull Stack Developers Hire
Full Stack Developers Hire
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptx
 
amanWeb.ppt.pptx
amanWeb.ppt.pptxamanWeb.ppt.pptx
amanWeb.ppt.pptx
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developer
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
 
What is Web Development - All About It
What is Web Development - All About ItWhat is Web Development - All About It
What is Web Development - All About It
 
java advert
java advertjava advert
java advert
 
Basics for front end developer
Basics for front end developerBasics for front end developer
Basics for front end developer
 
what web devlopers do.pptx
what web devlopers do.pptxwhat web devlopers do.pptx
what web devlopers do.pptx
 
Full Stack.pptx
Full Stack.pptxFull Stack.pptx
Full Stack.pptx
 
Web Development training courses in Lahore.pptx
Web Development training courses in Lahore.pptxWeb Development training courses in Lahore.pptx
Web Development training courses in Lahore.pptx
 
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
Designer and Developer Collaboration with Visual Studio 2012 and Expression B...
 
Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 

Recently uploaded

Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991RKavithamani
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...RKavithamani
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 

Recently uploaded (20)

Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 

1 (10 files merged).ppt

  • 1. WE B DEV L OPM ENT SRI CHARAN SIDDHARTH 2451-21-735- 178 ECE- C • • - - -- - •
  • 2. TOPICS • What is Front-End Development? • The Role of a Front-End Developer • Essential Skills • Tools and Technologies • HTML Fundamentals • CSS Styling • JavaScript Interactivity • Responsive Design •
  • 3. WHAT IS FRONT-END DEVELOPMENT? Front-end development focuses on the user interface and user experience of a website or web application. Responsibilities: Designing and implementing the visual and interactive elements that users interact with. mscsid.me
  • 4. _ o x TH E ROLE OF A FRONT-END DEVELOPER • Translates des gns into code • Ensures responsiveness and cross-browser compatibility • Collaborates with Ul/UX designers • Enhances user interactivity
  • 5. ESSENTIAL SKILLS •Proficiency in HTML,,css,and JavaScript •Understanding of responsive design •Version control (e.g.,Git) •Basic design principles •Problem-solving and debugging skills 5 JS A
  • 6. TOOLS AN D TE CH NO LOGIES TEXT EDITORS (E.G., VISUAL STUDIO CODE) / . git BROWSER DEVELOPER TOOLS CODE VERSION CONTROL SYSTEMS (E.G.,GIT) FRAMEWORKS AND LIBRARIES (E.G., REACT, ANGULAR)
  • 7. • HTM L FUNDAMENTALS HT ML (H YPERTEXT MARKUP LANGUAGE): ( STRUCTURE OF W EB PAGES) ( STRUCTURE OF W EB PAGES) c- S_E_M_A_N_T_C H_T_M_L -) CSS STYLING CSS (CASCADING STYLE SHEETS): (SELECTORS AND PROPERTIES) ( STYLING WEB CONTENT ) (css PREPROCESSORS (E.G.,SASSV
  • 8. • JAVASCRI PT INTERACTIVITY ADDING INTERACTIVITY TO WEBSITES c EVENT HANDLING ) c DOM MAN PULATI ION )
  • 9. RESPONSIVE DESIGN HTML css 1 1 1 1 • Responsive Web Design: • Creating layouts that adapt to different device • Media queries • Mobile-first approach {}
  • 10. THANK YOU F O R Y O U R A T T E N T I O N