Web Dev Reviewer PDF

LESSON 1: WEB DEVELOPMENT INTRODUCTION AND FUNDAMENTALS The Internet A vast network that connects computers all over the world. Through the Internet, people can share information and communicate from anywhere with an Internet connection. It works through a series of networks that...

LESSON 1: WEB DEVELOPMENT INTRODUCTION AND FUNDAMENTALS The Internet A vast network that connects computers all over the world. Through the Internet, people can share information and communicate from anywhere with an Internet connection. It works through a series of networks that connect devices around the world through telephone lines. The widespread use of mobile broadband and Wi-Fi in the 21st century has allowed this connection to be wireless The Internet consists of technologies developed by different individuals and organizations. Important figures include Robert W. Taylor, who led the development of the ARPANET (an early prototype of the Internet), and Vinton Cerf and Robert Kahn, who developed the Transmission Control Protocol/Internet Protocol (TCP/IP) technologies. Users are provided access to the Internet by Internet service providers. Internet is theoretically decentralized and thus controlled by no single entity. The Intranet A private network contained within an enterprise that is used to securely share company information and computing resources among employees. It can also be used for working in groups and teleconferences. Intranets encourage communication within an organization. They let employees easily access important information, links, applications, forms and databases of company records. The World Wide Web Also called as The Web, the leading information retrieval service of the Internet. The Web gives users access to a vast array of mass media and content. Operates within the Internet’s basic client-server format. Web Technologies (4 Main Classifications) 1. Web Browser - An application software to explore www (World Wide Web). It provides an interface between the server and the client and requests to the server for web documents and services. 2. Web Server - A program which processes the network requests of the users and serves them with files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP). 3. Web Page - A digital document that is linked to the World Wide Web and viewable by anyone connected to the internet has a web browser. 4. Web Development - It is the creation of an application that works over the internet. Web Development Concepts and Principles Web Development Refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. 1. Web Developer - Someone who take a design and the required functionalities as to what the client wants and turns it into a website. 2. Website - It is a collection of web pages that are grouped together and usually connected in various ways. 3. Domain Name - Name of your website and what you want your customers to know you as. 4. Search Engines - They are platforms – usually in the form of a website like Google, Bing, Yahoo, or DuckDuckGo – that help you find web pages. 5. URL/Hyperlinks - It is the website address on the world wide web used to access a specific resource on the internet, be it a page or a web server. 7 Principles of Web Development 1. Focus on the User 2. Code Responsibility 3. Focus on the Quality 4. Keep It Simple 5. Know your Field 6. Think Long-Term 7. Don’t Repeat Yourself (aka One Cannot Maintain) 7 Important Things you must consider in Web Development 1. Purpose/Goal of the Website 2. Target Market 3. Security 4. SEO & Essential Plugins 5. Typography 6. Site Performance & Speed 7. Web Design & Layout Types of Web Development 1. Front-End Development - They design and develop the visual aspects, including the layout, navigation, graphics, and other aesthetics. 2. Back-End Development - These developers work with systems like servers, operating systems, APIs, and databases and manage the code for security, content, and site architecture. 3. Full-Stack Development - They work in both the front-end and back-end sides of a website. They can create a website, application, or software program from start to finish. 3 Support Tools for Web Dev Beginners 1. Sublime Text - A shareware text and source code editor available for Windows, macOS, and Linux. It natively supports many programming languages and markup languages. 2. Visual Studio Code - A code editor redefined and optimized for building and debugging modern web and cloud applications. 3. Canva - an online design tool that offers users the opportunity to create posters, slideshows, event flyers, resumes, certificates, infographics, and other media. Importance of Web Development ✔To reach a global audience. ✔To build brand awareness. ✔To generate leads and sales. ✔To provide customer support. ✔To improve communication and collaboration.  Web development is also important for students because it can teach them valuable skills such as coding, problem-solving, and creativity. Web development skills are in high demand in the job market, so learning web development can make students more competitive when they are looking for jobs. LESSON 1.1: WEBSITES AND WEB APPLICATIONS Website A group of webpages that are all related to each other and are usually connected in some way. Is usually made up of many individual files that all work together to display the content on the screen. Is typically divided into several sections or pages. The main page of a website is called the home page. The home page is typically where you’ll find an overview of the entire website and links to all of the other pages on the site. The most common situations when you need to build a website: When you want to offer clear and attractive information about your products, services and business vision. When you want to create social proof and showcase testimonials and case studies. When you want to communicate your brand vision and create brand awareness. When you want to increase the number of leads. When you want to offer automated and fast customer support. Web Application A software application that is hosted on a web server and accessed via a web browser. Web apps are usually written in a scripting language such as PHP, Perl or Java and use a database such as MySQL or PostgreSQL to store data. They also allow users to access their data from any device with a web browser, including smartphones and tablets. Additionally, web apps can be updated and changed without having to redeploy the entire application. This makes them much more agile than traditional desktop applications. The most common situations when you need to build a web app are: When you want your brand to stand out of the box in the market. When you want to connect with your consumers personally, making engagement easy and smooth. When you want to generate leads and attract prospects, but also trim down the efforts of data organization. When you want a cost-effective option to interact with your customers: SaaS have “pay as you go” memberships. Types of Websites 1. BLOGS 2. BUSINESS / CORPORATE 3. NGO / NON-PROFIT 4. E-COMMERCE 5. EDUCATIONAL 6. ENTERTAINMENT 7. PORTFOLIO 8. SOCIAL MEDIA 9. FORUMS 10. WEB PORTAL Types of Web Applications 1. Static Web Apps The static web app directly delivers the content to the end user’s browser without fetching any data from the server. Most static web apps are known to be simple and effortless to develop across the web. HTML, CSS, and JavaScript are used to develop most static web applications. 2. Dynamic Web Apps A web application that generates the data in real-time based on the user’s request and server response. Sample of dynamic websites: Netflix, Facebook, Hubspot 3. Single Page Apps A single-page application runs entirely within a browser and doesn’t require page reloading. (For example, while accessing an email app, its headers and sidebars will stay intact as you access your inbox.) They are comparatively quicker in comparison to traditional web applications because single page application’s logic is directly implemented in the web browser rather than the server Sample of SPA: Paypal, Gmail, Pinterest 4. Multiple Page Apps A web app that includes multiple pages and reloads the whole page whenever a user navigates to a different page. For example, when you log in to Amazon to buy a mobile phone, you need to click on a specific mobile phone, as soon as you will add a phone to your cart and hit the next button, the web app will redirect you to the next page, then you need to click on buy and again redirect to card page to finalize your order. Sample of multiple page apps: Google drive, Trello 5. Animated Page Web Apps A web application that supports animation and synchronization on the web platform. Usually, HTML5, JavaScript, CSS, FLASH, and SVG are the best possible solutions to create animated web apps. Sample of animated page web apps: Squad Easy - https://www.squadeasy.com/en/about, Mikimottes - http://www.mikimottes.com/ 6. Content Management Systems A software program that helps users manage digital content, improve the production and management of content is known as CMS. It helps to create, modify, and manage content without technical knowledge. You don’t even require coding or the knowledge of markup languages. A CMS can be oriented towards blogging or general web publishing. Sample of CMS: WordPress, Drupal, Joomla 7. E-Commerce Web Apps A web application that helps users electronically buy or sell goods over the internet. (Payment integration and transaction integration are essential parts of e-commerce web apps.) E-commerce draws on technologies like electronic funds, inventory management systems, mobile commerce, internet market, and supply chain management. Sample of CMS: Amazon, eBay, Walmart 8. Portal Web Apps A type of web application that is accessible over the web and brings out the details from different sources like emails, online forums, and search engines in a uniform way. Portal web applications allow scale organization and its processes by allowing personalized access and user-centric navigation based on the user’s needs. Client portals, patient portals, and education university portals are some of the different types of web based application portals. Sample of CMS: Udemy, Coursera 9. Progessive Web Apps Progressive web apps are known as cross-platform web applications which use the latest browser APIs (Application Programming Interface), features, and progressive enhancement methods to offer you an experience like a native mobile app. The main reason for choosing a progressive web app is that it enhances the speed and adaptability of web applications. Even with a bad internet connection, using PWA will be easier to access the information without any problem. Samples of PWA: Starbucks, BMW, Spotify LESSON 2: HTML, CSS, JS 101 Part 1 Markup Language Standard text-encoding system consisting of a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts. The most widely used markup languages are SGML (Standard Generalized Markup Language), HTML (Hypertext Markup Language), and XML (Extensible Markup Language). The markup symbols can be interpreted by a device (computer, printer, browser, etc.) to control how a document should look when printed or displayed on a monitor. A marked-up document thus contains two types of text: text to be displayed and markup language on how to display it. SGML - standard generalized markup language, an international computer standard for the definition of markup languages; that is, it is a metalanguage. Markup consists of notations called “tags,” which specify the function of a piece of text or how it is to be displayed. XML - extensible markup language, a document formatting language used for some World Wide Web pages. HTML - hypertext markup language, a formatting system for displaying material retrieved over the Internet. XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). XHTML is a stricter, more XML-based version of HTML. Hypertext Markup Language The standard markup language for creating Web pages. Describes the structure of a Web page Elements tell the browser how to display the content. Uses.htm or.html file extension. HTML5: 1. First released in a public-facing form on 22 January 2008. 2. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. 3. Improve the language with support for the latest multimedia and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc., without XHTML's rigidity; and to remain backward-compatible with older software. The Declaration The declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The declaration is not case sensitive. The declaration for HTML5 is: HTML ELEMENTS Defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag: Content goes here... HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. HTML Attributes All HTML elements can have attributes. Attributes provide additional information about elements. Attributes are always specified in the start tag. Attributes usually come in name/value pairs like: name="value" The href attribute of specifies the URL of the page the link goes to. The src attribute of specifies the path to the image to be displayed. The width and height attributes of provide size information for images. The alt attribute of provides an alternate text for an image. The style attribute is used to add styles to an element, such as color, font, size, and more. The lang attribute of the tag declares the language of the Web page. The title attribute defines some extra information about an element. HTML COMMENTS HTML comments are not displayed in the browser, but they can help document your HTML source code. You can add comments to your HTML source by using the following syntax: