Intro to web dev
0 likes152 views
The document provides an overview of web development. It discusses the objectives of the workshop which are to understand the differences between web designers and developers, and gain knowledge of front-end technologies like HTML, CSS, and JavaScript. It also explains why the web is popular due to being cross-platform, writable once and usable everywhere. Key topics covered include the history of the web, definitions of web designers versus developers, front-end versus back-end development, and an overview of HTML, CSS, and JavaScript.
Intro to web dev
- 2. • Objectives ▪At the end of this workshop, you will be able to know. ▪Importance of Web Development. ▪Web Designer Vs. Web Developer. ▪Front-end and Back-end Web Development. ▪An Overview of HTML, CSS and JavaScript. 2
- 3. • Why the Web ▪ The web is everywhere. ▪ All you need to get started is an internet browser and a text editor. ▪ Build web apps, desktop apps, mobile apps. ▪ Cross platform. ▪ Write once run everywhere. ▪ Popular. 3
- 4. • History of the web 4
- 5. • World Wide Web ▪An information network built on top of the internet using hyperlinked documents. 5
- 6. • World Wide Web ▪An information network built on top of the internet using hyperlinked documents. 6
- 7. • Web Designer vs Web Developer 7
- 8. • Web Designer ▪Designs the look and feel of a website (creative side of a website). ▪Decides the layout, fonts, color, images. ▪Creates the visual mock-up of the website. ▪Rarely does the development of a website! ▪A creative Person. 8
- 9. • Web Developer ▪Brings the website mock-up to life (development side of website). ▪Develops the website and hosts on a web server. ▪Has web development skills: html, css, JavaScript, php, Perl, python, java, ruby ,etc... ▪A logical person. 9
- 10. • Web Designer vs Web Developer 10
- 11. • Front End & Back End Web Development 11
- 12. • Front End Web Development ▪Defined components on the page with HTML. ▪Make them look pleasing with CSS. ▪Enable interactivity with JavaScript. ▪Enhance productivity with use of frameworks. 12
- 13. • Back End Web Development ▪Create the page components and content dynamically on the web server. ▪Send data to a web browser. ▪Many programming languages java, javascript, php, perl, python, ruby. ▪Aim to achieve fast response times to end users. 13
- 15. • An Overview of HTML, CSS, and JS 15 ▪Html ▪Hypertext markup language ▪Structure of page ▪Javascript ▪Interactivity with user ▪Dynamic updates in a web page ▪Css ▪Cascading style sheets ▪Presentation/styling
- 16. • HTML 16
- 17. • HTML ▪Hypertext markup language. ▪The most basic building block of the web. ▪It defines the meaning and structure of web content. ▪Hypertext" refers to links that connect web pages to one another. ▪Links are a fundamental aspect of the web. ▪The latest version is HTML5. 17
- 18. • HTML <!DOCTYPE html> <html> <head> <title>This is a title of your website</title> </head> <body> <p>Welcome to HTML5, CSS3 and JavaScript!</p> </body> </html> 18
- 19. • HTML tags ▪Heading ▪ It is used to define the heading of html document. ▪ Syntax <h1>Heading 1 </h1> <h2>Heading 2 </h2> <h3>Heading 3 </h3> <h4>Heading 4 </h4> <h5>Heading 5 </h5> <h6>Heading 6 </h6> 19
- 20. • HTML tags ▪ Paragraph tag ▪ It is used to define paragraph content in html document. ▪ Syntax <p>Hello world</p> ▪ Small tag ▪It is used to set the small font size of the content. ▪ Syntax <small>Example</small> 20
- 21. • HTML tags ▪ Anchor tag ▪It is used to link one page to another page. ▪ Syntax <a href="https://www.google.com/"> go to google</a> ▪ List tag ▪ It is used to list the content ▪ Syntax <li>List item 1</li> <li>List item 2</li> 21
- 22. • HTML tags ▪ Ordered List tag ▪It is used to list the content in a particular order. ▪ Syntax <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> 22
- 23. • HTML tags ▪ Unordered List tag ▪It is used to list the content without order. ▪ Syntax <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ul> 23
- 24. • HTML tags ▪ Comment tag ▪ It is used to set the comment in html document. It is not visible on the browser. ▪ Syntax <!--Comment section--> ▪ Line break tag ▪ It is used to break the line. ▪ Syntax <br> ▪ Image tag ▪ It is used to add image element in html document. ▪ Syntax ▪ <img src="https://via.placeholder.com/150" alt= " image placeholder" > 24
- 25. • HTML tags ▪ Horizontal rule tag ▪ It is used to display the horizontal line in html document. ▪ Syntax <hr/> ▪ Link tag: ▪ It is used to link the content from external source. ▪ Syntax <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> 25
- 26. • HTML tags ▪ Tables Tags ▪ Table tag is used to create a table in html document. ▪ Tr tag ▪ It is used to define row of html table. ▪ Th tag ▪ It defines the header cell in a table. By default it set the content with bold and center property. ▪ Td tag ▪ It defines the standard cell in html document. 26
- 27. • HTML tags ▪ Syntax <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 27
- 28. • HTML tags ▪ Submit input tag ▪ It is used to take the input from the user. ▪ Syntax <input type="text" size="10" maxlength="30"> ▪ Type ▪ checkbox, color, date, datetime-local, email, file, hidden, number, password, radio, range,reset, text,url,etc… 28
- 29. • HTML tags ▪ Form tag ▪ It is used to create html form for user. ▪ Syntax <form action="mailto:you@yourdomain.com "> Name: <input name="Name" ><br> Email: <input name="Email"><br> <br> <button type="submit">submit</button> </form> 29
- 30. • HTML tags ▪ Select tag ▪ represents a control that provides a menu of options: ▪ Option tag ▪ is used to define an item contained in a <select>, an <optgroup>, or a <datalist> 30
- 31. • HTML tags ▪ Syntax <label for="dino-select">Choose a dinosaur:</label> <select id="dino-select"> <optgroup label=“group1"> <option>option1</option> </optgroup> <optgroup label=“group 2"> <option>option2</option> </optgroup> </select> 31
- 32. • HTML tags ▪ Span tag ▪ Element is a generic inline container, it can be used to group elements for styling purposes for because they share attribute values. ▪ Div tag ▪ Is the generic container for flow content. It has no effect on the content or layout until styled using CSS. ▪ Syntax <p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p> <div class="warning"> <p>Beware of the leopard</p> </div> 32
- 33. • HTML tags ▪ And many more video, audio, center, b, string, i, em, figcaption, dl, dt, header, nav, footer, section, article, cite, textarea, button, pre, address etc … ▪ For more information about html tags visite https://dev.w3.org/html5/html-author/ 33
- 34. • CSS 34
- 35. • CSS ▪Cascading style sheets (CSS). ▪Is a stylesheet language used to describe the presentation of a document written in html or xml. ▪Css describes how elements should be rendered on screen, on paper, or on other media. ▪Css is one of the core languages of the open web and is standardized across web browsers according to the w3c specification. ▪ The latest version is CSS3. 35
- 36. • CSS ▪To add css to a web page ▪Externally ▪<link rel="stylesheet" type="text/css“ href="style.css"> ▪Internal ▪<style> style to write… </style> ▪Inline ▪<p style=“style to write…”>inline css</p> 36
- 37. • CSS ▪Syntax Selector { attribute: value; } 37
- 38. • CSS Selectors ▪Tag p { color: blue; } ▪Class .uppercase{ text-transform: uppercase; } ▪ Id #main{ font-size: 16px; } 38
- 39. • Pseudo-elements ▪hover p:hover { color: green; } ▪all * { font-size: 16px; } ▪ visited a:visited{ color: purple; 39
- 41. • colors ▪name /* blue */. ▪hex /* #ffffff */. ▪rgb /* rgb(255,255,255) */. ▪rgba /* rgba (200,200,200,0.8) */. ▪hsl /* hsl(0, 100%, 50%) */. 41
- 42. • CSS 42
- 44. • CSS media query ▪Syntax @media device. ▪Logical operator and ,only, not . ▪Device ▪Screen /* Écrans */. ▪Handheld /* Périphériques mobiles ou de petite taille */ ▪Print. ▪prefers-color-scheme /* dark or light theme */. 44
- 45. • Display flex ▪Parent ▪Display // flex, flex-inline. ▪ flex-direction // row, row-reverse, column, column-reverse. ▪flex-wrap // wrap, nowrap. ▪justify-content // flex-start, flex-end, center, space-between,space-around, space-evenly. ▪align-items // flex-start, flex-end, center, baseline,stretch. ▪align-content // flex-start, flex-end, center, space-between,space-around, space-evenly. 45
- 46. • Display flex ▪Child ▪Order // integer. ▪align-self // flex-start, flex-end, center, baseline,stretch. ▪flex-grow ▪flex-shrink ▪flex-basis 46
- 47. • JavaScript 47
- 48. • Javascript ▪JavaScript is a scripting language most often used for client-side web development. ▪JavaScript is an implementation of the ECMAScript standard. ▪Different brands or/and different versions of browsers may support different implementation of JavaScript. ▪To create interactive user interface in a web page. 48
- 49. • JavaScript ▪To add js to a web page ▪Externally ▪<script type="text/javascript“ src="your_source_file.js"></script> ▪Internal ▪<script> script to write… </script> ▪If js is disabled ▪<noscript>Your browser does not support JavaScript.</noscript> 49
- 50. • JavaScript ▪ Les Variables. ▪ Les Conditions. ▪ Les Boucles. ▪ Les Fonctions. ▪ Les prototypes. ▪ Try Catch. ▪ Le JavaScript côté navigateur ▪ L'objet Window. ▪ Le DOM. ▪ Les évènements. 50
- 51. Demo 51
- 52. Thank you for your attention 52