web dev
- 1. WEB- DEVELOPMENT • POWERPOINT PRESENTATION ON FRONT-END DEVELOPMENT • PRESENTED BY:- Ritik roshan • Bhagwan parshuram institute
- 2. What is Front-end Web Development Front-end or Client Side web Development Refers to everything in a web application That is displayed on the Front-end (end user Device) which users can see from the browsers.
- 3. HOW DOES INTERNET WORKS? • Client - Server • Client makes a request to go to a webpage “www.google.com” • request is sent to the Internet Service Provider (ISP) • Then the ISP will relay the message to the DNS Server • DNS Server • Input: web url • Output: IP Address of website • IP Address is obtained • Browser sends message to the server based on the IP address • Server sends back the data
- 4. HOW DOES WEBSITE WORKS? • HTML • Structure • CSS • Styling • JS • Actions
- 5. Front-end HTML Hyper Text Markup Language CSS Cascading Style Sheets JS Hyper Text Markup Language www.teckmovers.com Contact us:- +918383864079
- 6. Three Layers of Web Design Development Structure Style Behaviour HTML Markup CSS Java Script
- 7. INTRO HTML • HTML stands for HyperText Markup Language • File Structure
- 8. HTML-TAGS Header • <h#> • h1,h2,h3,h4,h5,h6 • Line Break • <br> • White space • Horizontal Rule • <hr> • Horizontal Line
- 9. HTML-TAGS • Paragraph • <p> • Goes into a new line • <ul> • Image • <img> • src= • Can be a URL to another source where image is on the internet • Can be a local file in the path of the page directory • alt= • Alternative, if src fails to obtain an image to render to the page
- 10. Introduction to CSS • Every elements in a web page is essentially all composed of a series of boxes • Inline CSS • CSS attributes that can be placed in the html file to style the page in the form of being in the individual html tag themselves • Internal CSS • Use of the <style> tag inside the <head> • External CSS • Link to the .css file with <link rel=”stylesheet” href=”css_file”> in the <head> of html file • Anatomy of CSS Syntax • selector { property : value; }
- 11. CSS Selectors • Tag Selector • Ex. h1, img, body • Class Selector • Inside HTML, of the html tag include class=” ” • Then in the CSS, select the class by including a . in the front • .class_identifier { property : value; } • ID Selector • Inside HTML, of the html tag, include id=” ” • Then in the CSS, select the id by including a # in the front • #id_identifier { property : value; } • ID vs Class Selectors • ID - use only for a single html tag where you want to modify its style • There can only be one id_identifier for a given html file
- 12. INTERMEDIATE CSS • <div> • Combines a group of html elements into a single box • Useful to structure and divide up web content • <span> • An inline element where you can use to pick a sub-section of a html element, which can then be used to style • The Box Model • Width • Height • Padding • Border • Border Size • Solid, Dashed, …
- 13. PROJECT –PORTFOLIO WEBSITE • Speak about project and learnings
- 14. THANK YOU