SlideShare a Scribd company logo
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)

More Related Content

What's hot

Web Development
Web DevelopmentWeb Development
Web Development
Lena Petsenchuk
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developing
Jawhar Ali
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
ParasJain222
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
Wasim Shemna
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
SudhirVarpe1
 
PHP Project PPT
PHP Project PPTPHP Project PPT
PHP Project PPT
Pankil Agrawal
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
Ruwandi Madhunamali
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
Temitayo Fadojutimi
 
Web Development
Web DevelopmentWeb Development
Web Development
Aditya Raman
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptx
Palash Sukla Das
 
Web development
Web developmentWeb development
Web development
Sunil Moolchandani
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
47ishu
 
Internship Presentation 1 Web Developer
Internship Presentation 1 Web DeveloperInternship Presentation 1 Web Developer
Internship Presentation 1 Web Developer
Hemant Sarthak
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
SWAGATHCHOWDARY1
 
Internship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperInternship Presentation 2 Web Developer
Internship Presentation 2 Web Developer
Hemant Sarthak
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
Web development
Web developmentWeb development
Web development
RaziyaChoudhary
 

What's hot (20)

Web Development
Web DevelopmentWeb Development
Web Development
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developing
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
PHP Project PPT
PHP Project PPTPHP Project PPT
PHP Project PPT
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptx
 
Web development
Web developmentWeb development
Web development
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
Internship Presentation 1 Web Developer
Internship Presentation 1 Web DeveloperInternship Presentation 1 Web Developer
Internship Presentation 1 Web Developer
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Internship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperInternship Presentation 2 Web Developer
Internship Presentation 2 Web Developer
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
Web development
Web developmentWeb development
Web development
 

Similar to Front-End Web Development

Bridging Front.pdf
Bridging Front.pdfBridging Front.pdf
Bridging Front.pdf
AmirKhan811717
 
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
Laura 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.pdf
Uncodemy
 
Full Stack Development
Full Stack DevelopmentFull 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
The Fabcode IT Solutions LLP
 
ppt-190816105541 (2).pdf
ppt-190816105541 (2).pdfppt-190816105541 (2).pdf
ppt-190816105541 (2).pdf
RamCharan481900
 
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
Laura Miller
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptx
Jenaj2
 
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
preeti katiyar
 
Wecreate
WecreateWecreate
Wecreate
Jos De Roeck
 
varun ppt.ppt
varun ppt.pptvarun ppt.ppt
varun ppt.ppt
ArunkumarKArun
 
Best software development tools in 2021
Best software development tools in 2021Best software development tools in 2021
Best software development tools in 2021
Samaritan 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.pdf
getrichoffice
 
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
Mverve1
 
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
IRJET 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 development
Benish 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 Frameworks
SeasiaInfotech2
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
learnEnglish51
 
Symfony - A Bird's Eye View
Symfony - A Bird's Eye ViewSymfony - A Bird's Eye View
Symfony - A Bird's Eye View
csushil
 

Similar to 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
 

Recently uploaded

Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
beazzy04
 
Fish and Chips - have they had their chips
Fish and Chips - have they had their chipsFish and Chips - have they had their chips
Fish and Chips - have they had their chips
GeoBlogs
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
EugeneSaldivar
 
How to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS ModuleHow to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS Module
Celine George
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
Pavel ( NSTU)
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 
How to Break the cycle of negative Thoughts
How to Break the cycle of negative ThoughtsHow to Break the cycle of negative Thoughts
How to Break the cycle of negative Thoughts
Col Mukteshwar Prasad
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
Celine George
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
siemaillard
 
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptxMARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
bennyroshan06
 
Basic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumersBasic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumers
PedroFerreira53928
 
Cambridge International AS A Level Biology Coursebook - EBook (MaryFosbery J...
Cambridge International AS  A Level Biology Coursebook - EBook (MaryFosbery J...Cambridge International AS  A Level Biology Coursebook - EBook (MaryFosbery J...
Cambridge International AS A Level Biology Coursebook - EBook (MaryFosbery J...
AzmatAli747758
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
Unit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdfUnit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdf
Thiyagu K
 
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdfESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
Fundacja Rozwoju Społeczeństwa Przedsiębiorczego
 

Recently uploaded (20)

Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
 
Fish and Chips - have they had their chips
Fish and Chips - have they had their chipsFish and Chips - have they had their chips
Fish and Chips - have they had their chips
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
 
How to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS ModuleHow to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS Module
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 
How to Break the cycle of negative Thoughts
How to Break the cycle of negative ThoughtsHow to Break the cycle of negative Thoughts
How to Break the cycle of negative Thoughts
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptxMARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
 
Basic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumersBasic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumers
 
Cambridge International AS A Level Biology Coursebook - EBook (MaryFosbery J...
Cambridge International AS  A Level Biology Coursebook - EBook (MaryFosbery J...Cambridge International AS  A Level Biology Coursebook - EBook (MaryFosbery J...
Cambridge International AS A Level Biology Coursebook - EBook (MaryFosbery J...
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
 
Unit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdfUnit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdf
 
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdfESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
 

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)