Front-End Web Development

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.

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)

Front-End Web Development

More Related Content

What's hot (20)

Similar to Front-End Web Development (20)

Recently uploaded (20)

Front-End Web Development