SlideShare une entreprise Scribd logo
1  sur  14
JAIPUR ENGINEERING COLLEGE AND
RESEARCH CENTER, JAIPUR
PRESENTATION ON TRAINING
taken at
Udacity Inc.
SUBMITTED TO: SUBMITTED BY:
Mr. Rajesh Bhatija Yash Kumar Sati
15EJCEC841
INTRODUCTION
ABOUT UDACITY:
 Founded by Sebastian Thrun, David Stavens, and Mike
Sokolsky offering Massive Open Online Courses (i.e.
MOOCs).
 Its mission is to democratize education through the
offering of world-class higher education opportunities that
are accessible, flexible, and economical.
 It is one of the largest E-learning site which has tie ups
with international organizations such as Google, AT&T
etc. for providing various vocational courses to students.
 Awarded with the Europe’s 2017 Digital Skills Award in
the “Digital Skills for ICT Professionals” category.
 Listed in top 50 smartest companies in MIT Technology
Review's 2017 List.
COURSES OFFERED
There are various courses offered by the company with perks such
as, courses are co-created with well-known industrial leaders such
as Google, AT&T, Amazon, Facebook etc. & almost 80% of the
courses are job-ready along with the career preparation for
industrial level like:
 Cybersecurity
 Google Analytics
 Machine Learning Engineer
 iOS Developer
 Business Analyst
 Data Analyst
 Full Stack Web Developer
…and many more
SKILLS WHICH I’VE LEARNT
Front-End Web Development, Shell Programming & Version Control System (VCS)
WEB DEVELOPMENT
 Web development is the work involved in developing a website for the Internet (World
Wide Web) or an intranet (a private network).
 Web development can range from developing a simple single static page of plain text to
complex web-based internet applications (web apps) electronic businesses, and social
network services.
 The different areas of web development include graphic design; interface design;
authoring, including standardized code and proprietary software; user experience
design (i.e. responsiveness & accessibility); search engine optimization; back-end
functionality; testing etc.
 Role of the web developer can be categorized into three main sections:
• Front-End Web Developer (deals with the layout and visuals of a website).
• Back-End Web Developer (deals with the functionality of the website).
• Full Stack Web Developer (deals with both visuals and functionality of the website).
FRONT-END WEB DEVELOPMENT
 Front-end web development is the practice of converting data to graphical interface for
user to view and interact with data through digital interaction using HTML, CSS and
JavaScript.
 There are several tools and platform which can be used to develop the front end of a
website but it is up to the developer which tools he/she wants to use which best fits for
his/her specific task in development.
 Developer at least should have knowledge about the following languages in order to start
developing websites: Hyper Text Markup Language (HTML), Cascading Style Sheets
(CSS), JavaScript (JS).
 A front-end web developer must keep these points in mind while utilizing available tools
and techniques in order to develop a better website for wide user range:
• Accessibility (i.e. easier navigation for disabled persons).
• Performance optimization (i.e. less load time when opening your website).
• Responsive (i.e. your website should be able to render correctly on all of the devices)
STATIC VS DYNAMIC WEBSITE
STATIC WEBSITE DYNAMIC WEBSITE
Content is fixed and each page is coded in
plain HTML & CSS.
Content is dynamic which changes
according to user’s preferences.
Displays the same design and content to
every user who visits the website.
Offers a unique mix of dynamic content,
multimedia elements & interactive
features.
Updates can be tedious and prone to errors. Design updates can be much simpler.
More control and flexibility as each page
design is unique.
User has complete control over updating
the design and changing the content.
Plain HTML is required to create static
pages.
PHP, JavaScript, ASP and JSP can be used
to create dyamic pages.
SHELL PROGRAMMING
 A shell program (sometimes called a shell script) is a text file that contains standard
UNIX and shell commands.
 The shell is a command-line interface for running programs on your computer.
 The shell shows output of the program which user had entered.
 Majority of web servers run on Linux and the shell is the vital tool for deployment and
remote administration on Linux servers.
 The program which we use to interact with the shell is called a Terminal program.
 For web-developers a UNIX-style shell is a professional standard as most of the web runs
on Linux servers.
 The most popular type of UNIX-style shell is the Bash shell.
Fig. Shell Terminal on Windows Fig. Shell Terminal on MacOS
SHELL TERMINALS
Fig. Shell Terminal on Ubuntu/Linux
VERSION CONTROL SYSTEM (VCS)
 Also known as Source Code Manager (SCM).
 A Version Control System (VCS) is a tool that manages different versions of source code.
 There are two main types of version control system models:
