Mais conteúdo relacionado


Front-End Web Development

  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  (Google)  (Google Images)  (DifferenceBetween)  (Udacity)  (Wikipedia)  (Hackernoon)