Intro to web dev

Web development workshop
2020
1

• 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

• 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

• World Wide Web
▪An information network built on top of the internet
using hyperlinked documents.
5

• World Wide Web
▪An information network built on top of the internet
using hyperlinked documents.
6

• Web Designer
vs
Web Developer
7

• 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

• 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

• Web Designer vs Web
Developer
10

• Front End & Back End
Web Development
11

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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>
21

• HTML tags
▪ Ordered List tag
▪It is used to list the content in a particular order.
▪ Syntax
<ol>
</ol>
22

• HTML tags
▪ Unordered List tag
▪It is used to list the content without order.
▪ Syntax
<ul>
</ul>
23

• HTML tags
▪ Comment tag
▪ It is used to set the comment in html document. It is not visible on the browser.
▪ Syntax

▪ 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

• 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

• 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

• HTML tags
▪ Syntax
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
27

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• CSS
▪Syntax
Selector {
attribute: value;
}
37

• CSS Selectors
▪Tag
p {
color: blue;
}
▪Class
.uppercase{
text-transform: uppercase;
}
▪ Id
#main{
font-size: 16px;
}
38

• Pseudo-elements
▪hover
p:hover {
color: green;
}
▪all
* {
font-size: 16px;
}
▪ visited
a:visited{
color: purple; 39

• Units
▪px.
▪rem.
▪em.
▪%.
▪ch.
40

• colors
▪name /* blue */.
▪hex /* #ffffff */.
▪rgb /* rgb(255,255,255) */.
▪rgba /* rgba (200,200,200,0.8) */.
▪hsl /* hsl(0, 100%, 50%) */.
41

• CSS rules
▪font-family.
▪color.
▪font-size.
▪background.
▪text-align.
▪text-decoration.
▪text-transform.
▪transform.
▪width. 43

• 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

• 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

• Display flex
▪Child
▪Order // integer.
▪align-self // flex-start, flex-end, center, baseline,stretch.
▪flex-grow
▪flex-shrink
▪flex-basis
46

• 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

• 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

• 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

Thank you for your
attention
52

Intro to web dev

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Intro to web dev

Similaire à Intro to web dev (20)

Plus de kamar MEDDAH

Plus de kamar MEDDAH (13)

Dernier

Dernier (20)

Intro to web dev