This document provides an overview of how to create a website template within one hour. It briefly covers the history of web design from the first webpage in 1992 to modern sites like Google and Apple. It distinguishes between front-end development using HTML, CSS and JavaScript and back-end development using languages like PHP, Python and C#. It also introduces responsive design frameworks like Bootstrap that allow sites to adapt to different screen sizes. The document concludes by providing resources for learning Bootstrap and coding a practical responsive project within an hour.

1. CREATE A WEBSITETEMPLATE WITHIN ONE HOUR

2. HIGHLIGHTS
• History of Web Design
• Difference between Front-end Development & Back-End Development
• What is responsive?
• Responsive CSS Frameworks: Foundation, Bootstrap, …
• Practical Project
• Resources

3. History of Web Design

4. THE FIRST WEB PAGE (WWW) IN 1992

5. THE WHITE HOUSE IN 1994

6. YAHOO! IN 1996

7. GOOGLE IN 1998

8. CNET IN 1996

9. APPLE'S WEBSITE 1996 - 2011

10. Front-end development
HTML, CSS, JavaScript

11. Back-end development
C++, C#, Java
another high-level
programming language : PHP,
Python, Perl, .NET, Ruby, etc.

12. WHAT IS RESPONSIVE?

13. RESPONSIVE?
DesktopView

14. FTW!
MobileView

15. RESPONSIVE?
DesktopView

16. HOW?
MobileView

17. Bootstrap is the most popular HTML, CSS, and JS framework
for developing responsive, mobile first projects on the web.
http://getbootstrap.com/

24. LET’S CODE!

25. RESOURCES
• http://bootstrapbay.com/blog/bootstrap-resources/
• http://startbootstrap.com/bootstrap-resources/
• http://designshack.net/articles/css/20-awesome-
resources-for-twitter-bootstrap-lovers/

26. ThankYou!
Good Luck in your exams.
See you second term.
www.fb.com/ucsycsclub
www.fb.com/groups/ucsycsclub/