• The Centralized Model (all users connect to a central, master repository)
• The Distributed Model (each user has the entire repository on their computer)
 VCS is used to maintain detailed history of the project as well as provides the ability to
work on different versions of it also enables working on different branch of the project
simultaneously.
 Three of the most popular version control systems are:
• Git (Most widely used VCS)
• Subversion
• Mercurial
WHAT I’VE LEARNT FROM THIS TRAINING
 Learned about new ideas, techniques and methods to implement most advance tools in my
website i.e. Firebug, BrowserShots, LibraryImport, etc.
 Learned how to worked with most advance UNIX-style shell (Bash) which is a vital tool for
deployment & remote administration of the Linux servers.
 Learned better organizational ways to improve project readability & efficiency like:
• Using gulp (a JavaScript toolkit) for automation of time consuming & repetitive tasks
involved in web development like minification, concatenation, cache busting, unit
testing, linting, optimization, etc.
• Using SASS for better CSS indentation.
 Learned how to use Front End frameworks, integrating APIs (Application Programming
Interface), managing & working on repositories, using VCS and build offline capable websites.
 Learned about various optimization techniques like responsiveness, accessibility, Image
optimization, file compression, HTTP request reduction, etc.
 Learned code debugging & testing with Jasmine JavaScript Frameworks.
SO WHAT’s NEW?
 Elm is becoming popular within the JavaScript community, primarily among those who
prefer functional programming, which is on the rise. Like Babel, TypeScript, and Dart,
Elm transpiles to JavaScript.
 The Reason is a functional and static type programming language that can drive web
applications on a single page. It allows you to write security code of type that plays well
with JavaScript and OCaml. It also includes a Reason React wrapper that allows you to
write the Reason code that is compiled into React JS. Facebook is using Reason in
production to drive the Messenger web application.
 Vue.js is the most popular JavaScript frameworks nowadays. It is a JavaScript library for
building web interfaces. Vue is lightweight & easy to learn.
 Next.js is a minimalist framework for JavaScript applications. Helps simplify the
implementation experience of an application. When combined with React, you can get all
the powerful React functionality at the same time you get a simple experience similar to
Vue in terms of tools, code division, routing, etc.
THANK YOU
REFERENCES
 www.google.com (Google)
 www.images.google.com (Google Images)
 www.differencebetween.net (DifferenceBetween)
 www.udacity.com (Udacity)
 www.wikipedia.com (Wikipedia)
 www.hackernoon.com (Hackernoon)

Contenu connexe

Tendances

Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development47ishu
 
Full stack development
Full stack developmentFull stack development
Full stack developmentArnav Gupta
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project PresentationMilind Gokhale
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student Abhishekchauhan863165
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developerSudhirVarpe1
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
Full Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxFull Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxRamudgarYadav
 
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web DevelopmentSam Dias
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-endMosaab Ehab
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentGlobal Media Insight
 
Report file on Web technology(html5 and css3)
Report file on Web technology(html5 and css3)Report file on Web technology(html5 and css3)
Report file on Web technology(html5 and css3)PCG Solution
 
Internship Presentation 1 Web Developer
Internship Presentation 1 Web DeveloperInternship Presentation 1 Web Developer
Internship Presentation 1 Web DeveloperHemant Sarthak
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developingJawhar Ali
 

Tendances (20)

Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
Full stack development
Full stack developmentFull stack development
Full stack development
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Full Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxFull Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptx
 
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web Development
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
 
Report file on Web technology(html5 and css3)
Report file on Web technology(html5 and css3)Report file on Web technology(html5 and css3)
Report file on Web technology(html5 and css3)
 
Internship Presentation 1 Web Developer
Internship Presentation 1 Web DeveloperInternship Presentation 1 Web Developer
Internship Presentation 1 Web Developer
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developing
 

Similaire à Front-End Web Development

Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfLaura Miller
 
Build Innovative Web Applications with Full Stack Development Know -123.pdf
Build Innovative Web Applications with Full Stack Development Know -123.pdfBuild Innovative Web Applications with Full Stack Development Know -123.pdf
Build Innovative Web Applications with Full Stack Development Know -123.pdfUncodemy
 
Building a Strong Online Presence: The Essentials of Full Web Development
Building a Strong Online Presence: The Essentials of Full Web DevelopmentBuilding a Strong Online Presence: The Essentials of Full Web Development
Building a Strong Online Presence: The Essentials of Full Web DevelopmentThe Fabcode IT Solutions LLP
 
