Web development Hackathon
3 likes•743 views
This document outlines an agenda for a web development training from novice to Django. It covers front-end technologies like HTML, CSS, JavaScript, jQuery as well as back-end topics like Python and the Django web framework. The timeline indicates that each section will include a review of essential skills and a code snippet demonstration. HTML topics covered include document structure, tags for text formatting, images, tables and forms. CSS is introduced for styling and grid systems. JavaScript fundamentals and jQuery are also discussed. For back-end development, Python is explained for its open source nature, cross-platform capabilities, ease of learning and dynamic features. Core Python concepts are reviewed along with a hands-on demo. Django is then introduced for its
![ANATOMY OF HTML TAG
Tag is the building block of HTML.!
<tag [attribute=”value”]> </tag>!
or <tag [attribute=”value”] />!
Example <p dir=“rlt”> We are paragraph. </p>](https://image.slidesharecdn.com/hackathon-131201030908-phpapp01/85/Web-development-Hackathon-9-320.jpg)
![EXPRESSION IN PYTHON.
Operators
variable = 3 + 2
Data
5,
“hello”,
Operands
+ * = / %
[] () > =
& != |
Expression
Variables
x,name,
__len__](https://image.slidesharecdn.com/hackathon-131201030908-phpapp01/85/Web-development-Hackathon-29-320.jpg)
Web development Hackathon
- 1. WEB DEVELOPMENT FROM NOVICE TO DJANGO By AlSayed Gamal
- 3. TIME LINE In every section we will review/write a small snippet of code.! Essential skills.! Extra skills/tools.! Community.
- 4. WEB SCENARIO Every minute of you career you will be contributing to it.
- 5. FRONT-END ENGINEERING In this section we will be interested in technologies interested in generating and optimising user interface.
- 7. HTML Almost every single website have one of these.
- 8. DOCUMENT STRUCTURE Every document will / should include this
- 9. ANATOMY OF HTML TAG Tag is the building block of HTML.! <tag [attribute=”value”]> </tag>! or <tag [attribute=”value”] />! Example <p dir=“rlt”> We are paragraph. </p>
- 10. ANATOMY OF HTML TAG Text formatting.! <b>,<i>,<u>,<span>,<sup>,<sub>,<ul>,<li>, etc..! Images and media.! <img />, <embed />, <video>.! Tables.! <table>,<tr>, <td> and <th>! Forms (The where, what and how questions.)! <form>, <fieldset>, <legend> and label. <input type=””>,<select>,<option> and <textarea>.
- 11. QUICK DEMO #1 In this demo:! Text formatting tags.! Image tag.! Links.! Forms.! Tables.
- 12. HTML 5 & CSS3 The buzz
- 13. CSS(CASCADNG STYLE SHEETS) Because HTML isn’t enough.
- 14. CSS ANATOMY Important paragraphs are “Red” important.
- 15. QUICK DEMO #2 In this demo:! Linking stylesheets.! styling borders.! styling text.! styling background.
- 16. GRID SYSTEMS You are obsolete if you are not using css framework now.
- 17. JAVASCRIPT for the sake of client.
- 18. QUICK DEMO #3 In this demo:! How to link Javascript.! Window alert, confirm and prompt.! How to handle click / mouse over events.
- 19. JQUERY IS A MUST. Javascript libraries that made dom manipulation, animations, validation and AJAX easy.
- 20. BACK-END DEVELOPMENT From now on it’s more about making the correct option.
- 21. WHY PYTHON? It’s Open source.! Cross platform.! Easy to learn.! No boiler plates.! Dynamic (to be explained in code).! Community. ?
- 22. OPEN SOURCE open source = freedom.
- 23. CROSS PLATFORM write once, run everywhere.
- 24. EASY TO LEARN It takes < 10 seconds to write your hello, world.
- 25. SYSTEM.OUT.PRINT(“HELLO,WORLD”); It takes 1 line to your “hello, world”
- 26. FROM 29TH TO 8TH IN < 7 YEARS* It’s 8th too in 2013. *TOIBE.com | TIOBE Programming Community Index for November 2013
- 27. “Innovation distinguishes between a leader and a follower.” –Steve Jobs
- 28. PYTHON ESSENTIALS Scripting nature.! Basic data types.! Operators.! Flow control.! Functions are fun.! Modules.! OOP.
- 29. EXPRESSION IN PYTHON. Operators variable = 3 + 2 Data 5, “hello”, Operands + * = / % [] () > = & != | Expression Variables x,name, __len__
- 30. PYTHON BLOCKS Branching if condition: If block Function definition def foo(x,y): function body Loop for item in structure: for block Class definition class class_name(parent): class definition
- 31. GETTING YOUR HANDS DIRTY Quick Demo #4
- 32. BEFORE WE START If you are linux or unix based you are good to go.! Else If you are on windows (I hope not) download and install! sublime text editor! python runtime! Our code will be perfect for Python 2.x and may be 3.x.
- 33. SORTED?
- 34. MEDIA.PY P1: Tawfik Okasha P2: Amr Adib
- 35. SCRIPT HIGHLIGHTS. Basic expression (variable assignment).! User input and output.! Function definition / passing function as variable.! List data-type.! Basic sorting.
- 36. DJANGO Django is RAD web framework! Django advantages! MTV.! ORM.! Admin Panel.! I18n.! Documentation.! Minimal Boiler Plates.! Elegant URL design
- 37. DJANGO ADMIN Well known to be the main advantage of django and it’s.
- 38. QUICK DEMO #5 The last and the best.
- 39. QUESTIONS?
- 40. THANKS