web design fundamentals by ahmed faris
TRANSCRIPT
Web Design Fundamentals
Let’s Build Websites
AHMED FARIS
FREELANCER WEB UI / UX DEVELOPER
Web Design Definition
WEB
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?
UI Design
Sketch Layout
Example 2
Sketch Layout
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
HTMLHyper Text Markup Language
<html>
Why? How?What?
<tag attribute=“value”>
content
</tag>
html Syntax
<tag attribute=“value”>
content
</tag>
<tag attribute=“value”>
content
</tag>
html Structure
<html>
<head>
</head>
<body>
</body>
</html>
- 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>
CSSCascading Style Sheets
.CSS { }
Why? How?What?
<tag attribute=“value”>
content
</tag>
CSS Syntax
Selector {
property: value;
property: value;
}
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
body {
font-family: Tahoma;
background: green;
}
1
Target Tags2
ID3
Class4
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
body div p {
font-size: 18px;
color: #fffddd;
}
1
Target Tags2
ID3
Class4
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
#ayhaga{
width: 320px;
border: 1px solid red;
}
1
Target Tags2
ID3
Class4
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
.ahmed2{
position: absolute;
margin: 5px 2px 5px 2px;
}
1
Target Tags2
ID3
Class4
JQueryJava Script Library
JQuery
Why? How?What?
Sources
• w3.org/standards/webdesign/htmlcss
• w3schools.com
• ar.html.net
• learn.shayhowe.com/html-css
• material-ui.com
• Tutsplus.com
ApplicationsWeb D&P Languages Editors
Code Editors WYSIWYG
CMSContent Management Systems
Web Mastering
• Domain Names
• Hosting Servers
• FTP
• Servers OS’s
• WHM/Cpanel
• ………….
Thank You !AHMED FARIS
FREELANCER WEB UI / UX DEVELOPER
WWW.ALFARIS.WS
010 9234 7057