Web Design Fundamentals
•
5 likes•1,140 views
محاضرة اساسيات تصميم مواقع الويب لاحمد فارس فريق انوار رسالة
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web Design Fundamentals
Similar to Web Design Fundamentals (20)
More from Ahmed Faris
Recently uploaded
Recently uploaded (20)
Web Design Fundamentals
- 1. Web Design FundamentalsLet’s Build Websites AHMED FARIS FREELANCER WEB UI / UX DEVELOPER
- 4. WEB
- 7. Questions Worth Asking? What will be the purposeof your website? Who will your audiencebe? What will be the content of your website? What types of designare you aiming at?
- 8. UI Design Sketch Layout
- 9. Example 2 Sketch Layout
- 11. 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
- 12. HTMLHyper Text Markup Language
- 13. <html> Why? How? What?
- 14. html Syntax <tagattribute=“value”> content </tag>
- 15. <tagattribute=“value”> content </tag> html Structure <html> <head> </head> <body> </body> </html>
- 16. -Heading<h#></h#> -Paragraph<P> </p> -Order list<ol> </ol> -Unorderlist<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> -Unorderlist<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>
- 18. .CSS { } Why? How? What?
- 19. <tagattribute=“value”> content </tag> CSS Syntax Selector{ property: value; property: value; }
- 20. Selectors Selectors Tags <tagattribute=“value”> content </tag> body{ font-family: Tahoma; background: green; } 1 Target Tags 2 ID 3 Class 4
- 21. Selectors Selectors Tags <tagattribute=“value”> content </tag> body div p{ font-size: 18px; color: #fffddd; } 1 Target Tags 2 ID 3 Class 4
- 22. Selectors Selectors Tags <tagattribute=“value”> content </tag> #ayhaga{ width: 320px; border: 1px solid red; } 1 Target Tags 2 ID 3 Class 4
- 23. Selectors Selectors Tags <tagattribute=“value”> content </tag> .ahmed2{ position: absolute; margin: 5px 2px 5px 2px; } 1 Target Tags 2 ID 3 Class 4
- 25. JQuery Why? How? What?
- 26. Sources •w3.org/standards/webdesign/htmlcss •w3schools.com •ar.html.net •learn.shayhowe.com/html-css •material-ui.com •Tutsplus.com
- 27. ApplicationsWeb D&P Languages Editors
- 30. Web Mastering •Domain Names •Hosting Servers •FTP •Servers OS’s •WHM/Cpanel •………….
- 31. Thank You ! AHMED FARIS FREELANCER WEB UI / UX DEVELOPER WWW.ALFARIS.WS AHMED@ALFARIS.WS 010 9234 7057