Web Design Fundamentals - Let's Build Websites
•
2 likes•1,365 views
This document provides an overview of web design fundamentals, including definitions of web design, HTML, CSS, and jQuery. It discusses asking the right questions to define the purpose and audience of a website. HTML tags for text, media, and other content are described. CSS syntax and different types of selectors like tags, IDs, and classes are covered. Examples of sketch layouts and code snippets are provided. Content management systems and aspects of web hosting are also briefly mentioned. The document aims to introduce basic concepts for building websites.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web Design Fundamentals - Let's Build Websites
Similar to Web Design Fundamentals - Let's Build Websites (20)
More from Experience inbound initiative
More from Experience inbound initiative (11)
Recently uploaded
Recently uploaded (20)
Web Design Fundamentals - Let's Build Websites
- 1. Web Design Fundamentals Let’s Build Websites AHMED FARIS FREELANCER WEB UI / UX DEVELOPER
- 4. WEB
- 7. 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?
- 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. HTML Hyper Text Markup Language
- 14. <tag attribute=“value”> content </tag> html Syntax <tag attribute=“value”> content </tag>
- 15. <tag attribute=“value”> content </tag> html Structure <html> <head> </head> <body> </body> </html>
- 16. - 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>
- 18. .CSS { } Why? How?What?
- 19. <tag attribute=“value”> content </tag> CSS Syntax Selector { property: value; property: value; }
- 20. Selectors Selectors Tags <tag attribute=“value”> content </tag> body { font-family: Tahoma; background: green; } 1 Target Tags2 ID3 Class4
- 21. Selectors Selectors Tags <tag attribute=“value”> content </tag> body div p { font-size: 18px; color: #fffddd; } 1 Target Tags2 ID3 Class4
- 22. Selectors Selectors Tags <tag attribute=“value”> content </tag> #ayhaga{ width: 320px; border: 1px solid red; } 1 Target Tags2 ID3 Class4
- 23. Selectors Selectors Tags <tag attribute=“value”> content </tag> .ahmed2{ position: absolute; margin: 5px 2px 5px 2px; } 1 Target Tags2 ID3 Class4
- 26. Sources • w3.org/standards/webdesign/htmlcss • w3schools.com • ar.html.net • learn.shayhowe.com/html-css • material-ui.com • Tutsplus.com
- 27. Applications Web 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