ppt-190816105541 (2).pdf
ppt-190816105541 (2).pdfppt-190816105541 (2).pdf
ppt-190816105541 (2).pdfRamCharan481900
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfLaura Miller
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptxJenaj2
 
7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdfpreeti katiyar
 
Best software development tools in 2021
Best software development tools in 2021Best software development tools in 2021
Best software development tools in 2021Samaritan InfoTech
 
Mastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdf
Mastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdfMastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdf
Mastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdfgetrichoffice
 
5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdfMverve1
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeIRJET Journal
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end developmentBenish Balakrishnan
 
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING PamRobert
 
Navigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksNavigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksSeasiaInfotech2
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxlearnEnglish51
 
Symfony - A Bird's Eye View
Symfony - A Bird's Eye ViewSymfony - A Bird's Eye View
Symfony - A Bird's Eye Viewcsushil
 

Similaire à Front-End Web Development (20)

Bridging Front.pdf
Bridging Front.pdfBridging Front.pdf
Bridging Front.pdf
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdf
 
Build Innovative Web Applications with Full Stack Development Know -123.pdf
Build Innovative Web Applications with Full Stack Development Know -123.pdfBuild Innovative Web Applications with Full Stack Development Know -123.pdf
Build Innovative Web Applications with Full Stack Development Know -123.pdf
 
Full Stack Development
Full Stack DevelopmentFull Stack Development
Full Stack Development
 
Building a Strong Online Presence: The Essentials of Full Web Development
Building a Strong Online Presence: The Essentials of Full Web DevelopmentBuilding a Strong Online Presence: The Essentials of Full Web Development
Building a Strong Online Presence: The Essentials of Full Web Development
 
ppt-190816105541 (2).pdf
ppt-190816105541 (2).pdfppt-190816105541 (2).pdf
ppt-190816105541 (2).pdf
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptx
 
7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf
 
Wecreate
WecreateWecreate
Wecreate
 
varun ppt.ppt
varun ppt.pptvarun ppt.ppt
varun ppt.ppt
 
Best software development tools in 2021
Best software development tools in 2021Best software development tools in 2021
Best software development tools in 2021
 
Mastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdf
Mastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdfMastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdf
Mastering Full-Stack Web Development in 7 Days Your Ultimate Guide.pdf
 
5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future Scope
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end development
 
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
 
Navigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksNavigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development Frameworks
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
Symfony - A Bird's Eye View
Symfony - A Bird's Eye ViewSymfony - A Bird's Eye View
Symfony - A Bird's Eye View
 

Dernier

General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxJisc
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17Celine George
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jisc
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxCeline George
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfDr Vijay Vishwakarma
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 

Dernier (20)

General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 

