1 / 9

Essential Tools and Techniques for Learning Web Programming from Scratch

Dive into the world of web programming with essential techniques and tools to enhance your learning experience. We'll explore how to trace existing sites to uncover effective design practices and technologies, stressing the importance of understanding the fundamentals instead of copying source code. Utilize powerful tools such as code beautifiers and debuggers, including Firebug and built-in Chrome developer tools, to refine your skills. We'll also touch on web design criticism, guiding you on how to evaluate and provide constructive feedback on websites, fostering a solid foundation for your web development journey.

zelda
Télécharger la présentation

Essential Tools and Techniques for Learning Web Programming from Scratch

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Programming網際網路程式設計 Web Programming 網際網路程式設計

  2. Tool工具 Web Programming 網際網路程式設計

  3. Agenda • Trace an existing site to learn their techniques • know the technology name – maybe a shallow start point (http://underthesite.com/) • from the source code – please don’t, it’s better to learn from scratch • use other kinds of tools such as code beautifier and debugger • Criticize web design • there are many such critiques • even collection, teaching you how to criticize • and social critiques (http://pleasecritiqueme.com/) Web Programming 網際網路程式設計

  4. Learn from scratch • .appendTo • Codecademy • JavaScript Garden Web Programming 網際網路程式設計

  5. Other kinds of tools • Code beautifier • googlehtml code beautify or javascrtpt code beautify • Web Developer Tools: Code Beautifier and Formatter • Time-Savers: Code Beautifier And Formatter • Debugger • Firebug is a powerful debugger • provide a console to output debug messages • highlight code for the DOM object currently under the cursor • setup breaking points for step-by-step tracing • … • the built-in developer tool in Chrome (Ctrl+Shift+I) is very similar to Firebug Web Programming 網際網路程式設計

  6. Web design helpers • Web Developer is another light weight helper • disable specific functions such as CSS and JavaScript • display DOM information such as id, class and size • … • there are Chrome plugins such as Web Developer that imitate Web Developer • Visual eventhelps to see events subscribed to DOM nodes • Google firefox plugin web design and chrome extension web design • Performance • Which loads faster? • GTmetrix Web Programming 網際網路程式設計

  7. Criticize web design • Google critique web design • Teach you how to criticize • Web Design Criticism: A How-To • How Review, Evaluate, Critique a Web Site • Collections • 22 Web Design Critique Websites To Help get feedback • Case study • Web Design Critique #74: Pergola Farmhouses • Social site • Please Critique Me • upload your site and let other users to criticize • you may criticize the sites uploaded by other users Web Programming 網際網路程式設計

  8. Web Programming 網際網路程式設計

  9. Final exhibition期末展 The next week就是下週 Web Programming 網際網路程式設計

More Related