web design-ninja
TRANSCRIPT
![Page 1: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/1.jpg)
Real world techniques to build websites
PamiCloud Pami Pharaonic
Produced By : ElectroTeam
Senior Developer
Eng. Mohamed Saad
Managing Director
Mrs. Alaa El Garhy
9 July 2015
Static Web Design
![Page 2: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/2.jpg)
Strategy
1. HTML 5. Add web page elements
2. JavaScript (JQuery).
Add interactivity
3. CSS 3. Add style & animation
![Page 3: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/3.jpg)
Tree Of Elements
HTML5 is a core technology markup language of the Internet used
for structuring and presenting content for the World Wide Web.
HTML 5
![Page 4: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/4.jpg)
HTML 5 Contents
1. Basic Concepts. What Makes A Quality Website?
Website Design and Development Process.
2. HTML Coding.
Introduction to HTML coding.
How to create basic Web pages?
Web page elements: Lists, Links &Tables...etc.
W3C Validation validator.w3.org
3. Media.
4. APIs.
5. Graphics.
6. Forms.
![Page 5: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/5.jpg)
HTML 5 Sessions
SE Subject Duration in Hours
1 Basic Concepts & HTML Coding 2
2 Media, API, Graphics & Forms 2
3 Validation Student Project & Final Exam 2
Total 6 Hours
![Page 6: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/6.jpg)
Dynamic programming language
It is most commonly used as part of web browsers, whose implementations
allow client-side scripts to interact with the user, control the browser,
communicate asynchronously, and alter the document content that is
displayed. JavaScript is also considered an "assembly language of the web"
JavaScript
![Page 7: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/7.jpg)
JavaScript Contents
1. JavaScript syntax. • Statements.
• Variables.
• Operators.
• Numbers.
• Strings.
• Math.
• Date.
• Arrays.
2. Conditional Statements.
3. Loops.
4. Type Conversion.
5. Functions.
6. DOM.
Elements.
CSS.
Events.
Methods.
7. JavaScript libraries.
8. Security.
9. Jquery.
![Page 8: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/8.jpg)
JQuery
jQuery is a cross-platform JavaScript library designed to
simplify the client-side scripting of HTML. jQuery is the
most popular JavaScript library in use today.
Covers:-
1- DOM Elements -open source selector.
2- Events.
3- Effects and animations.
![Page 9: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/9.jpg)
JavaScript Sessions
SE Subject Duration in Hours
1 JavaScript Syntax 1
2 Conditional Statements 0.5
3 Loops & Type Conversion 1
4 Functions 0.5
5 DOM 1
6 JavaScript libraries & Security 1
7 Student Project & Final Exam 1
8 JQuery 2
Total 8 Hours
![Page 10: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/10.jpg)
Form Validation Project.
Clickable Tab Interface Project .
Google Maps API Project
Implementation Video
![Page 11: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/11.jpg)
Cascading Style Sheets
Along with HTML and JavaScript, CSS is a cornerstone technology
used by most websites to create visually engaging webpages, user
interfaces for web applications, and user interfaces for many
mobile applications.
CSS
![Page 12: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/12.jpg)
CSS Contents
1. Cascading Style Sheets, how to style Web pages?
2. External and internal style sheets.
3. Styling Web pages elements.
4. Inheritance and what the cascade is?
5. The use of selectors when styling Web pages
6. Responsive CSS with SASS .
7. UI Design Mockups
![Page 13: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/13.jpg)
CSS Sessions
SE Subject Duration in Hours
1 External and internal style sheets 1
2 Styling Web pages elements. 1
3 Layout1 1
4 Layout2 1
5 layout3 1
6 Modify website templates 2
7 Responsive Web Design 2
8 UI Design Mockups 2
Total 11 Hours
![Page 14: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/14.jpg)
Implementation
1. Responsive Menu.
2. Responsive Mega Menu
3. Advanced Typographic.
4. Formatting Visual Data (FLV)
5. CSS Gradients.
6. Scroll-Based CSS Animations.
7. HTML5 Interactive Contents.
Video
![Page 15: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/15.jpg)
Be Advised Home Work And Scheduled Assignment is essential to get your
certificate, but there are more…
Student with A+ [100%-95%] will get one year Hosting account &
off course a Domain Name, TOTALLY Free of Charge, Plus all
ElectroTeam online courses HD on Cd`s with source Code. [C-panel]
Student With Grade A [94.9%-90%] will get two years 100 GByte
Free Hosting service, along with Name servers to connect External
domains with your hosting space, Plus all ElectroTeam online courses
HD on Cd`s with source Code
Student With Grade B+ [89.9%-85%] will get Free Domain and
all ElectroTeam online courses HD on Cd`s with source Code.
Student With Grade B [84.9%-80%] will get all ElectroTeam
online courses HD on Cd`s with source Code.
![Page 16: Web design-ninja](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55cd6e15bb61eb626c8b470c/html5/thumbnails/16.jpg)
Contact Us
02 - 2266 9046
010 - 95 800 830
facebook.com/itbigdig
twitter.com/ITBigDig
youtube.com/c/itbigdig
plus.google.com/u/2/+Itbigdig
eg.linkedin.com/in/electroteam
PamiCloud [email protected]