Front-End Web Development

  • 1. JAIPUR ENGINEERING COLLEGE AND RESEARCH CENTER, JAIPUR PRESENTATION ON TRAINING taken at Udacity Inc. SUBMITTED TO: SUBMITTED BY: Mr. Rajesh Bhatija Yash Kumar Sati 15EJCEC841
  • 2. INTRODUCTION ABOUT UDACITY:  Founded by Sebastian Thrun, David Stavens, and Mike Sokolsky offering Massive Open Online Courses (i.e. MOOCs).  Its mission is to democratize education through the offering of world-class higher education opportunities that are accessible, flexible, and economical.  It is one of the largest E-learning site which has tie ups with international organizations such as Google, AT&T etc. for providing various vocational courses to students.  Awarded with the Europe’s 2017 Digital Skills Award in the “Digital Skills for ICT Professionals” category.  Listed in top 50 smartest companies in MIT Technology Review's 2017 List.
  • 3. COURSES OFFERED There are various courses offered by the company with perks such as, courses are co-created with well-known industrial leaders such as Google, AT&T, Amazon, Facebook etc. & almost 80% of the courses are job-ready along with the career preparation for industrial level like:  Cybersecurity  Google Analytics  Machine Learning Engineer  iOS Developer  Business Analyst  Data Analyst  Full Stack Web Developer …and many more
  • 4. SKILLS WHICH I’VE LEARNT Front-End Web Development, Shell Programming & Version Control System (VCS)
  • 5. WEB DEVELOPMENT  Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network).  Web development can range from developing a simple single static page of plain text to complex web-based internet applications (web apps) electronic businesses, and social network services.  The different areas of web development include graphic design; interface design; authoring, including standardized code and proprietary software; user experience design (i.e. responsiveness & accessibility); search engine optimization; back-end functionality; testing etc.  Role of the web developer can be categorized into three main sections: • Front-End Web Developer (deals with the layout and visuals of a website). • Back-End Web Developer (deals with the functionality of the website). • Full Stack Web Developer (deals with both visuals and functionality of the website).
  • 6. FRONT-END WEB DEVELOPMENT  Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript.  There are several tools and platform which can be used to develop the front end of a website but it is up to the developer which tools he/she wants to use which best fits for his/her specific task in development.  Developer at least should have knowledge about the following languages in order to start developing websites: Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript (JS).  A front-end web developer must keep these points in mind while utilizing available tools and techniques in order to develop a better website for wide user range: • Accessibility (i.e. easier navigation for disabled persons). • Performance optimization (i.e. less load time when opening your website). • Responsive (i.e. your website should be able to render correctly on all of the devices)
  • 7. STATIC VS DYNAMIC WEBSITE STATIC WEBSITE DYNAMIC WEBSITE Content is fixed and each page is coded in plain HTML & CSS. Content is dynamic which changes according to user’s preferences. Displays the same design and content to every user who visits the website. Offers a unique mix of dynamic content, multimedia elements & interactive features. Updates can be tedious and prone to errors. Design updates can be much simpler. More control and flexibility as each page design is unique. User has complete control over updating the design and changing the content. Plain HTML is required to create static pages. PHP, JavaScript, ASP and JSP can be used to create dyamic pages.
  • 8. SHELL PROGRAMMING  A shell program (sometimes called a shell script) is a text file that contains standard UNIX and shell commands.  The shell is a command-line interface for running programs on your computer.  The shell shows output of the program which user had entered.  Majority of web servers run on Linux and the shell is the vital tool for deployment and remote administration on Linux servers.  The program which we use to interact with the shell is called a Terminal program.  For web-developers a UNIX-style shell is a professional standard as most of the web runs on Linux servers.  The most popular type of UNIX-style shell is the Bash shell.
  • 9. Fig. Shell Terminal on Windows Fig. Shell Terminal on MacOS SHELL TERMINALS Fig. Shell Terminal on Ubuntu/Linux
  • 10. VERSION CONTROL SYSTEM (VCS)  Also known as Source Code Manager (SCM).  A Version Control System (VCS) is a tool that manages different versions of source code.  There are two main types of version control system models: • The Centralized Model (all users connect to a central, master repository) • The Distributed Model (each user has the entire repository on their computer)  VCS is used to maintain detailed history of the project as well as provides the ability to work on different versions of it also enables working on different branch of the project simultaneously.  Three of the most popular version control systems are: • Git (Most widely used VCS) • Subversion • Mercurial
  • 11. WHAT I’VE LEARNT FROM THIS TRAINING  Learned about new ideas, techniques and methods to implement most advance tools in my website i.e. Firebug, BrowserShots, LibraryImport, etc.  Learned how to worked with most advance UNIX-style shell (Bash) which is a vital tool for deployment & remote administration of the Linux servers.  Learned better organizational ways to improve project readability & efficiency like: • Using gulp (a JavaScript toolkit) for automation of time consuming & repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc. • Using SASS for better CSS indentation.  Learned how to use Front End frameworks, integrating APIs (Application Programming Interface), managing & working on repositories, using VCS and build offline capable websites.  Learned about various optimization techniques like responsiveness, accessibility, Image optimization, file compression, HTTP request reduction, etc.  Learned code debugging & testing with Jasmine JavaScript Frameworks.
  • 12. SO WHAT’s NEW?  Elm is becoming popular within the JavaScript community, primarily among those who prefer functional programming, which is on the rise. Like Babel, TypeScript, and Dart, Elm transpiles to JavaScript.  The Reason is a functional and static type programming language that can drive web applications on a single page. It allows you to write security code of type that plays well with JavaScript and OCaml. It also includes a Reason React wrapper that allows you to write the Reason code that is compiled into React JS. Facebook is using Reason in production to drive the Messenger web application.  Vue.js is the most popular JavaScript frameworks nowadays. It is a JavaScript library for building web interfaces. Vue is lightweight & easy to learn.  Next.js is a minimalist framework for JavaScript applications. Helps simplify the implementation experience of an application. When combined with React, you can get all the powerful React functionality at the same time you get a simple experience similar to Vue in terms of tools, code division, routing, etc.
  • 14. REFERENCES  www.google.com (Google)  www.images.google.com (Google Images)  www.differencebetween.net (DifferenceBetween)  www.udacity.com (Udacity)  www.wikipedia.com (Wikipedia)  www.hackernoon.com (Hackernoon)