Web Design Fundamentals

31
Web Design Fundamentals Let’s Build Websites AHMED FARIS FREELANCER WEB UI / UX DEVELOPER

description

محاضرة اساسيات تصميم مواقع الويب لاحمد فارس فريق انوار رسالة

Transcript of Web Design Fundamentals

Page 1: Web Design Fundamentals

Web Design Fundamentals

Let’s Build Websites

AHMED FARIS

FREELANCER WEB UI / UX DEVELOPER

Page 2: Web Design Fundamentals

Web Design Definition

Page 3: Web Design Fundamentals
Page 4: Web Design Fundamentals

WEB

Page 5: Web Design Fundamentals
Page 6: Web Design Fundamentals
Page 7: Web Design Fundamentals

Questions Worth Asking?

What will be the purpose of your website?

Who will your audience be?

What will be the content of your website?

What types of design are you aiming at?

Page 8: Web Design Fundamentals

UI Design

Sketch Layout

Page 9: Web Design Fundamentals

Example 2

Sketch Layout

Page 10: Web Design Fundamentals
Page 11: Web Design Fundamentals

Father of the Internet

I just had to take the hypertext idea and connect it to

the TCP and DNS ideas and —ta-da! —the World Wide Web.–- Sir, Tim Berners-Lee

Known as the Creator of WWW

Page 12: Web Design Fundamentals

HTMLHyper Text Markup Language

Page 13: Web Design Fundamentals

<html>

Why? How?What?

Page 14: Web Design Fundamentals

<tag attribute=“value”>

content

</tag>

html Syntax

<tag attribute=“value”>

content

</tag>

Page 15: Web Design Fundamentals

<tag attribute=“value”>

content

</tag>

html Structure

<html>

<head>

</head>

<body>

</body>

</html>

Page 16: Web Design Fundamentals

- Heading <h#></h#>

- Paragraph <P> </p>

- Order list <ol> </ol>

- Unorder list <ul> </ul>

- List item <li> </li>

- Image <img />

- Sound

<audio>

</audio>

- Video

<video>

</video>

- Link <a> </a>

- Division <div> </div>

- Table

<table></table>

- Heading <h#></h#>

- Paragraph <P> </p>

- Order list <ol> </ol>

- Unorder list <ul> </ul>

- List item <li> </li>

Tags

Text Media Misc.

- Image <img />

- Sound

<audio>

</audio>

- Video

<video></video>

- Link <a> </a>

- Division <div> </div>

- Table

<table>

</table>

Page 17: Web Design Fundamentals

CSSCascading Style Sheets

Page 18: Web Design Fundamentals

.CSS { }

Why? How?What?

Page 19: Web Design Fundamentals

<tag attribute=“value”>

content

</tag>

CSS Syntax

Selector {

property: value;

property: value;

}

Page 20: Web Design Fundamentals

Selectors

Selectors Tags

<tag

attribute=“value”>

content

</tag>

body {

font-family: Tahoma;

background: green;

}

1

Target Tags2

ID3

Class4

Page 21: Web Design Fundamentals

Selectors

Selectors Tags

<tag

attribute=“value”>

content

</tag>

body div p {

font-size: 18px;

color: #fffddd;

}

1

Target Tags2

ID3

Class4

Page 22: Web Design Fundamentals

Selectors

Selectors Tags

<tag

attribute=“value”>

content

</tag>

#ayhaga{

width: 320px;

border: 1px solid red;

}

1

Target Tags2

ID3

Class4

Page 23: Web Design Fundamentals

Selectors

Selectors Tags

<tag

attribute=“value”>

content

</tag>

.ahmed2{

position: absolute;

margin: 5px 2px 5px 2px;

}

1

Target Tags2

ID3

Class4

Page 24: Web Design Fundamentals

JQueryJava Script Library

Page 25: Web Design Fundamentals

JQuery

Why? How?What?

Page 26: Web Design Fundamentals

Sources

• w3.org/standards/webdesign/htmlcss

• w3schools.com

• ar.html.net

• learn.shayhowe.com/html-css

• material-ui.com

• Tutsplus.com

Page 27: Web Design Fundamentals

ApplicationsWeb D&P Languages Editors

Page 28: Web Design Fundamentals

Code Editors WYSIWYG

Page 29: Web Design Fundamentals

CMSContent Management Systems

Page 30: Web Design Fundamentals

Web Mastering

• Domain Names

• Hosting Servers

• FTP

• Servers OS’s

• WHM/Cpanel

• ………….

Page 31: Web Design Fundamentals

Thank You !AHMED FARIS

FREELANCER WEB UI / UX DEVELOPER

WWW.ALFARIS.WS

[email protected]

010 9234 7057