Web Development Presentation PDF

TOPICS TO BE COVERED: INTRODUCTION OF WEB DEVELOPMENT TYPES OF WEB DEVELOPMENT FRONT-END TECHNOLOGIES BACK-END TECHNOLOGIES TYPES OF FRONT-END WEB DEVELOPMENT (HTML & CSS) ADVANCED WEB DEVELOPMENT (JAVASCRIPT & BOOTSTRAP) Web development, also known as website development, refers...

TOPICS TO BE COVERED: INTRODUCTION OF WEB DEVELOPMENT TYPES OF WEB DEVELOPMENT FRONT-END TECHNOLOGIES BACK-END TECHNOLOGIES TYPES OF FRONT-END WEB DEVELOPMENT (HTML & CSS) ADVANCED WEB DEVELOPMENT (JAVASCRIPT & BOOTSTRAP) Web development, also known as website development, refers to the tasks associated with creating, building, and maintaining websites and web applications that run online on a browser. It may, however, also include web design, web programming, and database management. 1. HTML(hypertext Markup Language) 2. CSS(Cascading Style Sheet) 3. Javascript  TYPES OF WEB DEVELOPMENT 01 02 02 03 Front-End Back-End Full-Stack Development Development Development Front-end development involves the “client-facing” side of web development. Front-End Developers will usually need to possess a solid understanding of programming languages, including HTML, CSS, and JavaScript, as well as frameworks like React, Bootstrap, Backbone......... Back-End Developers are focused on how it works. Typically, Back-End Developers use server-side programming languages, including PHP, Ruby, and Python, as well as tools including MySQL, Oracle, and Git. A Full-Stack Developer is someone familiar with both front- and back-end development. Full Stack Developers usually understand a wide variety of programming languages and because of their versatility, they might be given more of a leadership role on projects than developers who specialize. FRONT-END WEB DEVELOPMENT 01 02 03 HTML CSS JS Hypertext Cascading JavaScript Markup Language Stylesheet HTML5 is the latest version of HTML and supports new markup language functionalities such as multimedia, new tags and elements as well as new APIs. HTML STRUCTURE  Semantic elements = elements with a meaning. Examples : , , ELEMENTS Examples of non-semantics elements are : and CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.  1... INLINE CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. This is a paragraph  2... INTERNAL CSS Internal CSS is written inside a element, which goes inside the of the HTML document.  3... EXTERNAL CSS External CSS is written in a separate file called an external stylesheet, and linked to the HTML document with a tag. CSS properties for colors property description color color of the element's text background-color color that will appear behind the element CSS Fonts properties CSS Text properties CSS Background properties WHAT IS JAVASCRIPT?  a lightweight programming language ("scripting language") used to make web pages interactive insert dynamic text into HTML (ex: user name) react to events (ex: page load user click) get information about a user's computer (ex: browser type) perform calculations on user's computer (ex: form validation) a web standard (but not supported identically by all browsers) NOT related to Java other than by name and some syntactic similarities Linking to a JavaScript file: script script tag should be placed in HTML page's head script code is stored in a separate.js file JS code can be placed directly in the HTML file'sbody or head (like CSS) INTRODUCTION OF BOOTSTRAP Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.  Advantages of Bootstrap Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap 5 is the newest version of Bootstrap... HOW TO ADD BOOTSTRAP IN OUR HTML DOCUMENT? THANK YOU FOR YOUR TIME. I HOPE YOU FOUND THIS PRESENTATION INSIGHTFUL.